/* ═══════════════════════════════════════════════════════
   FAUX OS V2.1 - Design Tokens
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Palette: Monochrome Core ── */
  --c-black:    #080808;
  --c-charcoal: #111111;
  --c-graphite: #191919;
  --c-slate:    #2a2a2a;
  --c-ash:      #777;
  --c-silver:   #c0c0c0;
  --c-bone:     #e0e0e0;
  --c-white:    #f2f2f2;

  /* ── Semantic Colors ── */
  --bg:         var(--c-black);
  --bg-surface: var(--c-charcoal);
  --bg-raised:  var(--c-graphite);
  --ink:        var(--c-white);
  --ink-muted:  var(--c-silver);
  --ink-faint:  var(--c-ash);
  --border:     rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --glass:      rgba(8, 8, 8, 0.92);

  /* ── Accent ── */
  --accent:        #e85d30;
  --accent-dim:    rgba(232, 93, 48, 0.10);
  --accent-glow:   rgba(232, 93, 48, 0.25);

  /* ── Typography ── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;
  --font-pixel:   'Press Start 2P', monospace;

  --fs-xs:   0.6875rem;   /* 11px */
  --fs-sm:   0.8125rem;   /* 13px */
  --fs-base: 0.9375rem;   /* 15px */
  --fs-md:   1.125rem;    /* 18px */
  --fs-lg:   1.5rem;      /* 24px */
  --fs-xl:   2rem;        /* 32px */
  --fs-xxl:  2.75rem;     /* 44px */

  --leading-tight:  1.2;
  --leading-normal: 1.55;
  --leading-loose:  1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0.01em;
  --tracking-wide:   0.08em;
  --tracking-pixel:  0.12em;

  /* ── Spacing Scale (4px base) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Radii - brutalist: mostly sharp, rare softness ── */
  --r-none: 0;
  --r-sm:   3px;
  --r-md:   4px;
  --r-lg:   6px;
  --r-xl:   8px;
  --r-full: 999px;

  /* ── Shadows: harder, less diffuse ── */
  --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.5);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.6), 4px 4px 0 rgba(0, 0, 0, 0.2);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.7), 6px 6px 0 rgba(0, 0, 0, 0.15);
  --shadow-win: 0 8px 32px rgba(0, 0, 0, 0.8), 8px 8px 0 rgba(0, 0, 0, 0.12);

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-normal:  250ms;
  --dur-slow:    500ms;

  /* ── Z-Layers ── */
  --z-bg:           0;
  --z-texture:      1;
  --z-content:      5;
  --z-window:       10;
  --z-dock:         50;
  --z-menubar:      60;
  --z-modal:        100;
  --z-overlay:      200;
  --z-overdrive:    300;   /* ADHD overdrive panels */
  --z-boot:         500;   /* Boot sequence screen */
  --z-notification: 600;   /* Achievement popups, toasts */
  --z-crash:        900;   /* BSOD / system crash easter egg */
  --z-takeover:     1000;  /* BTC honeypot, full takeover overlays */

  /* ── Texture Intensities ── */
  --grain-opacity:    0.12;
  --scanline-opacity: 0.08;
  --vignette-opacity: 1;

  /* ── Extra Typo Scale (dramatic) ── */
  --fs-hero:  4rem;       /* 64px */
  --fs-mega:  6rem;       /* 96px */
}

/* ── Desktop ~1.15× Scale ── */
body.mode--desktop {
  --fs-xs:   0.8rem;       /* ~12.8px (11×1.15) */
  --fs-sm:   0.9375rem;    /* 15px    (13×1.15) */
  --fs-base: 1.075rem;     /* ~17px   (15×1.15) */
  --fs-md:   1.3rem;       /* ~21px   (18×1.15) */
  --fs-lg:   1.725rem;     /* ~27.5px (24×1.15) */
  --fs-xl:   2.3rem;       /* ~37px   (32×1.15) */
  --fs-xxl:  3.15rem;      /* ~50px   (44×1.15) */

  --sp-1:  5px;
  --sp-2:  9px;
  --sp-3:  14px;
  --sp-4:  18px;
  --sp-5:  23px;
  --sp-6:  28px;
  --sp-8:  37px;
  --sp-10: 46px;
  --sp-12: 55px;
  --sp-16: 74px;

  --r-sm:   3px;
  --r-md:   5px;
  --r-lg:   7px;
  --r-xl:   10px;

  --fs-hero: 4.6rem;
  --fs-mega: 6.9rem;
}