/* ============================================================
   tokens.css — design tokens for The Collaboratory v3
   Palette (per brand logo swatches):
       Black        #1A1A1A – #000000   ornamental border, monogram, wordmark
       Silver/Grey  #B8B8B8 – #A9A9A9   background panel
       White        #FFFFFF              outer canvas / negative space

   To minimize churn across the existing component CSS, the
   legacy token names (--gold*, --teal*, --glass-gold-tint,
   --glass-teal-tint) are retained as semantic slots that now
   point to ink + silver values. The visual result is a fully
   monochrome brand identity — black wordmark, grey panel
   surfaces, white negative space — across both themes.

     --gold*  = PRIMARY accent (former gold slot)
                dark theme  -> near-white (luminous ink on dark)
                light theme -> near-black (true logo wordmark on white)
     --teal*  = SECONDARY accent (former teal slot)
                silver-grey in both themes
   ============================================================ */

:root {
  /* Ink surfaces — dark theme baseline */
  --ink-900: #0E0E0F;
  --ink-800: #141416;
  --ink-700: #1A1A1C;
  --ink-600: #222225;

  /* Raw RGB channels for inline rgba() blends (kept in sync with above) */
  --ink-900-rgb: 14, 14, 15;
  --ink-800-rgb: 20, 20, 22;
  --ink-700-rgb: 26, 26, 28;
  --ink-600-rgb: 34, 34, 37;

  /* Silver accent channels (silver-grey) */
  --silver-rgb: 184, 184, 184;
  /* Foreground text — near-white on dark */
  --fg-100: #FAFAFA;
  --fg-200: #E6E6E8;
  --fg-300: #A9A9A9;  /* spec silver-grey */
  --fg-400: #6E6E70;

  /* Accents — monochrome brand identity */
  /* Primary: ink-on-light, near-white-on-dark (luminous). */
  --gold:        #DCDCDF;
  --gold-bright: #F0F0F2;  /* brightest "ink" — used for primary brand moments */
  --gold-deep:   #B8B8BA;  /* middle */

  /* Secondary: silver-grey across both themes. */
  --teal:        #B8B8B8;  /* spec silver-grey */
  --teal-deep:   #A9A9A9;  /* spec silver (slightly darker) */
  --teal-soft:   rgba(184, 184, 184, 0.5);

  /* Glass tints — neutral silver washes, theme-aware */
  --glass-gold-tint: rgba(240, 240, 242, 0.04);  /* primary wash — subtle white */
  --glass-teal-tint: rgba(184, 184, 184, 0.04);  /* secondary wash — silver */

  /* Typography */
  --font-display: "Bebas Neue", "Inter", sans-serif;
  --font-editorial: "Instrument Serif", Georgia, serif;
  --font-ui: "Syne", "Inter", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Type scale */
  --fs-hero: clamp(3.5rem, 11vw, 9rem);
  --fs-h2:   clamp(2.25rem, 6vw, 4.5rem);
  --fs-h3:   clamp(1.4rem, 2.6vw, 2rem);
  --fs-body: clamp(1rem, 1.1vw, 1.1rem);
  --fs-small: 0.8rem;
  --fs-label: 0.72rem;

  /* Spacing scale */
  --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: 5rem;
  --space-9: 8rem;

  /* Layout */
  --container: 1240px;
  --nav-h: 88px;

  /* Motion */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-precise: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur: 420ms;
  --dur-slow: 800ms;
}

/* Breakpoints used across the build:
   >=1024px : desktop (full nav, grid layouts)
   >=600px  : tablet/small desktop (simplified, single col collapse)
   <600px   : mobile
*/

/* Preferred color contrast flag — never disable */
@media (prefers-contrast: more) {
  :root {
    --gold-bright: #FFFFFF;
    --fg-300: #C5C5C5;
    --fg-400: #8E8E90;
  }
}

/* ============================================================
   LIGHT THEME — brand-true monochrome on white canvas
   Background = white (#FFFFFF) outer + silver-grey (#B8B8B8)
   panels per logo swatches. Accent inverts to true black.
   ============================================================ */

:root[data-theme="light"] {
  /* Ink surfaces — white ground / silver panel */
  --ink-900: #FFFFFF;   /* outer canvas */
  --ink-800: #FAFAFA;   /* soft near-white */
  --ink-700: #EFEFEF;   /* hair-tint under glass */
  --ink-600: #E0E0E0;   /* deeper divider */

  /* Raw RGB channels (light theme) */
  --ink-900-rgb: 255, 255, 255;
  --ink-800-rgb: 250, 250, 250;
  --ink-700-rgb: 239, 239, 239;
  --ink-600-rgb: 224, 224, 224;
  --silver-rgb: 184, 184, 184;

  /* Foreground text — true near-black on white */
  --fg-100: #1A1A1A;   /* spec black */
  --fg-200: #2A2A2D;
  --fg-300: #56565A;   /* mid grey for body copy legibility on white */
  --fg-400: #8A8A8E;

  /* Primary accent -> near-black (matches logo wordmark on white) */
  --gold:        #2A2A2D;
  --gold-bright: #1A1A1A;   /* spec black — primary brand color on light */
  --gold-deep:   #4A4A4D;

  /* Secondary accent stays silver-grey, slightly darker for AA */
  --teal:        #56565A;
  --teal-deep:   #454548;
  --teal-soft:   rgba(86, 86, 90, 0.45);

  /* Glass tints — neutral grey washes on white */
  --glass-gold-tint: rgba(26, 26, 26, 0.04);
  --glass-teal-tint: rgba(184, 184, 184, 0.06);
}