/* ===========================================================================
   NLBF X - design tokens. The ONLY file in which a colour literal may appear.
   Every other stylesheet reads these variables, so a palette change is a
   one-file change and a light theme is an override, not a rewrite.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* --- raw palette: gold ramp ------------------------------------------- */
  --gold-700: #9C6E00;
  --gold-600: #C98D00;
  --gold-500: #F0A800;   /* brand gold, lower bound of the ramp */
  --gold-400: #FFB61F;
  --gold-300: #FFC83C;   /* brand gold, upper bound of the ramp */
  --gold-200: #FFDA7E;
  --gold-100: #FFEFC7;

  /* --- raw palette: surfaces, near-black upward ------------------------- */
  --black:      #09090B;
  --surface-0:  #0D0D10;
  --surface-1:  #141418;
  --surface-2:  #1C1C22;
  --surface-3:  #26262E;
  --surface-4:  #32323C;

  /* --- raw palette: ink ------------------------------------------------- */
  --ink-0: #F5F5F7;
  --ink-1: #A0A0A8;
  --ink-2: #70707A;

  /* --- raw palette: status ---------------------------------------------- */
  --amber-500: #E07A1F;
  --red-400:   #FF7A7A;
  --red-500:   #E5484D;
  --green-400: #4ADE80;
  --blue-300:  #7FB8FF;

  /* Channel triplets, for the handful of places that need a translucent
     version of a brand colour. rgb(var(--x-rgb) / .14) beats a second hex. */
  --gold-500-rgb: 240 168 0;
  --ink-0-rgb:    245 245 247;
  --black-rgb:    9 9 11;

  /* --- semantic colour: the layer every other file actually uses -------- */
  --bg:            var(--surface-0);
  --bg-sunken:     var(--black);
  --bg-raised:     var(--surface-1);
  --panel:         var(--surface-2);
  --panel-hover:   var(--surface-3);
  --panel-active:  var(--surface-4);

  --text:          var(--ink-0);
  --text-muted:    var(--ink-1);
  --text-faint:    var(--ink-2);
  --text-on-accent: var(--surface-0);

  --border:        #2A2A33;
  --border-strong: #3C3C48;

  --accent:        var(--gold-500);
  --accent-hover:  var(--gold-300);
  --accent-active: var(--gold-600);
  --accent-text:   var(--gold-300);        /* gold used AS text, on dark */
  --accent-soft:   rgb(var(--gold-500-rgb) / 0.14);
  --accent-faint:  rgb(var(--gold-500-rgb) / 0.07);
  --accent-ramp:   linear-gradient(135deg, var(--gold-500) 0%, var(--gold-300) 100%);

  --danger:        var(--red-400);
  --danger-bg:     rgb(229 72 77 / 0.14);
  --success:       var(--green-400);

  /* Short aliases under the names the research names them by, so a stylesheet
     written against that vocabulary needs no translation layer. */
  --surface:        var(--surface-0);
  --surface-raised: var(--bg-raised);
  --accent-2:       var(--gold-300);
  --ok:             var(--success);
  --warn:           var(--amber-500);

  --scrim:         rgb(var(--black-rgb) / 0.72);
  --selection-bg:  rgb(var(--gold-500-rgb) / 0.28);

  /* Focus ring. Cool blue on purpose: it is the one hue that stays visible
     both on near-black and on top of brand gold, where a gold ring would
     vanish and a white ring would be weak. */
  --focus-ring:     var(--blue-300);
  --focus-ring-alt: var(--surface-0);
  --focus-width:    3px;
  --focus-offset:   2px;

  /* --- radii ------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* --- spacing scale (4px base) ----------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- type scale -------------------------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
               monospace;

  --fs-50:  0.75rem;    /* 12 - badges, counters */
  --fs-100: 0.8125rem;  /* 13 - meta lines */
  --fs-200: 0.875rem;   /* 14 - controls, file names */
  --fs-300: 1rem;       /* 16 - body; also the iOS no-zoom floor for inputs */
  --fs-400: 1.125rem;   /* 18 */
  --fs-500: 1.375rem;   /* 22 - folder title */
  --fs-600: 1.75rem;    /* 28 */
  --fs-700: 2.25rem;    /* 36 */

  --lh-tight:  1.15;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --tracking-tight: -0.011em;
  --tracking-wide:  0.06em;

  /* --- elevation --------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgb(var(--black-rgb) / 0.4);
  --shadow-2: 0 4px 12px rgb(var(--black-rgb) / 0.45);
  --shadow-3: 0 14px 40px rgb(var(--black-rgb) / 0.6);
  --glow-accent: 0 0 0 1px rgb(var(--gold-500-rgb) / 0.35),
                 0 10px 36px rgb(var(--gold-500-rgb) / 0.12);

  /* --- motion ------------------------------------------------------------ */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-slow: 280ms;
  --ease:   cubic-bezier(0.2, 0.6, 0.2, 1);

  /* --- layout ------------------------------------------------------------ */
  --topbar-h:   52px;
  --gutter:     16px;
  --content-max: 1680px;
  --tile-min:   clamp(96px, 28vw, 168px);
  --tile-gap:   var(--space-2);
  --tap-min:    44px;   /* smallest comfortable touch target */

  /* --- stacking order ---------------------------------------------------- */
  --z-base:   0;
  --z-sticky: 100;
  --z-menu:   200;
  --z-toast:  300;
  --z-modal:  400;
  --z-viewer: 500;
}

@media (min-width: 640px) {
  :root {
    --topbar-h: 58px;
    --gutter:   24px;
    --tile-gap: var(--space-3);
  }
}

/* ===========================================================================
   Theme hook. Dark is the product (R6) and there is deliberately no
   prefers-color-scheme override; this block exists so that adding a light
   theme later means setting data-theme="light" on <html>, not editing CSS.
   Only the semantic layer is remapped - no component rule changes.
   =========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #FBFBFC;
  --bg-sunken:     #F2F2F4;
  --bg-raised:     #FFFFFF;
  --panel:         #FFFFFF;
  --panel-hover:   #F2F2F4;
  --panel-active:  #E7E7EB;

  --text:          #16161A;
  --text-muted:    #5A5A64;
  --text-faint:    #8A8A94;
  --text-on-accent: #16161A;

  --border:        #E2E2E7;
  --border-strong: #C8C8D0;

  --accent:        var(--gold-600);
  --accent-hover:  var(--gold-500);
  --accent-active: var(--gold-700);
  --accent-text:   var(--gold-700);
  --accent-soft:   rgb(var(--gold-500-rgb) / 0.16);
  --accent-faint:  rgb(var(--gold-500-rgb) / 0.08);

  --danger:        var(--red-500);
  --scrim:         rgb(var(--black-rgb) / 0.4);

  --surface:        var(--bg);
  --surface-raised: var(--bg-raised);
  --accent-2:       var(--gold-600);

  --focus-ring:     #1C6FD6;
  --focus-ring-alt: #FFFFFF;

  --shadow-1: 0 1px 2px rgb(var(--black-rgb) / 0.08);
  --shadow-2: 0 4px 12px rgb(var(--black-rgb) / 0.1);
  --shadow-3: 0 14px 40px rgb(var(--black-rgb) / 0.16);
}