/* =========================================================
   Verilium.in — design tokens
   Single source of truth for colour, type, space, radius,
   motion. Everything else in styles.css reads from here.

   Light values sit on :root. Dark mode only swaps the
   semantic colour tokens, so components need no dark rules.

   Contrast notes (WCAG 2.1 AA, checked):
     --text-secondary on --surface ....... 5.15:1
     --text-secondary on --page .......... 4.61:1
     white on --accent-solid ............. 4.66:1
     --accent-text on --page ............. 4.68:1
   Apple's own #3C3C4399 secondary and a flat #5D66F7 fill
   both land near 3.4-4.4:1, under the 4.5 AA needs for body
   text, so those two are nudged darker here.
   ========================================================= */

:root {
  color-scheme: light dark;

  /* ---- Surfaces ---- */
  --page: #F2F2F7;
  --surface: #FFFFFF;
  --surface-sunken: #F2F2F7;   /* wells inside a card */

  /* ---- Text ---- */
  --text: #000000;
  --text-secondary: rgba(60, 60, 67, 0.75);
  --text-on-accent: #FFFFFF;

  /* ---- Lines ---- */
  --separator: rgba(60, 60, 67, 0.29);
  --separator-strong: rgba(60, 60, 67, 0.4);

  /* ---- Accent ---- */
  --accent: #5D66F7;           /* tints, rings, active states */
  --accent-solid: #5A63F2;     /* filled buttons, white text on top */
  --accent-text: #525BE8;      /* accent used as text on --page */
  --accent-tint: rgba(93, 102, 247, 0.12);
  --accent-tint-strong: rgba(93, 102, 247, 0.18);

  /* ---- Status (kept from the old palette, AA-checked) ---- */
  --positive: #1B7F4B;
  --positive-tint: rgba(27, 127, 75, 0.12);
  --caution: #9A4A1B;
  --caution-tint: rgba(154, 74, 27, 0.12);

  /* ---- Type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.8125rem;   /* 13px — chips, captions */
  --text-sm: 0.9375rem;   /* 15px — list secondary */
  --text-base: 1.0625rem; /* 17px — body */
  --text-lg: 1.1875rem;   /* 19px — lead-in */
  --text-xl: 1.5rem;      /* 24px — card titles */
  --text-2xl: 2rem;       /* 32px — section headings */
  --text-3xl: 3rem;       /* 48px — hero */

  --leading-tight: 1.15;
  --leading-body: 1.5;

  /* ---- Space (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- Radius ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-card: 22px;
  --radius-badge: 30%;   /* squircle-ish icon badge */
  --radius-pill: 999px;

  /* ---- Elevation: floating elements only ---- */
  --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.14);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --duration-fast: 150ms;
  --duration: 200ms;
  --duration-slow: 250ms;
  --press-scale: 0.97;

  /* ---- Layout ---- */
  --wrap: 1100px;
  --gutter: var(--space-4);
  --header-height: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #000000;
    --surface: #1C1C1E;
    --surface-sunken: #2C2C2E;

    --text: #FFFFFF;
    --text-secondary: rgba(235, 235, 245, 0.6);

    --separator: rgba(84, 84, 88, 0.6);
    --separator-strong: rgba(84, 84, 88, 0.9);

    --accent: #7E87FF;
    --accent-solid: #5A63F2;
    --accent-text: #7E87FF;
    --accent-tint: rgba(126, 135, 255, 0.18);
    --accent-tint-strong: rgba(126, 135, 255, 0.26);

    --positive: #3CCB7F;          /* the Verilium green, kept for dark */
    --positive-tint: rgba(60, 203, 127, 0.18);
    --caution: #FF9F6B;
    --caution-tint: rgba(255, 159, 107, 0.18);

    --shadow-float: 0 8px 28px rgba(0, 0, 0, 0.6);
  }
}