/* GENERATED by website/scripts/sync-kit.mjs from design-system/foundations/tokens.scss -- do not edit. */
/* ============================================================================= */
/* OpsyOne Design System — Tokens */
/* Two-tier system: PRIMITIVES (raw colors) → SEMANTIC (function-named aliases). */
/* Components bind SEMANTIC tokens, never primitives or literal hex. */

/* Source of truth: design.md §1 + the palette/semantic data in design-system.html */
/* (primitive ramps: HTML lines 1064–1070; semantic mappings: lines 1076–1084). */
/* Transcribed verbatim — no derived or invented values. */
/* ============================================================================= */

:root {
  /* --------------------------------------------------------------------------- */
  /* TIER 1 — PRIMITIVES (90 colors: 8 palettes × 11 shades + 2 neutrals) */
  /* Named by hue, not function. Bind these only for rare one-offs. */
  /* --------------------------------------------------------------------------- */

  /* genoa — brand teal */
  --genoa-50:  #EFF8F6;
  --genoa-100: #DCEFED;
  --genoa-200: #BCE1DC;
  --genoa-300: #93CFC7;
  --genoa-400: #66BBB1;
  --genoa-500: #3DA89C;
  --genoa-600: #2A9D91;
  --genoa-700: #008D81;
  --genoa-800: #006D66;
  --genoa-900: #065B55;
  --genoa-950: #003837;

  /* tan-hide — accent / amber */
  --tan-hide-50:  #FEF6EC;
  --tan-hide-100: #FCE7C6;
  --tan-hide-200: #F9D399;
  --tan-hide-300: #F5BA61;
  --tan-hide-400: #F2A235;
  --tan-hide-500: #F0851F;
  --tan-hide-600: #D86F12;
  --tan-hide-700: #B4560F;
  --tan-hide-800: #8F4411;
  --tan-hide-900: #743813;
  --tan-hide-950: #401C08;

  /* submarine — neutral (grey-teal) */
  --submarine-50:  #F6F9F9;
  --submarine-100: #EDF0F1;
  --submarine-200: #D7DFE0;
  --submarine-300: #BDCBCD;
  --submarine-400: #8AA3A6;
  --submarine-500: #6C878B;
  --submarine-600: #566F73;
  --submarine-700: #47595D;
  --submarine-800: #3D4D4F;
  --submarine-900: #364244;
  --submarine-950: #242B2D;

  /* blue-dianne — info */
  --blue-dianne-50:  #ECF6F9;
  --blue-dianne-100: #CFE9F0;
  --blue-dianne-200: #A6D6E3;
  --blue-dianne-300: #6FBCD2;
  --blue-dianne-400: #3D9FBC;
  --blue-dianne-500: #2186A1;
  --blue-dianne-600: #1E7494;
  --blue-dianne-700: #1B5F7B;
  --blue-dianne-800: #1F4960;
  --blue-dianne-900: #163847;
  --blue-dianne-950: #10303C;

  /* silver-tree — success */
  --silver-tree-50:  #EFFAF2;
  --silver-tree-100: #D9F2DF;
  --silver-tree-200: #B6E4C4;
  --silver-tree-300: #87CEA2;
  --silver-tree-400: #67BB89;
  --silver-tree-500: #32975E;
  --silver-tree-600: #22794A;
  --silver-tree-700: #1C603D;
  --silver-tree-800: #184D32;
  --silver-tree-900: #153F2A;
  --silver-tree-950: #0B2318;

  /* goldenrod — warning */
  /* Full relight 2026-06-11 (palette review, board in Figma): 50–500 are the */
  /* designer's hand-tuned buttery golds (warmer, softer than the old Tailwind */
  /* yellow); 600–950 amber-warmed darks from the same review. NOTE: -700 on */
  /* -50 measures 4.49:1 — a hair under AA; flip warning text to -800 (5.46:1) */
  /* if it matters. */
  --goldenrod-50:  #FDF9E6;
  --goldenrod-100: #FBF0BF;
  --goldenrod-200: #F8E799;
  --goldenrod-300: #F6DF73;
  --goldenrod-400: #F3D64D;
  --goldenrod-500: #EFC70D;
  --goldenrod-600: #C58708;
  --goldenrod-700: #A56406;
  --goldenrod-800: #935808;
  --goldenrod-900: #6B3F06;
  --goldenrod-950: #422504;

  /* valencia — danger */
  --valencia-50:  #FCECEC;
  --valencia-100: #F8D7D7;
  --valencia-200: #F1B0B0;
  --valencia-300: #E68888;
  --valencia-400: #DA5E5E;
  --valencia-500: #CC3A3A;
  --valencia-600: #B62D2D;
  --valencia-700: #921F1F;
  --valencia-800: #6E1717;
  --valencia-900: #521010;
  --valencia-950: #2E0808;

  /* amethyst — suggestion violet */
  --amethyst-50:  #F6F1FB;
  --amethyst-100: #EBDFF6;
  --amethyst-200: #D8C2EC;
  --amethyst-300: #BE9DDF;
  --amethyst-400: #AC81D6;
  --amethyst-500: #9966CC;
  --amethyst-600: #8450BC;
  --amethyst-700: #6C3FA0;
  --amethyst-800: #56327F;
  --amethyst-900: #452967;
  --amethyst-950: #2A1741;

  /* neutrals */
  --white: #FFFFFF;
  --black: #000000; /* not yet bound — kept for palette completeness */

  /* --------------------------------------------------------------------------- */
  /* TIER 2 — SEMANTIC (42 tokens). Each aliases a primitive. Bind THESE. */
  /* --------------------------------------------------------------------------- */

  /* surface */
  --surface-page: var(--submarine-200);
  --surface-card: var(--white);
  --surface-hover:   var(--submarine-50);   /* neutral wash — hover on white surfaces (audit 2026-07-13) */
  --surface-pressed: var(--submarine-100);  /* neutral wash — pressed/active */
  /* Placeholder fill — Skeleton's resting grey and the lighter step it breathes */
  /* to (2026-07-15). These resolve to the same two primitives as pressed/hover */
  /* and are deliberately NOT aliased to them: a skeleton is neither hovered nor */
  /* pressed, and re-tuning an interaction state must not re-tune every loading */
  /* placeholder in the kit. */
  --surface-skeleton:       var(--submarine-100);
  --surface-skeleton-pulse: var(--submarine-50);

  /* text */
  --text-primary:   var(--submarine-950);
  --text-secondary: var(--submarine-700);
  --text-disabled:  var(--submarine-300);
  --text-link:      var(--genoa-800);
  --text-placeholder: var(--submarine-400); /* field placeholders — resolves the design.md §5 proposal */

  /* border */
  --border-default: var(--submarine-300);
  --border-subtle:  var(--submarine-100);
  --border-focus:   var(--submarine-500);

  /* brand (genoa) */
  --brand-primary:      var(--genoa-900);
  --brand-action:       var(--genoa-800);
  --brand-action-hover: var(--genoa-900);
  --brand-bg:           var(--genoa-50);
  --brand-border:      var(--genoa-200); /* quiet outline for brand-tinted reading surfaces */
  --brand-bg-hover:     var(--genoa-100);
  /* Pressed step of the darken-on-interact ladder (action → hover → pressed). */
  /* In Figma pressed fills bind the genoa/950 primitive (no semantic variable */
  /* there); in code Button/IconButton bind THIS token (audit fix 2026-07-05). */
  --brand-action-pressed: var(--genoa-950);

  /* accent (tan-hide) — darkened one step (Figma update 2026-06-10) so white */
  /* text on solid clears AA-large/UI contrast (3.39:1 on base, higher on states). */
  --accent-base:   var(--tan-hide-600);
  --accent-hover:  var(--tan-hide-700);
  --accent-bg:     var(--tan-hide-50);  /* bound 2026-07-08: InlineBanner accent (OpsyGo routing severity) */
  --accent-border: var(--tan-hide-300); /* -200 too faint on the -50 fill — same step-up as status-warning-border */
  --accent-text:   var(--tan-hide-800);

  /* Status text colors re-stepped to -700 in Figma 2026-06-11 (designer pass); */
  /* warning is the exception — see its comment below. */

  /* status — success */
  --status-success:        var(--silver-tree-500);
  --status-success-bg:     var(--silver-tree-50);
  --status-success-border: var(--silver-tree-200);
  --status-success-text:   var(--silver-tree-700);

  /* status — warning */
  /* Text back at -700 (family symmetry) since the amber-warmed -700 passes AA */
  /* on the -50 fill (4.7:1). NOTE: -500 base still fails 3:1 on white — fills */
  /* only; use -700+ for warning icons/strokes on white. */
  --status-warning:        var(--goldenrod-500); /* not yet bound (fills use -bg/-border/-text) — kept for family parity */
  --status-warning-bg:     var(--goldenrod-50);
  --status-warning-border: var(--goldenrod-300); /* stepped up from -200 (2026-06-11, banner border too faint) */
  --status-warning-text:   var(--goldenrod-700);

  /* status — danger */
  --status-danger:        var(--valencia-500);
  --status-danger-bg:     var(--valencia-50);
  --status-danger-border: var(--valencia-200);
  --status-danger-text:   var(--valencia-700);

  /* status — info */
  --status-info:        var(--blue-dianne-500); /* was -600; synced to Figma. Not yet bound — kept for family parity */
  --status-info-bg:     var(--blue-dianne-50);
  --status-info-border: var(--blue-dianne-200);
  --status-info-text:   var(--blue-dianne-700);

  /* --------------------------------------------------------------------------- */
  /* SPACING — 13-step scale, 4px base (design.md §1.3). */
  /* The 0-5 (2px) half-step was removed — too fine to be useful in practice. */
  /* --------------------------------------------------------------------------- */
  --space-1:   4px;
  --space-1-5: 6px;
  --space-2:   8px;
  --space-2-5: 10px;
  --space-3:   12px;
  --space-3-5: 14px; /* not yet bound — half-step kept for scale completeness */
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px; /* not yet bound — kept for scale completeness */
  --space-10:  40px; /* not yet bound — kept for scale completeness */

  /* --------------------------------------------------------------------------- */
  /* RADIUS — 7-step scale (design.md §1.4) */
  /* --------------------------------------------------------------------------- */
  --radius-none: 0; /* not yet bound — the explicit "sharp corner" step */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------- */
  /* ELEVATION — 6 single-layer shadows (design.md §1.5) */
  /* --------------------------------------------------------------------------- */
  --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-md:    0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-sticky: 0 0 8px 1px rgba(0, 0, 0, 0.12); /* neutral elevation on all sides of a pinned page surface */
  --shadow-lg:    0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-edge:  6px 0 8px -2px rgba(0, 0, 0, 0.14); /* the horizontal sibling of sm — a sticky column's right edge while its wrapper is scrolled (Table's pinned column only, 2026-09-09). Retuned 2026-09-09 Rev 2: the first cut (4px 0 8px -4px, 0.10) ended exactly at the cell edge and peaked near 5% black — invisible */
  --shadow-brand: 0 4px 8px rgba(6, 91, 85, 0.20); /* not yet bound — reserved for a singular hero CTA (design.md §1.5) */

  /* Scrim behind modal surfaces — submarine-950 at 45%, dims without going */
  /* black (2026-07-08, minted with Modal). */
  --overlay-scrim: color-mix(in srgb, var(--submarine-950) 45%, transparent);

  /* --------------------------------------------------------------------------- */
  /* TYPOGRAPHY families + line-heights (design.md §1.2) */
  /* --------------------------------------------------------------------------- */
  --font-display: 'Poppins', system-ui, sans-serif; /* UI chrome */
  --font-body:    'Inter', system-ui, sans-serif;   /* flowing content */
  --lh-tight:   100%;
  --lh-snug:    120%;
  --lh-relaxed: 150%;

  /* --------------------------------------------------------------------------- */
  /* MOTION — duration + easing (design.md §1.6). Phase 0, 2026-06-29. */
  /* Reduced-motion override lives in the @media block after :root (system level). */
  /* --------------------------------------------------------------------------- */
  --motion-fast:  0.15s; /* color/border/background micro-transitions (the kit default) */
  --motion-base:  0.2s;  /* larger movement: enter/exit slides, panel/accordion open */
  --motion-spin:  0.6s;  /* LOOPING indicators only (Spinner) — exempt from reduced-motion */
  --motion-pulse: 1.4s;  /* LOOPING placeholder breath (Skeleton) — exempt; see the @media note */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* most state transitions */
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);   /* elements entering */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);   /* elements leaving */
  --ease-linear:   linear;                        /* loops only */

  /* --------------------------------------------------------------------------- */
  /* FOCUS RING (design.md §5 — resolves the missing focus token). Phase 0. */
  /* Consumed via the `focus-ring` mixin in foundations/_focus.scss. */
  /* --------------------------------------------------------------------------- */
  --focus-ring-width:  2px;
  --focus-ring-color:  var(--border-focus); /* submarine-500 — passes 3:1 focus bar on light surfaces */
  --focus-ring-offset: 2px;                 /* panels pass -2px (inset) via the mixin */

  /* --------------------------------------------------------------------------- */
  /* LAYOUT + Z-INDEX (design.md §1.7–1.8) */
  /* --------------------------------------------------------------------------- */
  --sidebar-width: 48px;
  /* The TopBar strip's rendered height — a layout constant, like */
  /* --sidebar-width, bound by the app shell's sticky offsets (the rail's */
  /* `top`/`height` math). Minted 2026-08-28: both prototypes hardcoded this */
  /* as a page-local `:root { --topbar-height: 58px }`; AppShell needs it too. */
  /* 56px since 2026-09-23: a 40px row (the Input's and a medium Button's */
  /* height) + 8px inset each side — the old 42px row was the Figma mockup's */
  /* and left 1px of slack around every control. TopBar reads it for its own */
  /* height, so the strip and everything stacked under it share one number. */
  --topbar-height: 56px;
  --z-topbar:   100;
  --z-dropdown: 400; /* Menu panel (in-flow) — between topbar and modal */
  --z-modal:    500; /* Modal scrim+panel (bound 2026-07-08) */
  --z-overlay:  550; /* body-portaled panels (Popover, DatePicker portal, Select listbox) — above modal, below toast */
  --z-toast:    600; /* above modals so transient feedback shows over a dialog */
  --z-tooltip:  600; /* top band w/ toast — above modal so a tooltip in a dialog isn't clipped */
}

/* Reduced-motion handled at the SYSTEM level, not per component (motion-system skill). */
/* Zeroes movement durations; the two LOOP durations (--motion-spin, --motion-pulse) are */
/* deliberately NOT overridden — zeroing a loop spins it into a strobe, which is the */
/* opposite of the ask. Each looping component opts out in its own module instead, and */
/* they answer differently on purpose: Spinner SLOWS (a frozen ring conveys nothing), */
/* Skeleton FREEZES (its silhouette already says "loading" standing still). */
/* 0.01ms (not 0) so transitionend/animationend still fire (Toast unmounts on it). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
  }
}