/* ==========================================================================================
   Jelora design tokens · "Brass & Glass"

   The single source of truth for colour, material, type, shape, layout and motion values.
   index.html consumes these through var(); tokens.json mirrors this file for the Next.js app
   (regenerate it with `node scripts/build-tokens.mjs`). DESIGN.md explains how to use them.

   Light values live on :root. Dark mode only redefines what changes, under :root[data-theme="dark"].
   ========================================================================================== */

@font-face {
  font-family: "Glacial Indifference";
  src: url("assets/branding/glacial-indifference.regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------- Typography */
  --font-ui: Inter, Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-thai: "IBM Plex Sans Thai", Inter, Geist, ui-sans-serif, system-ui, sans-serif;
  --font-wordmark: "Glacial Indifference", sans-serif; /* logo text "jelora" / "jL" only */
  --font-monogram: Georgia, serif;                    /* workspace monogram initial */

  --text-caption: 11px;     /* the floor for any functional text */
  --text-body: 12px;
  --text-title-sm: 13px;
  --text-base: 14px;        /* document default; panel titles */
  --text-figure-sm: 16px;
  --text-headline: 18px;
  --text-wordmark-compact: 22px;
  --text-wordmark: 24px;
  --text-figure: 30px;
  --text-display: clamp(29px, 2.6vw, 36px);

  --weight-medium: 560;
  --weight-headline: 570;
  --weight-figure: 580;
  --weight-strong: 620;
  --weight-bold: 650;

  --tracking-display: -.035em;
  --tracking-headline: -.025em;
  --tracking-figure: -.04em;
  --tracking-label: .12em;     /* uppercase eyebrows */
  --tracking-nav-label: .1em;

  /* ---------------------------------------------------------------- Ink (text) */
  --color-ink: #201f1c;
  --color-ink-heading: #26241f;   /* panel titles */
  --color-ink-muted: #5f5d57;     /* descriptions, ledes, metadata */
  --color-ink-subtle: #5f5d57;    /* section subtitles (lighter than muted in dark) */
  --color-ink-quiet: #696762;     /* placeholders, axis-level text */
  --color-nav-ink: #5e5c57;       /* rail links at rest */
  --color-nav-label: #696762;     /* "WORKSPACE" rail label */
  --color-control-ink: #45423b;   /* glass controls */
  --color-link: #806943;          /* Brass Ink: row and readiness links */
  --color-link-head: #705a34;     /* panel-head links ("Open catalog ↗") */
  --color-brass-ink: #806943;     /* flat brass for icons and borders in both themes */
  --color-wordmark: #b69a6a;

  /* ---------------------------------------------------------------- Neutrals and surfaces */
  --color-floor: #efeee9;
  --color-hairline: rgba(171,164,150,.34);
  --color-hairline-strong: rgba(151,142,124,.48);
  --color-surface: rgba(255,255,255,.74);         /* mobile workspace popover */
  --color-surface-sunken: rgba(244,243,238,.78);  /* menu item hover, mobile sign-out */
  --color-porcelain: #fbfaf7;                     /* opaque menus, popovers, skip link */
  --color-focus: #70572d;
  --color-selection: #d5c39d;
  --color-selection-ink: #201f1c;
  --color-toast: #26251f;
  --color-on-toast: #ffffff;
  --color-backdrop: rgba(23,23,22,.28);           /* behind the open drawer */
  --color-scrollbar-thumb: #c9c4b9;
  --color-scrollbar-track: #f7f6f2;
  --color-scrollbar-thumb-fill: linear-gradient(145deg,#d5d1c6,#a9a392);

  /* ---------------------------------------------------------------- Status (hue on its own wash) */
  --color-success: #3f795c;  --color-success-wash: #edf4ee;   /* Verdigris */
  --color-warning: #94601f;  --color-warning-wash: #f7f0e4;   /* Amber */
  --color-info: #42658a;     --color-info-wash: #edf2f7;      /* Slate */
  --color-error: #a14e4a;    --color-error-wash: #f8eceb;     /* Clay */
  --color-on-status: #ffffff;                                 /* glyph on a solid status badge */
  --color-skeleton: rgba(171,164,150,.2);
  --color-skeleton-sheen: rgba(255,255,255,.62);

  /* ---------------------------------------------------------------- Stone floor */
  --floor-fill:
    radial-gradient(ellipse at 79% 12%,rgba(213,226,232,.68),transparent 31%),
    radial-gradient(ellipse at 22% 42%,rgba(224,215,198,.56),transparent 37%),
    linear-gradient(135deg,#f3f2ed,#eae9e4 55%,#eeece6);
  --floor-haze: radial-gradient(ellipse at 83% 73%,rgba(194,207,215,.24),transparent 29%);

  /* ---------------------------------------------------------------- Frost glass */
  --glass-fill: linear-gradient(145deg,rgba(255,255,255,.48),rgba(255,255,255,.28));
  --glass-edge: rgba(255,255,255,.7);
  --glass-shadow: inset 0 1px rgba(255,255,255,.76),0 12px 30px rgba(52,48,39,.08);
  --glass-blur: blur(20px) saturate(155%);
  --glass-panel-blur: blur(20px) saturate(155%);   /* context panels (no blur in dark) */

  --glass-header-fill: linear-gradient(130deg,rgba(255,255,255,.81),rgba(248,246,239,.57) 56%,rgba(228,231,227,.48));
  --glass-header-edge: rgba(255,255,255,.92);
  --glass-header-shadow: inset 0 1px rgba(255,255,255,.98),0 14px 32px rgba(52,48,39,.07);
  --glass-header-blur: blur(16px) saturate(125%);

  --rail-fill: rgba(249,248,244,.69);
  --rail-edge: rgba(255,255,255,.8);
  --rail-shadow: inset -1px 0 rgba(150,141,125,.16),8px 0 30px rgba(57,51,41,.055);
  --rail-blur: blur(28px) saturate(155%);

  --card-fill: linear-gradient(145deg,rgba(255,255,255,.78),rgba(239,237,230,.62));   /* workspace card */
  --card-fill-hover: linear-gradient(145deg,rgba(255,255,255,.78),rgba(239,237,230,.62));
  --card-edge: rgba(255,255,255,.9);
  --card-shadow: inset 0 1px rgba(255,255,255,.95),0 4px 12px rgba(57,51,41,.06);
  --card-ink: currentcolor;

  --monogram-fill: linear-gradient(145deg,#f4eee1,#d8c9a9);
  --monogram-ink: #665437;
  --monogram-shadow: inset 1px 1px rgba(255,255,255,.9),inset -1px -1px rgba(91,72,39,.14);

  --avatar-fill: linear-gradient(145deg,#f8f7f2,#d7d2c6);
  --avatar-edge: rgba(255,255,255,.9);
  --avatar-ink: #4c4942;
  --avatar-shadow: inset 0 1px white,0 2px 5px rgba(52,48,39,.12);

  --badge-fill: rgba(255,255,255,.55);   /* channel initial */
  --badge-edge: var(--color-hairline);

  --note-fill: rgba(241,240,236,.72);    /* sample-data strip */
  --note-edge: #e8e2d5;
  --note-ink: #514c42;

  --menu-shadow: 0 8px 24px rgba(36,31,21,.08);
  --popup-fill: rgba(255,254,250,.98);
  --popup-edge: rgba(255,255,255,.88);
  --popup-shadow: 0 12px 30px rgba(32,29,22,.2),inset 0 1px rgba(255,255,255,.95);
  --popup-option-ink: #292720;
  --popup-option-hover-fill: rgba(214,197,164,.24);
  --popup-option-hover-edge: rgba(180,154,106,.3);
  --popup-option-selected-fill: linear-gradient(145deg,#eee5d2,#e1d3b5);
  --popup-option-selected-ink: #302416;
  --skip-shadow: 0 8px 24px rgba(36,31,21,.14);

  /* ---------------------------------------------------------------- Glass controls */
  --control-fill: linear-gradient(145deg,rgba(255,255,255,.94),rgba(231,229,222,.78));
  --control-fill-hover: linear-gradient(145deg,#fff,rgba(231,229,222,.88));
  --control-edge: rgba(255,255,255,.95);
  --control-edge-hover: rgba(255,255,255,.98);
  --control-shadow: inset 0 1px rgba(255,255,255,.98),0 3px 8px rgba(52,48,39,.08);
  --control-shadow-hover: inset 0 1px white,0 6px 13px rgba(52,48,39,.12);
  --control-solid-fill: #f1f0ec;   /* phone toolbar controls */
  --control-solid-edge: #d5d2ca;
  --control-solid-shadow: inset 0 1px rgba(255,255,255,.9),0 2px 5px rgba(52,48,39,.1);
  --rail-handle-fill: #fbfaf7;
  --rail-handle-edge: #d5d2ca;
  --rail-handle-edge-hover: #b8b3a7;
  --rail-handle-ink: #696762;
  --rail-handle-ink-hover: #171716;
  --rail-handle-shadow: 0 2px 6px rgba(52,48,39,.12);
  --rail-handle-shadow-hover: 0 3px 9px rgba(52,48,39,.18);

  /* ---------------------------------------------------------------- Liquid Brass */
  --brass-base: #a98d5e;
  --brass-hi: #d7c39a;
  --brass-mid: #a98d5e;
  --brass-low: #79613b;
  --brass-edge: #806943;
  --brass-fill:
    linear-gradient(132deg,rgba(255,255,255,.32),rgba(255,255,255,.06) 24%,transparent 42%),
    linear-gradient(155deg,var(--brass-hi),var(--brass-mid) 48%,var(--brass-low));
  --brass-fill-hover:
    linear-gradient(132deg,rgba(255,255,255,.38),rgba(255,255,255,.08) 25%,transparent 44%),
    linear-gradient(155deg,#e1cca2,#b99a65 49%,#826843);
  --brass-gloss: linear-gradient(180deg,rgba(255,255,255,.28),transparent);
  --brass-shadow: inset 0 1px rgba(255,255,255,.55),inset 0 -1px rgba(61,47,26,.22),0 3px 8px rgba(74,58,31,.18);
  --brass-shadow-hover: inset 0 1px rgba(255,255,255,.64),0 5px 11px rgba(74,58,31,.23);
  --color-on-brass: #fffdf8;         /* deliberate brand choice: about 3.1:1 */
  --color-on-brass-icon: #fff8e9;
  --brass-text-shadow: 0 1px 1px rgba(40,31,18,.3);
  --brass-nav-text-shadow: 0 1px 1px rgba(40,31,18,.3);

  /* ---------------------------------------------------------------- Shape */
  --radius-xs: 5px;     /* monogram, listbox options */
  --radius-sm: 7px;     /* sample note, channel badge, small menu items */
  --radius-tile: 8px;   /* status tiles, listbox */
  --radius-nav: 9px;    /* rail items */
  --radius-md: 10px;    /* buttons, selects, menus */
  --radius-lg: 15px;    /* panels, attention queue */
  --radius-xl: 17px;    /* page header */
  --radius-xl-compact: 14px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---------------------------------------------------------------- Layout */
  --rail-width: 220px;
  --rail-width-narrow: 194px;     /* ≤1080px, and the open drawer */
  --rail-width-icons: 62px;       /* ≤800px collapsed rail */
  --content-max: 1480px;
  --gutter: 15px;
  --touch-target: 44px;
  --control-height: 34px;

  /* ---------------------------------------------------------------- Motion */
  --duration-fast: .15s;
  --duration-base: .18s;
  --duration-slide: .2s;
  --duration-turn: .24s;
  --duration-sheen: 1.6s;
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --lift: translateY(-1px);              /* hover response for controls and brass */
  --nav-hover-shift: translateX(2px);    /* rail items slide; none in dark */
  --nav-current-lift: translateY(-1px);  /* current rail item lifts; none in dark */
  --nav-text-shadow: 0 1px rgba(255,255,255,.65);   /* embossed rail text; none in dark */
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-ink: #f2f0e9;
  --color-ink-heading: #f2f0e9;
  --color-ink-muted: #aaa69d;
  --color-ink-subtle: #c3beb3;
  --color-ink-quiet: #89867e;
  --color-nav-ink: #b4b0a8;
  --color-nav-label: #c3beb3;
  --color-control-ink: #eeeae1;
  --color-link: #d0b983;
  --color-link-head: #d2b77d;

  --color-floor: #10100f;
  --color-hairline: #2c2c29;
  --color-hairline-strong: #3a3935;
  --color-surface: rgba(27,27,25,.78);
  --color-surface-sunken: #1d1d1b;
  --color-porcelain: #242421;
  --color-focus: #d4bd89;
  --color-selection: #c4a875;
  --color-selection-ink: #10100f;
  --color-scrollbar-thumb: #3a3935;
  --color-scrollbar-track: #10100f;
  --color-scrollbar-thumb-fill: linear-gradient(145deg,#514f48,#32312d);

  --color-success: #83bd98;  --color-success-wash: rgba(63,138,104,.2);
  --color-warning: #dfb36f;  --color-warning-wash: rgba(178,123,50,.2);
  --color-info: #a7c7e5;     --color-info-wash: rgba(82,118,154,.22);
  --color-error: #e8a39b;    --color-error-wash: rgba(161,78,74,.24);
  --color-skeleton: rgba(255,255,255,.06);
  --color-skeleton-sheen: rgba(255,255,255,.13);

  --floor-fill:
    radial-gradient(ellipse at 79% 12%,rgba(66,73,73,.38),transparent 34%),
    radial-gradient(ellipse at 22% 42%,rgba(78,66,48,.34),transparent 38%),
    linear-gradient(135deg,#10100f,#171715 56%,#111210);
  --floor-haze: radial-gradient(ellipse at 83% 73%,rgba(90,107,114,.16),transparent 31%);

  --glass-fill: linear-gradient(145deg,rgba(47,47,43,.48),rgba(29,29,27,.38));
  --glass-edge: rgba(255,255,255,.15);
  --glass-shadow: inset 0 1px rgba(255,255,255,.12),0 12px 30px rgba(0,0,0,.2);
  --glass-panel-blur: none;

  --glass-header-fill: linear-gradient(130deg,rgba(42,42,39,.9),rgba(31,31,29,.76) 56%,rgba(38,40,38,.68));
  --glass-header-edge: rgba(255,255,255,.12);
  --glass-header-shadow: inset 0 1px rgba(255,255,255,.12),0 14px 32px rgba(0,0,0,.2);

  --rail-fill: rgba(21,21,20,.78);
  --rail-edge: rgba(255,255,255,.09);
  --rail-shadow: inset -1px 0 rgba(255,255,255,.04),8px 0 30px rgba(0,0,0,.18);

  --card-fill: linear-gradient(145deg,rgba(48,48,44,.9),rgba(31,31,29,.82));
  --card-fill-hover: linear-gradient(145deg,rgba(57,57,52,.94),rgba(37,37,34,.88));
  --card-edge: rgba(255,255,255,.12);
  --card-shadow: inset 0 1px rgba(255,255,255,.11),0 4px 12px rgba(0,0,0,.18);
  --card-ink: #f2f0e9;

  --monogram-fill: linear-gradient(145deg,#544b3a,#373025);
  --monogram-ink: #e6d8bc;
  --monogram-shadow: inset 1px 1px rgba(255,255,255,.16),inset -1px -1px rgba(0,0,0,.18);

  --avatar-fill: linear-gradient(145deg,#393833,#24231f);
  --avatar-edge: rgba(255,255,255,.14);
  --avatar-ink: #f2f0e9;
  --avatar-shadow: inset 0 1px rgba(255,255,255,.13),0 2px 5px rgba(0,0,0,.2);

  --badge-fill: rgba(255,255,255,.06);
  --badge-edge: rgba(255,255,255,.13);

  --note-fill: #24231f;
  --note-edge: #49453b;
  --note-ink: #d0cabe;

  --popup-fill: rgba(31,31,29,.98);
  --popup-edge: rgba(255,255,255,.14);
  --popup-shadow: 0 12px 30px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08);
  --popup-option-ink: #f2f0e9;
  --popup-option-hover-fill: rgba(212,189,137,.12);
  --popup-option-hover-edge: rgba(212,189,137,.25);
  --popup-option-selected-fill: linear-gradient(145deg,#66583d,#4d412d);
  --popup-option-selected-ink: #fff8e9;

  --control-fill: linear-gradient(145deg,rgba(55,55,51,.94),rgba(35,35,32,.84));
  --control-fill-hover: linear-gradient(145deg,rgba(65,65,60,.98),rgba(42,42,38,.9));
  --control-edge: rgba(255,255,255,.14);
  --control-edge-hover: rgba(255,255,255,.2);
  --control-shadow: inset 0 1px rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.18);
  --control-shadow-hover: inset 0 1px rgba(255,255,255,.16),0 6px 13px rgba(0,0,0,.26);
  --control-solid-fill: #30302c;
  --control-solid-edge: rgba(255,255,255,.18);
  --control-solid-shadow: inset 0 1px rgba(255,255,255,.1),0 2px 5px rgba(0,0,0,.22);
  --rail-handle-fill: #232320;
  --rail-handle-edge: #3a3935;
  --rail-handle-edge-hover: #55534d;
  --rail-handle-ink: #aaa69d;
  --rail-handle-ink-hover: #f2f0e9;
  --rail-handle-shadow: 0 2px 8px rgba(0,0,0,.4);
  --rail-handle-shadow-hover: 0 2px 8px rgba(0,0,0,.4);

  --brass-base: #b99a63;
  --brass-hi: #e0c894;
  --brass-mid: #c0a675;
  --brass-low: #92764a;
  --brass-edge: #e0c894;
  --brass-fill:
    linear-gradient(132deg,rgba(255,255,255,.38),rgba(255,255,255,.08) 24%,transparent 43%),
    linear-gradient(155deg,var(--brass-hi) 0%,var(--brass-mid) 48%,var(--brass-low) 100%);
  --brass-fill-hover:
    linear-gradient(132deg,rgba(255,255,255,.44),rgba(255,255,255,.1) 24%,transparent 43%),
    linear-gradient(155deg,#ecd7a5 0%,#d0b987 48%,#a48655 100%);
  --brass-gloss: linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));
  --brass-shadow: inset 0 1px rgba(255,255,255,.64),inset 0 -1px rgba(39,31,19,.2),0 3px 9px rgba(0,0,0,.32);
  --brass-shadow-hover: inset 0 1px rgba(255,255,255,.72),0 5px 12px rgba(0,0,0,.38);
  --color-on-brass: #191710;
  --color-on-brass-icon: #45351b;
  --brass-text-shadow: none;
  --brass-nav-text-shadow: 0 1px rgba(255,255,255,.42);

  --nav-hover-shift: none;
  --nav-current-lift: none;
  --nav-text-shadow: none;
}