/* Design tokens.
   LIGHT is the default theme — the site opens light for everyone; dark is
   the user's explicit choice via the toggle (persisted in localStorage).
   The lime/mint identity is kept in both, tuned per theme for AA contrast. */

:root {
  /* ---------- light (default) ---------- */
  --bg: #f7f9fb;
  --panel: #ffffff;
  --raised: #eef2f6;
  --fg: #101820;
  --dim: rgba(16, 24, 32, 0.72);
  --faint: rgba(16, 24, 32, 0.55);
  --line: rgba(16, 24, 32, 0.12);
  --line-strong: rgba(16, 24, 32, 0.26);

  --lime: #3f7d10;
  --mint: #0f7a58;
  --accent-ink: #ffffff;
  --accent-soft: rgba(63, 125, 16, 0.09);

  /* full-page canvas, content veil, and glass surfaces, per theme */
  --canvas-alpha: 0.68;
  --veil: rgba(247, 249, 251, 0.52);
  --glass: rgba(255, 255, 255, 0.72);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 99px;

  --font-sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;

  --measure: 68ch;
  --container: 1120px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --section-pad: clamp(3rem, 2rem + 5vw, 5.5rem);

  --shadow: 0 1px 2px rgba(16, 24, 32, 0.06), 0 10px 28px rgba(16, 24, 32, 0.09);
}

:root[data-theme='dark'] {
  --bg: #0f1216;
  --panel: #151a21;
  --raised: #1c232d;
  --fg: #eef2f6;
  --dim: rgba(238, 242, 246, 0.62);
  --faint: rgba(238, 242, 246, 0.42);
  --line: rgba(238, 242, 246, 0.12);
  --line-strong: rgba(238, 242, 246, 0.22);

  --lime: #b8ff5c;
  --mint: #5ce1a9;
  --accent-ink: #10281a;
  --accent-soft: rgba(184, 255, 92, 0.12);

  --canvas-alpha: 0.55;
  --veil: rgba(15, 18, 22, 0.55);
  --glass: rgba(21, 26, 33, 0.72);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.28);
}