/* ==========================================================================
   MMS E-Portfolio — Design Tokens (THEME ONLY)
   Editorial / academic aesthetic. Off-white + grey surfaces, near-black text,
   lilac/purple as the sole accent (Crimson Pro serif headings + Atkinson
   Hyperlegible accessible body). Every color below is WCAG AA-checked —
   see the inline contrast notes before adding a new raw hex anywhere.

   SCOPE OF THIS FILE: custom-property VALUES only — colors, fonts, spacing
   scale, radius, motion timing. No selectors, no layout rules, no media
   queries. If you're changing what a color/font/spacing number IS, this is
   the only file you should need to touch.

   This file is deliberately kept separate from css/style.css (which holds
   all component + responsive/nav layout rules) so that a theme-only edit —
   e.g. "change the accent color" — can never accidentally touch the nav's
   mobile/desktop breakpoint logic. See css/style.css's top-of-file comment
   for where responsive rules live.
   ========================================================================== */

:root {
  /* Color — surfaces */
  --color-background: #F7F6F9;       /* off-white, cool lilac-tinted neutral — page background */
  --color-background-alt: #EDEBF2;   /* light grey-lilac — muted section backgrounds */
  --color-background-rgb: 247, 246, 249; /* same as --color-background, unprefixed, for rgba() */
  --color-card: #FDFCFE;             /* near-white — elevated surfaces (cards, dropdown panel) */

  /* Color — text */
  --color-foreground: #18181B;       /* near-black — all headings & body text */
  --color-foreground-rgb: 24, 24, 27; /* same as --color-foreground, unprefixed, for rgba() */
  --color-card-foreground: #18181B;
  --color-muted-foreground: #5C5A63; /* medium grey — secondary/muted text, 6.3:1 on background */

  /* Color — lilac/purple accent (interactive + emphasis) */
  --color-primary: #7e2b91;          /* lilac — links, active nav state, highlights, button fill (6.0:1 on background) */
  --color-primary-hover: #A032B8;    /* vivid purple — hover/emphasis, eyebrow labels, numbered badges (5.3:1 on background, 4.9:1 on background-alt, 5.6:1 on card, 5.8:1 for white text on this fill — all pass WCAG AA) */
  --color-primary-tint: #EDE7F6;     /* pale lilac — background-only tint (dropdown hover fill), never used for text */
  --color-on-primary: #FFFFFF;       /* text placed on a solid --color-primary fill (6.5:1) */

  /* Color — grey scale */
  --color-border: #DDDAE3;           /* light grey — hairline borders/dividers */
  --color-ring: #6E4EA9;             /* focus ring — same as --color-primary */

  /* Typography */
  --font-heading: "Crimson Pro", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-base: 1rem;
  --leading-body: 1.65;

  /* Spacing scale */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --content-max: 72rem;
  --radius: 4px;
  --border-w: 1px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 220ms;
}