/*
 * tokens.css — CSS Design Tokens
 * Teaching Portfolio — Dr. Christopher Teh Boon Sung
 * Design System: "The Scholar's Indigo" — Kon Indigo × Cool White × Crimson
 *
 * Edit this file to change the global visual language of the entire site.
 */

:root {

  /* =========================================================
     TYPOGRAPHY — Font Families
     ========================================================= */
  --font-display:  'STIX Two Text', Georgia, 'Times New Roman', serif;
  --font-body:     'STIX Two Text', Georgia, serif;
  --font-label:    'Helvetica Neue', Arial, sans-serif;

  /* =========================================================
     TYPOGRAPHY — Type Scale
     ========================================================= */
  --text-display-lg:  clamp(4rem,    9vw,   8rem);     /* Hero / portfolio title       */
  --text-display-md:  clamp(2.5rem,  5vw,   4.5rem);   /* Chapter number / stat value  */
  --text-display-sm:  clamp(2rem,    4vw,   3rem);      /* Section title / pull quote   */
  --text-heading-lg:  clamp(1.5rem,  3vw,   2rem);      /* Card headings                */
  --text-heading-md:  1.25rem;                           /* Subheadings                  */
  --text-heading-sm:  1.1rem;                            /* Inline section headings      */
  --text-body-lg:     1.125rem;                          /* Body — serif renders larger  */
  --text-body-md:     1rem;                              /* Secondary body text          */
  --text-body-sm:     0.875rem;                          /* References, footnotes        */
  --text-label-md:    0.9375rem;                         /* Barlow Condensed labels      */
  --text-label-sm:    0.75rem;                           /* Metadata, fine print         */

  /* =========================================================
     TYPOGRAPHY — Letter Spacing
     ========================================================= */
  --tracking-tight:   -0.02em;   /* Headlines                                         */
  --tracking-normal:   0em;
  --tracking-wide:     0.1em;    /* Barlow Condensed benefits from wider tracking      */
  --tracking-wider:    0.16em;   /* Award labels, ultra-spaced metadata               */

  /* =========================================================
     TYPOGRAPHY — Line Height
     ========================================================= */
  --leading-tight:    1.05;   /* Display headings                  */
  --leading-snug:     1.25;   /* Card titles                       */
  --leading-normal:   1.5;    /* Standard reading                  */
  --leading-relaxed:  1.7;    /* Long-form body paragraphs         */

  /* =========================================================
     COLOR PALETTE — "The Scholar's Atelier"
     Forest Green × Cool White × Crimson
     ========================================================= */

  /* Backgrounds & Surfaces */
  --color-bg:               #f8f9f8;  /* Near-white with faint green cast              */
  --color-surface-low:      #edf0ed;  /* Secondary sections / card backgrounds          */
  --color-surface-high:     #e0e6e0;  /* Pull-quotes / highlighted evidence             */
  --color-surface-highest:  #cdd6cd;  /* Strongest tonal contrast surface              */
  --color-surface-white:    #ffffff;  /* Cards on light ground                          */

  /* Primary — "Forest Ink" */
  --color-primary:           #1a2e1c;  /* Deep forest green                            */
  --color-primary-container: #0e1c0f;  /* Deeper forest — CTA gradient, nav bg         */
  --color-on-primary:        #f8f9f8;  /* Near-white on dark green                      */

  /* Accent — "Scholar's Gold" */
  --color-accent:       #c9a820;  /* Clear yellow-gold — active, highlights            */
  --color-accent-vivid: #e8c840;  /* Bright yellow — block header titles               */
  --color-accent-dark:  #8a7010;  /* Dark gold — text on light bg, visited links       */
  --color-accent-dim:   #a88c18;  /* Muted gold — hover states                         */

  /* Borders */
  --color-border:           #c8d0c8;  /* Green-tinted separator                        */

  /* Text */
  --color-on-surface:       #111a12;  /* Deep forest ink — main body text              */
  --color-on-surface-muted: #4a5e4c;  /* Muted green-gray — secondary text, captions   */
  --color-on-surface-faint: #6e826f;  /* Tertiary text, placeholders                  */

  /* =========================================================
     SPACING SCALE (0.25rem = 4px per unit)
     ========================================================= */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */

  /* =========================================================
     BORDER RADIUS — 0px everywhere (academic rigour, no curves)
     ========================================================= */
  --radius-none: 0px;

  /* =========================================================
     SHADOWS — Tinted on-primary (never grey)
     ========================================================= */
  --shadow-whisper:  0px 20px 40px rgba(26, 46, 28, 0.05);
  --shadow-float:    0px 24px 48px rgba(26, 46, 28, 0.12);
  --shadow-lift:     0px 8px  20px rgba(26, 46, 28, 0.08);

  /* =========================================================
     TRANSITIONS
     ========================================================= */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   600ms ease;
  --transition-crawl:  900ms ease;

  /* =========================================================
     Z-INDEX LAYERS
     ========================================================= */
  --z-base:      1;
  --z-above:     10;
  --z-sidebar:   90;
  --z-nav:       100;
  --z-overlay:   150;
  --z-lightbox:  200;
  --z-toast:     300;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --nav-height:      60px;
  --sidebar-width:   240px;
  --container-max:   1280px;
  --container-text:  800px;
  --container-prose: 65ch;
}

/* No per-chapter overrides — kon indigo and crimson are consistent across all chapters. */