/*
 * shared/tokens.css
 * ────────────────────────────────────────────────────────────────
 * The Work Bench — Design Tokens
 *
 * Single source of truth for colors, typography, spacing, and
 * elevation. Every site page should link this file.
 *
 * Dark mode is the only theme. The dark palette lives in :root
 * and there are no other theme variants.
 * ────────────────────────────────────────────────────────────────
 */

/* ─── DARK (the only theme) ──────────────────────────────────── */
:root {
  /* palette primitives */
  --p-warm-cream:   #F5F2EB;
  --p-pure-white:   #FFFFFF;
  --p-off-white:    #F0EDE6;
  --p-charcoal:     #1A1A1A;
  --p-graphite:     #2D2D2D;

  /* semantic surface */
  --c-bg:           #0A0A0A;
  --c-bg-card:      #111111;
  --c-bg-elevated:  #0F0F0F;
  --c-border:       #1A1A1A;
  --c-border-hover: #333333;
  --c-border-focus: #999999;

  /* text */
  --c-text:         #E0E0E0;
  --c-text-secondary: #999999;
  --c-text-muted:   #666666;
  --c-text-dim:     #555555;
  --c-text-faint:   #444444;

  /* accents / status */
  --c-accent:       #E0E0E0;
  --c-success:      #4ADE80;
  --c-warning:      #FBBF24;
  --c-error:        #F87171;

  /* nav chrome */
  --nav-bg:                    rgba(10,10,10,0.85);
  --nav-border:                #333333;
  --nav-text:                  #999999;
  --nav-text-active:           #E0E0E0;
  --nav-caret:                 #333333;
  --nav-caret-fill:            #0A0A0A;

  /* sub-nav */
  --subnav-bg:                 rgba(10,10,10,0.75);
  --subnav-border:             #1A1A1A;
  --subnav-text:               #999999;
  --subnav-text-active:        #E0E0E0;
  --subnav-active-bg:          rgba(224,224,224,0.06);
  --subnav-hover-bg:           #1A1A1A;

  /* cards / panels */
  --card-bg:                   #111111;
  --card-border:               #1A1A1A;
  --card-border-hover:         #333333;
  --card-hover-transform:      translateY(-2px);

  /* inputs */
  --input-bg:                  #111111;
  --input-border:              #1A1A1A;
  --input-focus-border:        #999999;
  --input-placeholder:         #444444;

  /* buttons */
  --btn-primary-bg:            #E0E0E0;
  --btn-primary-text:          #0A0A0A;
  --btn-secondary-border:      #333333;
  --btn-secondary-text:        #999999;

  /* search overlay */
  --search-overlay-bg:         rgba(0,0,0,0.6);
  --search-dialog-bg:          #111111;
  --search-dialog-border:      #333333;
  --search-result-hover:       #1A1A1A;
  --search-input-color:        #E0E0E0;

  /* mega-dropdown */
  --mega-panel-bg:             #111111;
  --mega-panel-border:         #333333;
  --mega-icon-bg:              #1A1A1A;
  --mega-icon-border:          #222222;
  --mega-text:                 #999999;
  --mega-text-active:          #E0E0E0;
  --mega-hover-bg:             #1A1A1A;

  /* mobile menu */
  --mobile-menu-bg:            rgba(10,10,10,0.95);
  --mobile-menu-border:        #1A1A1A;
  --mobile-link-color:         #999999;
  --mobile-group-border:       #1A1A1A;

  /* scroll arrows */
  --scroll-arrow-bg:           rgba(10,10,10,0.85);
  --scroll-arrow-border:       #333333;
  --scroll-arrow-color:        #777777;
  --scroll-arrow-hover:        #E0E0E0;

  /* footer */
  --footer-bg:                 rgba(10,10,10,0.85);
  --footer-border:             #1A1A1A;
  --footer-text:               #999999;
  --footer-text-hover:         #E0E0E0;

  /* shadows */
  --shadow-card:               0 4px 20px rgba(0,0,0,0.3);
  --shadow-elevated:           0 8px 32px rgba(0,0,0,0.4);
  --shadow-search:             0 24px 64px rgba(0,0,0,0.5);
  --shadow-mega:               0 12px 40px rgba(0,0,0,0.6);

  /* backdrop filters */
  --blur-nav:    blur(12px);
  --blur-subnav: blur(8px);
  --blur-search: blur(4px);

  /* ─── typography scale ───────────────────────────────────────
     Reference font-size ladder. Use these tokens (or the literal
     values from the AGENTS.md design system) for new components.
     --fs-min is the smallest readable size on mobile (12px).
     Never go below --fs-min for text that must be readable.
     Below-the-min exceptions exist (tiny decorative glyphs, avatar
     placeholders) but no informational text should be smaller. */
  --fs-min:      0.75rem;   /* 12px — minimum readable (mobile-safe) */
  --fs-label-xs: 0.65rem;   /* 10.4px — tiny labels, section labels */
  --fs-label:    0.7rem;    /* 11.2px — small labels, meta text     */
  --fs-meta:     0.8rem;    /* 12.8px — sub-nav link, footer link    */
  --fs-body:     0.875rem;  /* 14px — body text, nav link            */
  --fs-body-lg:  0.9rem;    /* 14.4px — body text (alternate)        */
  --fs-h2:       1.15rem;   /* 18.4px — h2                           */
  --fs-h1:       1.5rem;    /* 24px — h1 (small end of range)        */
  --fs-hero:     2.5rem;    /* 40px — h1 (large end of range)        */
}