/* ==========================================================================
   SCRIPTATRON — DESIGN TOKENS  (1.61.0 — HORIZON DESK)

   One horizon, no sidebars: Skyline (top) · Stage (full width) ·
   Instrument Strip (bottom edge) · Waypoint Dock (floating, bottom-centre).
   Dark only. Depth = canvas → stage → raised + hairlines, never glow.
   Every token name the older sheets consume is kept and remapped here.
   ========================================================================== */

:root {

  /* ---- 1.61 core palette (spec §3a) ----------------------------------- */
  --canvas:          #070B09;
  --stage:           #0B100E;
  --raised:          #111815;
  --raised-2:        #182119;
  --hairline:        #1F2B24;
  --hairline-strong: #2C3D34;
  --accent:          #00E68C;
  --accent-ink:      #04150C;
  --accent-dim:      #00B36E;
  --teal:            #2DD4BF;
  --text:            #E8F3ED;
  --text-2:          #9DB8AB;
  --text-3:          #62766B;
  --danger:          #FF6B6B;
  --warn:            #FFC24B;
  --info:            #7DD3FC;
  --scrim:           rgba(3, 6, 5, 0.72);

  /* ---- green-cast grey ramp (replaces 1.60 blue graphite) -------------- */
  --grey-1000: #040705;
  --grey-950:  #070B09;
  --grey-900:  #0B100E;
  --grey-850:  #0E1411;
  --grey-800:  #111815;
  --grey-750:  #182119;
  --grey-700:  #1F2B24;
  --grey-650:  #2C3D34;
  --grey-600:  #3A5044;
  --grey-500:  #62766B;
  --grey-400:  #7E958A;
  --grey-300:  #9DB8AB;
  --grey-200:  #C3D6CC;
  --grey-100:  #E8F3ED;
  --grey-50:   #F4FAF6;

  --emerald-700: #00B36E;
  --emerald-600: #00E68C;
  --emerald-500: #33EBA3;
  --emerald-400: #66F0BA;
  --teal-600:    #22B8A5;
  --teal-500:    #2DD4BF;
  --emerald-ink: #04150C;

  --green-500: #00B36E;
  --green-400: #00E68C;
  --amber-500: #FFC24B;
  --amber-400: #FFD27A;
  --red-500:   #FF6B6B;
  --red-400:   #FF9494;
  --blue-500:  #7DD3FC;
  --blue-400:  #A5E2FD;
  --cyan-600:  #22B8A5;
  --cyan-500:  #2DD4BF;

  /* ---- surfaces: three steps + hover ---------------------------------- */
  --l0: var(--canvas);
  --l1: var(--stage);
  --l2: var(--raised);
  --l3: var(--raised-2);
  --l4: #22302A;
  --sunken: var(--grey-1000);

  --surface-0:    var(--canvas);
  --surface-1:    var(--stage);
  --surface-2:    var(--raised);
  --surface-3:    var(--raised-2);
  --surface-4:    #1D2822;
  --surface-5:    var(--raised);
  --surface-well: var(--canvas);
  --surface-scrim: var(--scrim);

  /* ---- ink ------------------------------------------------------------ */
  --muted: var(--text-2);
  --faint: var(--text-3);
  --fg:    var(--text);
  --ink-1: var(--text);
  --ink-2: var(--text-2);
  --ink-3: var(--text-3);
  --ink-4: #4A5A52;

  /* ---- accent --------------------------------------------------------- */
  --accent-500: var(--accent);
  --accent-400: var(--emerald-500);
  --accent-600: var(--accent-dim);
  --accent-wash:   color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-wash-2: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-line:   color-mix(in srgb, var(--accent) 40%, transparent);
  --ink-on-accent: var(--accent-ink);

  /* ---- status --------------------------------------------------------- */
  --ok:    var(--accent-dim);
  --err:   var(--danger);
  --bad:   var(--danger);
  --cyber: var(--teal);

  --ok-ink:   var(--accent-dim);
  --ok-wash:  color-mix(in srgb, var(--accent-dim) 12%, transparent);
  --ok-line:  color-mix(in srgb, var(--accent-dim) 34%, transparent);
  --warn-ink:  var(--warn);
  --warn-wash: color-mix(in srgb, var(--warn) 12%, transparent);
  --warn-line: color-mix(in srgb, var(--warn) 34%, transparent);
  --danger-ink:  var(--danger);
  --danger-wash: color-mix(in srgb, var(--danger) 12%, transparent);
  --danger-line: color-mix(in srgb, var(--danger) 34%, transparent);
  --info-ink:  var(--info);
  --info-wash: color-mix(in srgb, var(--info) 12%, transparent);
  --info-line: color-mix(in srgb, var(--info) 34%, transparent);
  --live:      var(--accent);
  --live-wash: color-mix(in srgb, var(--accent) 10%, transparent);
  --live-line: color-mix(in srgb, var(--accent) 34%, transparent);

  /* ---- borders: hairlines are the only layout border ----------------- */
  --highlight:      transparent;
  --border-subtle:  var(--hairline);
  --border:         var(--hairline-strong);
  --border-strong:  var(--grey-600);
  --border-accent:  var(--accent-line);
  --border-focus:   var(--accent);
  --highlight-top:  transparent;

  /* ---- elevation: neutral black only, never accent-coloured ---------- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 6px 16px -8px rgb(0 0 0 / .7);
  --shadow-3: 0 12px 32px -12px rgb(0 0 0 / .8);
  --shadow-4: 0 18px 48px -16px rgb(0 0 0 / .85);
  --shadow-inset: inset 0 1px 2px rgb(0 0 0 / .5);
  --e1: var(--shadow-1);
  --e2: var(--shadow-2);
  --e3: var(--shadow-3);
  --e4: var(--shadow-4);
  --key-shadow: none;
  --lift: var(--shadow-3);
  --sunk: none;
  --glow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);

  /* ---- radii (spec §3c) ------------------------------------------------ */
  --r-sm:   6px;
  --r-md:   10px;
  --r-dock: 999px;
  --radius:      6px;
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   10px;
  --radius-full: 999px;
  --radius-small: var(--radius-sm);
  --radius-pill:  var(--radius-full);

  /* ---- space: 4px base -------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --s1: var(--space-1);
  --s2: var(--space-2);
  --s3: var(--space-3);
  --s4: var(--space-4);
  --s5: var(--space-5);
  --s6: var(--space-6);
  --s7: var(--space-7);
  --s8: var(--space-8);

  --gutter:         32px;
  --gutter-tight:   16px;
  --gap:            var(--gutter);
  --zone-air:       28px;
  --card-gap:       var(--zone-air);
  --content-max:    100%;
  --content-narrow: 760px;
  --row-h:          46px;
  --row-h-dense:    34px;
  --hz-row-h:       56px;
  --om-si-row-h:    56px;
  --om-acct-row-h:  56px;

  /* ---- type: Sora / Archivo / IBM Plex Mono ----------------------------- */
  --font-display: "Sora", "Archivo", system-ui, sans-serif;
  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font: var(--font-sans);
  --font-size: 14px;

  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13px;
  --text-md:   14px;
  --text-lg:   15px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  28px;
  --t-micro:   var(--text-xs);
  --t-small:   var(--text-sm);
  --t-body:    var(--text-md);
  --t-title:   var(--text-lg);
  --t-display: var(--text-2xl);

  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-body:   1.5;
  --leading-loose:  1.6;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --tracking-tight: -.02em;
  --tracking-snug:  -.01em;
  --tracking-caps:   .06em;
  --console-size: 12.5px;

  /* ---- motion (spec §7) ------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(.4, .1, .3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 240ms;
  --dur-3: 320ms;
  --speed: var(--dur-1);
  --ease:  var(--ease-out);

  /* ---- layout: no rails ---------------------------------------------- */
  --skyline-h:  48px;
  --strip-h:    44px;
  --dock-h:     60px;
  --dock-float: 16px;
  --tray-h:     240px;
  --sheet-w:    480px;
  --topbar-h:   var(--skyline-h);
  --rail:       0px;
  --rail-w:     0px;
  --rail-w-min: 0px;
  --rail-w-max: 0px;
  --tabbar-h:   56px;
  --signal-ribbon-h: 0px;

  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --control-h:    36px;
  --control-h-sm: 30px;
  --control-h-lg: 42px;

  /* Desk layers sit under app modals (200) so a confirm never hides. */
  --z-sticky: 10;
  --z-rail:   50;
  --z-scrim:  60;
  --z-topbar: 150;
  --z-peek:   140;
  --z-tray:   148;
  --z-strip:  150;
  --z-dock:   152;
  --z-menu:   160;
  --z-sheet-scrim: 165;
  --z-sheet:  170;
  --z-modal:  200;
  --z-toast:  400;
  --z-grain:  500;

  --scroll-gutter: 8px;

  --grain:  0;
  --hatch:  0;
  --scan:   0;
  --motion: 1;
}

@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --gap: var(--gutter);
    --zone-air: 24px;
    --skyline-h: 44px;
    --strip-h: 40px;
    --dock-h: 56px;
    --om-si-row-h: 60px;
    --text-2xl: 19px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 120ms;
    --dur-3: 1ms;
    --motion: 0;
  }
}