/* ===========================================================================
   TechFabric design tokens — Databricks Field Guide
   ---------------------------------------------------------------------------
   Generated from the TechFabric design system (palette: TechFabric Crimson).
   THIS IS THE ONLY FILE THAT DEFINES A COLOR, A SIZE, OR A RADIUS. Every other
   stylesheet, and the diagram renderer in bin/mermaid.js, consumes these
   custom properties and nothing else.

   The system is dark-first: deep neutral grounds, one decisive accent, and
   semantic status colors as the only other chromatic values. Both themes are
   defined here because a manual is read for long stretches and the reader's
   own preference should win.
   =========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------- */
  --sg-brand: #b30000;
  --sg-brand-hover: #8b0000;
  --sg-brand-active: #660000;
  --sg-primary-light: #e64545;
  --sg-primary-dark: #4d0000;

  /* Link and label text on dark grounds. The brand crimson is a fill color;
     at 3.7:1 on charcoal it is not a text color, so text on dark uses this
     tint, which clears 4.5:1 on every neutral ground in the system. */
  --sg-brand-on-dark: #f06565;

  /* --- status ------------------------------------------------------------ */
  --sg-success: #60c726;
  --sg-warning: #fcad00;
  --sg-error: #eb0500;

  /* --- neutral ----------------------------------------------------------- */
  --sg-page: #000000;
  --sg-page-grey: #1a1a1a;
  --sg-surface: #282828;
  --sg-card: #3a3a3a;
  --sg-card-hover: #4a4a4a;
  --sg-card-dark: #1f1f1f;
  --sg-card-dark-hover: #313131;
  --sg-border: #333333;
  --sg-text: #ffffff;
  --sg-text-muted: #a6a6a6;

  --sg-white: #ffffff;
  --sg-light-card: #f2f2f2;
  --sg-light-card-hover: #e6e6e6;
  --sg-light-2: #ebebeb;
  --sg-light-3: #cccccc;
  --sg-light-border: #e3e3e3;
  --sg-ink: #282828;
  --sg-ink-muted: #565656;
  --sg-ink-faint: #767676;

  /* --- semantic surfaces (light) ----------------------------------------- */
  --surface: var(--sg-white);
  --surface-raised: var(--sg-light-card);
  --surface-sunken: var(--sg-light-2);
  --surface-inverse: var(--sg-page);

  --border: var(--sg-light-border);
  --border-strong: var(--sg-light-3);

  --ink: var(--sg-ink);
  --ink-muted: var(--sg-ink-muted);
  --ink-faint: var(--sg-ink-faint);
  --ink-inverse: var(--sg-text);

  --accent: var(--sg-brand);
  --accent-hover: var(--sg-brand-hover);
  --accent-soft: #fdeaea;
  --accent-border: #f3c9c9;

  --note-accent: var(--sg-brand);
  --note-surface: #fdeaea;
  --tip-accent: #2f7d12;
  --tip-surface: #eef8e7;
  --warning-accent: #8a5d00;
  --warning-surface: #fdf3dd;

  --code-surface: var(--sg-light-card);
  --code-border: var(--sg-light-border);
  --code-ink: var(--sg-ink);
  --code-inline-surface: var(--sg-light-card);

  --selection: #f7d4d4;

  /* --- typography --------------------------------------------------------
     Poppins supplies authority in headings, Inter supplies clarity in body.
     Heading sizes are fluid, the way the rest of the system is, but capped
     lower than the marketing site: a manual page is a reading surface rather
     than a hero. */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-body: 1.0625rem;
  --text-lg: clamp(1.15rem, 1.4vw, 1.3rem);
  --text-xl: clamp(1.4rem, 2.2vw, 1.75rem);
  --text-2xl: clamp(1.75rem, 3vw, 2.15rem);
  --text-3xl: clamp(2.1rem, 4.4vw, 3rem);

  --leading-tight: 1.05;
  --leading-snug: 1.35;
  --leading-body: 1.6;

  --tracking-wide: 0.08em;
  --tracking-tight: 0em;
  --tracking-display: -0.03em;
  --tracking-heading: -0.025em;
  --tracking-subheading: -0.02em;

  /* --- space, on the 4px base -------------------------------------------- */
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  /* --- shape, on the system's radius scale: 0 / 4 / 8 / 16 / 50 ---------- */
  --radius-sharp: 0px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-pill: 50px;

  --shadow-sm: rgb(0 0 0 / 0.1) 0px 5px 12px 0px;
  --shadow: rgb(0 0 0 / 0.15) 0px 10px 24px 0px;
  --shadow-lg: rgb(0 0 0 / 0.2) 0px 15px 36px 0px;

  /* --- layout ------------------------------------------------------------ */
  --measure: 44rem;
  --sidebar-width: 17rem;
  --page-max: 84rem;
  --header-height: 60px;


  /* --- diagrams ----------------------------------------------------------
     Diagrams are rendered to SVG at build time and painted entirely through
     these tokens, so one diagram is correct in both themes. The node fill sits
     a step above the canvas it is drawn on, never below it, or the nodes read
     as holes rather than as boxes. */
  --diagram-canvas: var(--surface-raised);
  --diagram-fill: var(--sg-white);
  --diagram-fill-alt: #fdeaea;
  --diagram-fill-muted: var(--sg-light-2);
  --diagram-stroke: var(--sg-light-3);
  --diagram-stroke-muted: var(--sg-light-border);
  --diagram-ink: var(--sg-ink);
  --diagram-line: var(--sg-ink-faint);
  --diagram-cluster: transparent;
  --diagram-label-bg: var(--surface-raised);
  --diagram-accent: var(--sg-brand);
  --diagram-accent-fill: #fdeaea;
  --diagram-note-bg: #fdf3dd;
  --diagram-note-border: #8a5d00;

  --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- semantic surfaces (dark) --------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: var(--sg-page);
    --surface-raised: var(--sg-page-grey);
    --surface-sunken: var(--sg-page);
    --surface-inverse: var(--sg-white);

    --border: var(--sg-border);
    --border-strong: #4a4a4a;

    --ink: var(--sg-text);
    --ink-muted: var(--sg-text-muted);
    --ink-faint: #7d7d7d;
    --ink-inverse: var(--sg-ink);

    --accent: var(--sg-brand-on-dark);
    --accent-hover: #ff8a8a;
    --accent-soft: #2a0d0d;
    --accent-border: #5a1f1f;

    --note-accent: var(--sg-brand-on-dark);
    --note-surface: #2a0d0d;
    --tip-accent: var(--sg-success);
    --tip-surface: #14240a;
    --warning-accent: var(--sg-warning);
    --warning-surface: #2a1f05;

    --code-surface: var(--sg-card-dark);
    --code-border: var(--sg-border);
    --code-ink: #e8e8e8;
    --code-inline-surface: var(--sg-surface);

    --selection: #5a1f1f;

    --diagram-canvas: var(--sg-page-grey);
    --diagram-fill: var(--sg-surface);
    --diagram-fill-alt: #3a1414;
    --diagram-fill-muted: var(--sg-card-dark);
    --diagram-stroke: var(--sg-card-hover);
    --diagram-stroke-muted: var(--sg-border);
    --diagram-ink: var(--sg-text);
    --diagram-line: var(--sg-text-muted);
    --diagram-cluster: transparent;
    --diagram-label-bg: var(--sg-page-grey);
    --diagram-accent: var(--sg-brand-on-dark);
    --diagram-accent-fill: #3a1414;
    --diagram-note-bg: #2a1f05;
    --diagram-note-border: var(--sg-warning);
  }
}

:root[data-theme="dark"] {
  --surface: var(--sg-page);
  --surface-raised: var(--sg-page-grey);
  --surface-sunken: var(--sg-page);
  --surface-inverse: var(--sg-white);

  --border: var(--sg-border);
  --border-strong: #4a4a4a;

  --ink: var(--sg-text);
  --ink-muted: var(--sg-text-muted);
  --ink-faint: #7d7d7d;
  --ink-inverse: var(--sg-ink);

  --accent: var(--sg-brand-on-dark);
  --accent-hover: #ff8a8a;
  --accent-soft: #2a0d0d;
  --accent-border: #5a1f1f;

  --note-accent: var(--sg-brand-on-dark);
  --note-surface: #2a0d0d;
  --tip-accent: var(--sg-success);
  --tip-surface: #14240a;
  --warning-accent: var(--sg-warning);
  --warning-surface: #2a1f05;

  --code-surface: var(--sg-card-dark);
  --code-border: var(--sg-border);
  --code-ink: #e8e8e8;
  --code-inline-surface: var(--sg-surface);

  --selection: #5a1f1f;

  --diagram-canvas: var(--sg-page-grey);
  --diagram-fill: var(--sg-surface);
  --diagram-fill-alt: #3a1414;
  --diagram-fill-muted: var(--sg-card-dark);
  --diagram-stroke: var(--sg-card-hover);
  --diagram-stroke-muted: var(--sg-border);
  --diagram-ink: var(--sg-text);
  --diagram-line: var(--sg-text-muted);
  --diagram-cluster: transparent;
  --diagram-label-bg: var(--sg-page-grey);
  --diagram-accent: var(--sg-brand-on-dark);
  --diagram-accent-fill: #3a1414;
  --diagram-note-bg: #2a1f05;
  --diagram-note-border: var(--sg-warning);
}