/* ============================================================================
   Hookline / tokens
   The entire design system's vocabulary. Nothing below this file invents a
   colour, a size, a radius or a shadow; everything references a token here.
   ========================================================================= */

/* --- Typefaces: self-hosted, no network dependency ----------------------- */

@font-face {
  font-family: "Geist";
  src: url("../vendor/fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../vendor/fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Neutral ramp: pure, zero chroma ---------------------------------- */
  --n-0:   #ffffff;
  --n-25:  #fcfcfc;
  --n-50:  #f7f7f7;
  --n-100: #f1f1f1;
  --n-150: #e9e9e9;
  --n-200: #e0e0e0;
  --n-300: #cacaca;
  --n-400: #a8a8a8;
  --n-500: #878787;
  --n-600: #6b6b6b;
  --n-700: #515151;
  --n-800: #3a3a3a;
  --n-900: #242424;
  --n-950: #161616;
  --n-999: #0e0e0e;

  /* --- The one accent --------------------------------------------------- */
  --accent-fg:      #0e56ce;
  --accent-hover:   #0a44a6;
  --accent-active:  #083887;
  --accent-on:      #ffffff;
  --accent-bg:      #eef3ff;
  --accent-bg-hover:#e2ebff;
  --accent-border:  #c2d7ff;
  --accent-meter:   #0e56ce;

  /* --- Status: fixed meanings, never decorative ------------------------- */
  --st-neutral-fg: #5f5f5f;
  --st-neutral-bg: #f1f1f1;
  --st-neutral-bd: #dcdcdc;

  --st-info-fg: #0e56ce;
  --st-info-bg: #eef3ff;
  --st-info-bd: #c2d7ff;

  --st-warn-fg: #8a5a00;
  --st-warn-bg: #fdf3e0;
  --st-warn-bd: #ecd6a4;

  --st-success-fg: #0f7b4f;
  --st-success-bg: #e8f5ee;
  --st-success-bd: #b7e0c9;

  --st-danger-fg: #b42318;
  --st-danger-bg: #fdeeec;
  --st-danger-bd: #f4c7c1;

  /* --- Semantic surfaces ------------------------------------------------ */
  --bg-canvas:  var(--n-50);
  --bg-panel:   var(--n-0);
  --bg-subtle:  var(--n-50);
  --bg-inset:   var(--n-100);
  --bg-hover:   rgb(0 0 0 / 0.035);
  --bg-active:  rgb(0 0 0 / 0.06);
  --bg-selected: var(--accent-bg);
  --bg-scrim:   rgb(20 20 20 / 0.42);
  --bg-rail:    var(--n-0);

  --fg-primary:   var(--n-950);
  --fg-secondary: #5e5e5e;   /* 6.6:1 on panel */
  --fg-tertiary:  #6e6e6e;   /* 5.1:1 on panel, 4.6:1 on the sticky table head */
  --fg-disabled:  var(--n-400);
  --fg-on-ink:    var(--n-0);

  --bd-subtle:  #ededed;
  --bd-default: #e2e2e2;
  --bd-strong:  #cfcfcf;
  /* Separators are decorative and deliberately quiet. --bd-control is the
     boundary of an interactive control and holds 3:1 (WCAG 1.4.11). */
  --bd-control: #949494;
  --bd-ink:     var(--n-900);

  --ink-bg:        #1a1a1a;
  --ink-bg-hover:  #2e2e2e;
  --ink-bg-active: #000000;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-display: 600 1.5rem/1.15 var(--font-sans);
  --t-title:   600 1.125rem/1.3 var(--font-sans);
  --t-heading: 600 0.9375rem/1.35 var(--font-sans);
  --t-body:    400 0.875rem/1.5 var(--font-sans);
  --t-sm:      400 0.8125rem/1.45 var(--font-sans);
  --t-xs:      400 0.75rem/1.4 var(--font-sans);
  --t-micro:   550 0.6875rem/1.35 var(--font-sans);

  --tr-display: -0.022em;
  --tr-title:   -0.016em;
  --tr-heading: -0.011em;
  --tr-body:    -0.005em;
  --tr-micro:   0.06em;

  /* --- Space: 4px base -------------------------------------------------- */
  --s-1: 4px;   --s-2: 6px;   --s-3: 8px;   --s-4: 12px;
  --s-5: 16px;  --s-6: 20px;  --s-7: 24px;  --s-8: 32px;
  --s-9: 40px;  --s-10: 56px; --s-11: 72px;

  /* --- Shape: locked scale ---------------------------------------------- */
  --r-control: 4px;
  --r-panel:   6px;
  --r-large:   8px;
  --r-pill:    999px;

  /* --- Elevation: exactly three, floating layers only ------------------- */
  --sh-menu:  0 1px 2px rgb(20 20 20 / 0.06), 0 8px 20px -6px rgb(20 20 20 / 0.14);
  --sh-modal: 0 2px 4px rgb(20 20 20 / 0.06), 0 24px 56px -12px rgb(20 20 20 / 0.24);
  --sh-toast: 0 1px 2px rgb(20 20 20 / 0.08), 0 12px 28px -8px rgb(20 20 20 / 0.2);

  /* --- Fixed measurements ----------------------------------------------- */
  --h-topbar:  52px;
  --h-row:     36px;
  --h-control: 32px;
  --h-control-sm: 26px;
  --h-control-lg: 40px;
  --w-sidebar: 232px;
  --w-rail:    60px;
  --w-drawer:  480px;
  --w-content: 1520px;

  /* --- Motion: low by design -------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.13, 1);
  --dur-fast: 90ms;
  --dur-base: 140ms;
  --dur-slow: 220ms;

  /* --- Layer scale: documented, never ad hoc ---------------------------- */
  --z-sticky: 10;
  --z-rail:   20;
  --z-topbar: 30;
  --z-menu:   40;
  --z-scrim:  50;
  --z-drawer: 60;
  --z-modal:  70;
  --z-toast:  80;

  color-scheme: light;
}

/* ============================================================================
   Dark theme. A second palette, not an inversion.
   Every token above is redefined here so nothing falls back to a light value.
   ========================================================================= */

:root[data-theme="dark"] {
  --n-0:   #1b1b1b;
  --n-25:  #191919;
  --n-50:  #141414;
  --n-100: #212121;
  --n-150: #272727;
  --n-200: #2e2e2e;
  --n-300: #3d3d3d;
  --n-400: #5c5c5c;
  --n-500: #808080;
  --n-600: #a0a0a0;
  --n-700: #bdbdbd;
  --n-800: #d6d6d6;
  --n-900: #ebebeb;
  --n-950: #f4f4f4;
  --n-999: #fbfbfb;

  --accent-fg:      #7fa8ff;
  --accent-hover:   #9dbcff;
  --accent-active:  #b6ceff;
  --accent-on:      #06214f;
  --accent-bg:      #16233d;
  --accent-bg-hover:#1c2c4a;
  --accent-border:  #2c4372;
  --accent-meter:   #6f9dff;

  --st-neutral-fg: #a8a8a8;
  --st-neutral-bg: #242424;
  --st-neutral-bd: #363636;

  --st-info-fg: #7fa8ff;
  --st-info-bg: #16233d;
  --st-info-bd: #2c4372;

  --st-warn-fg: #e0ac52;
  --st-warn-bg: #2c2313;
  --st-warn-bd: #4d3d1c;

  --st-success-fg: #4cbd8b;
  --st-success-bg: #13271e;
  --st-success-bd: #21472f;

  --st-danger-fg: #f38078;
  --st-danger-bg: #2e1917;
  --st-danger-bd: #532a26;

  --bg-canvas:  #141414;
  --bg-panel:   #1b1b1b;
  --bg-subtle:  #191919;
  --bg-inset:   #212121;
  --bg-hover:   rgb(255 255 255 / 0.045);
  --bg-active:  rgb(255 255 255 / 0.08);
  --bg-selected: var(--accent-bg);
  --bg-scrim:   rgb(0 0 0 / 0.62);
  --bg-rail:    #171717;

  --fg-primary:   #f4f4f4;
  --fg-secondary: #a0a0a0;
  --fg-tertiary:  #888888;   /* 4.8:1 on panel */
  --fg-disabled:  #5c5c5c;
  --fg-on-ink:    #141414;

  --bd-subtle:  #262626;
  --bd-default: #313131;
  --bd-strong:  #434343;
  --bd-control: #6a6a6a;
  --bd-ink:     #e8e8e8;

  --ink-bg:        #ededed;
  --ink-bg-hover:  #ffffff;
  --ink-bg-active: #cfcfcf;

  --sh-menu:  0 1px 2px rgb(0 0 0 / 0.4), 0 8px 20px -6px rgb(0 0 0 / 0.6);
  --sh-modal: 0 2px 4px rgb(0 0 0 / 0.4), 0 24px 56px -12px rgb(0 0 0 / 0.7);
  --sh-toast: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 28px -8px rgb(0 0 0 / 0.6);

  color-scheme: dark;
}

/* System preference, only when the user has not chosen explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --n-0:   #1b1b1b;
    --n-25:  #191919;
    --n-50:  #141414;
    --n-100: #212121;
    --n-150: #272727;
    --n-200: #2e2e2e;
    --n-300: #3d3d3d;
    --n-400: #5c5c5c;
    --n-500: #808080;
    --n-600: #a0a0a0;
    --n-700: #bdbdbd;
    --n-800: #d6d6d6;
    --n-900: #ebebeb;
    --n-950: #f4f4f4;
    --n-999: #fbfbfb;

    --accent-fg:      #7fa8ff;
    --accent-hover:   #9dbcff;
    --accent-active:  #b6ceff;
    --accent-on:      #06214f;
    --accent-bg:      #16233d;
    --accent-bg-hover:#1c2c4a;
    --accent-border:  #2c4372;
    --accent-meter:   #6f9dff;

    --st-neutral-fg: #a8a8a8;
    --st-neutral-bg: #242424;
    --st-neutral-bd: #363636;

    --st-info-fg: #7fa8ff;
    --st-info-bg: #16233d;
    --st-info-bd: #2c4372;

    --st-warn-fg: #e0ac52;
    --st-warn-bg: #2c2313;
    --st-warn-bd: #4d3d1c;

    --st-success-fg: #4cbd8b;
    --st-success-bg: #13271e;
    --st-success-bd: #21472f;

    --st-danger-fg: #f38078;
    --st-danger-bg: #2e1917;
    --st-danger-bd: #532a26;

    --bg-canvas:  #141414;
    --bg-panel:   #1b1b1b;
    --bg-subtle:  #191919;
    --bg-inset:   #212121;
    --bg-hover:   rgb(255 255 255 / 0.045);
    --bg-active:  rgb(255 255 255 / 0.08);
    --bg-selected: var(--accent-bg);
    --bg-scrim:   rgb(0 0 0 / 0.62);
    --bg-rail:    #171717;

    --fg-primary:   #f4f4f4;
    --fg-secondary: #a0a0a0;
    --fg-tertiary:  #888888;   /* 4.8:1 on panel */
    --fg-disabled:  #5c5c5c;
    --fg-on-ink:    #141414;

    --bd-subtle:  #262626;
    --bd-default: #313131;
    --bd-strong:  #434343;
    --bd-control: #6a6a6a;
    --bd-ink:     #e8e8e8;

    --ink-bg:        #ededed;
    --ink-bg-hover:  #ffffff;
    --ink-bg-active: #cfcfcf;

    --sh-menu:  0 1px 2px rgb(0 0 0 / 0.4), 0 8px 20px -6px rgb(0 0 0 / 0.6);
    --sh-modal: 0 2px 4px rgb(0 0 0 / 0.4), 0 24px 56px -12px rgb(0 0 0 / 0.7);
    --sh-toast: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 28px -8px rgb(0 0 0 / 0.6);

    color-scheme: dark;
  }
}