/* ============================================================
   tokens.css
   Design tokens for Game Phumwithayawat portfolio.
   Palette: Indigo Cosmic. Dark mode is the default.
   Edit colors here once, every page updates.

   NOTE on source of truth: these values match what the live
   HTML files currently ship (cool paper #FBFBFD, ink #F5F4F9),
   not the warm-cream values written in PROJECT_HANDOVER.md.
   Kept as-is so the refactor changes zero pixels. Revisit later
   if Game wants to align to the handover spec.
   ============================================================ */

/* Light mode (also the :root fallback). Cool near-white paper. */
:root,
html[data-theme="light"] {
  --paper:      #FBFBFD;
  --paper-2:    #F4F5F8;
  --ink:        #0A0820;
  --ink-2:      #1A1542;
  --ink-soft:   #3D3568;
  --muted:      #7B759C;
  --heat:       #534AB7;
  --heat-deep:  #26215C;
  --line:       rgba(10, 8, 32, 0.06);
  --line-soft:  rgba(10, 8, 32, 0.03);

  /* Liquid Glass surfaces */
  --glass-bg:        rgba(251, 251, 253, 0.6);
  --glass-bg-strong: rgba(251, 251, 253, 0.78);
  --glass-border:    rgba(10, 8, 32, 0.05);
  --glass-highlight: rgba(255, 255, 255, 0.6);
  --glass-shadow:    0 1px 3px rgba(10, 8, 32, 0.04), 0 8px 32px rgba(10, 8, 32, 0.06);

  /* Terminal + resume (homepage only). Intentionally dark even in
     light mode, so the terminal always reads as a dark console. */
  --terminal-bg:     #0A0820;
  --terminal-text:   #FAF8F2;
  --terminal-border: rgba(250, 248, 242, 0.08);
  --terminal-muted:  rgba(250, 248, 242, 0.25);
  --resume-bg:       #0A0820;
  --resume-text:     #FAF8F2;
  --resume-muted:    rgba(250, 248, 242, 0.55);
  --resume-line:     rgba(250, 248, 242, 0.15);
}

/* Dark mode (default). Cosmic indigo background. */
html[data-theme="dark"] {
  --paper:      #0A0820;
  --paper-2:    #1A1542;
  --ink:        #F5F4F9;
  --ink-2:      #E8E5F2;
  --ink-soft:   #B4AEDB;
  --muted:      #7B759C;
  --heat:       #7F77DD;
  --heat-deep:  #534AB7;
  --line:       rgba(245, 244, 249, 0.10);
  --line-soft:  rgba(245, 244, 249, 0.05);

  /* Liquid Glass surfaces */
  --glass-bg:        rgba(10, 8, 32, 0.55);
  --glass-bg-strong: rgba(10, 8, 32, 0.75);
  --glass-border:    rgba(245, 244, 249, 0.10);
  --glass-highlight: rgba(245, 244, 249, 0.10);
  --glass-shadow:    0 1px 3px rgba(0, 0, 0, 0.2), 0 8px 32px rgba(0, 0, 0, 0.3);

  /* Terminal + resume */
  --terminal-bg:     #1A1542;
  --terminal-text:   #F5F4F9;
  --terminal-border: rgba(245, 244, 249, 0.10);
  --terminal-muted:  rgba(245, 244, 249, 0.30);
  --resume-bg:       #1A1542;
  --resume-text:     #F5F4F9;
  --resume-muted:    rgba(245, 244, 249, 0.50);
  --resume-line:     rgba(245, 244, 249, 0.12);
}

/* ------------------------------------------------------------
   Breakpoints reference (CSS custom media is not native, so
   these are documented here and used as literal px in @media):
     320px  iPhone SE 1st gen   hero title 34px, hamburger, hide clock
     375px  iPhone 12/13/14     hamburger, clock hidden under 414
     414px  iPhone Pro Max      hamburger, clock hidden at/under here
     600px  small tablet        middle meta visible from here up
     768px  iPad portrait       desktop nav links, 2-col body
     1024px iPad landscape      full desktop layout
     1440px+ desktop            default design target
   ------------------------------------------------------------ */