/* Design tokens: the single source of truth for both pages
   (index.html and project1/). Stylesheets consume these; they should not
   hardcode colors, spacing, radii or timings of their own.

   Theme selection:
   - Light is the default.
   - Dark applies when the OS prefers dark, unless the page sets
     data-color-scheme="light".
   - data-color-scheme="dark" forces dark regardless of the OS.

   Every text/background pair below is checked against WCAG AA (4.5:1);
   ratios are noted so a tweak can be re-checked against them. */

:root {
  /* ---------- Color: light ---------- */
  color-scheme: light;             /* native controls (selects, scrollbars) match the theme */
  --color-bg: #fafaf7;             /* page background, warm off-white */
  --color-surface: #f1f0eb;        /* raised areas: form, cards, inputs on bg */
  --color-text: #1a1a17;           /* primary text. 16.7:1 on bg */
  --color-text-muted: #5c5a54;     /* secondary text, labels, meta. 6.6:1 on bg, 6.0:1 on surface */
  --color-border: #e2e0d9;         /* dividers and resting card edges (decorative) */
  --color-border-strong: #8a877e;  /* form controls, outline buttons. 3.4:1 on bg (UI minimum is 3:1) */
  --color-accent: #b4441e;         /* the one accent: rust. Links, primary button. 5.3:1 on bg */
  --color-accent-hover: #93361a;   /* accent on hover, darker in light mode */
  --color-on-accent: #ffffff;      /* text on an accent fill. 5.6:1 */
  --color-success: #2d6a35;        /* status only, never decoration. 6.2:1 on bg */
  --color-error: #b3261e;          /* status only, never decoration. 6.3:1 on bg */
  --color-scrim: rgb(26 26 23 / 0.5); /* dims the page behind a modal. Solid tint, no blur */

  /* ---------- Typography ---------- */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale, roughly 1.2 ratio from a 16px base. */
  --text-xs: 0.8125rem;   /* 13px: fine print, tags */
  --text-sm: 0.875rem;    /* 14px: labels, meta, small buttons */
  --text-base: 1rem;      /* 16px: body */
  --text-lg: 1.125rem;    /* 18px: lead lines, card titles */
  --text-xl: 1.375rem;    /* 22px: small headings */
  --text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);      /* 24-32px: section headings */
  --text-3xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);   /* 36-56px: page title */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.15;  /* display headings */
  --leading-snug: 1.3;    /* small headings, UI */
  --leading-normal: 1.55; /* body copy */

  /* ---------- Spacing: 4px base ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---------- Shape ---------- */
  --radius-sm: 4px;       /* inputs, tags, small controls */
  --radius-md: 6px;       /* buttons, cards, panels */
  --radius-full: 9999px;  /* circles only (avatar) */
  --border-width: 1px;

  /* Shadows: none by default. Only floating layers (dropdown, modal, toast)
     get one, so they read as above the page. */
  --shadow-none: none;
  --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.12);

  /* ---------- Motion ---------- */
  /* One duration and one easing for every hover/focus transition. */
  --duration: 150ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Color: dark ---------- */
/* Dark values appear twice: once forced by the attribute, once for the
   OS preference. Plain CSS can't share them, so edit both copies together. */
:root[data-color-scheme="dark"] {
  color-scheme: dark;
  --color-bg: #161614;             /* near-black, warm */
  --color-surface: #201f1c;
  --color-text: #edede8;           /* 15.4:1 on bg */
  --color-text-muted: #a6a49c;     /* 7.3:1 on bg, 6.6:1 on surface */
  --color-border: #2f2e2a;
  --color-border-strong: #6e6c65;  /* 3.5:1 on bg */
  --color-accent: #e8875f;         /* lighter rust for dark backgrounds. 7.0:1 on bg */
  --color-accent-hover: #f2a483;   /* lighter on hover in dark mode */
  --color-on-accent: #161614;      /* dark text on the light rust fill. 7.0:1 */
  --color-success: #86c994;
  --color-error: #f2a199;
  --color-scrim: rgb(0 0 0 / 0.6);
  --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) {
    color-scheme: dark;
    --color-bg: #161614;
    --color-surface: #201f1c;
    --color-text: #edede8;
    --color-text-muted: #a6a49c;
    --color-border: #2f2e2a;
    --color-border-strong: #6e6c65;
    --color-accent: #e8875f;
    --color-accent-hover: #f2a483;
    --color-on-accent: #161614;
    --color-success: #86c994;
    --color-error: #f2a199;
    --color-scrim: rgb(0 0 0 / 0.6);
    --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.4);
  }
}

/* Reduced motion: transitions collapse to instant through the token. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
  }
}