/* ===========================================================
   Code Olympiad 2081 - Design Tokens
   Single source for color, type, spacing, radius and motion.
   Swap values here (e.g. fonts) and every page updates.
   Inspired by the loksewa iOS design system.

   Themes: dark (default, :root) and light (html[data-theme="light"]).
   Same semantic names in both modes, so no component changes
   between themes. Never hardcode a colour in a component.
   =========================================================== */

:root {
  /* ---------- Typography ---------- */
  /* Fonts are tokens: swap families here, nothing hardcodes them. */
  --font-sans: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans Devanagari", system-ui,
    sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Devanagari",
    system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", "Fira Code",
    "JetBrains Mono", Consolas, "Roboto Mono", "Courier New", monospace;

  /* ---------- Color (dark) ---------- */
  --color-canvas: #141b1f;
  --color-surface: #161b22;
  --color-surface-2: #1f262d;
  --color-surface-hover: #2d333b;
  --color-fill: rgba(139, 148, 158, 0.16);

  --color-text-primary: #e6edf3;
  --color-text-secondary: #c9d1d9;
  --color-text-tertiary: #8b949e;
  --color-text-on-accent: #ffffff;

  --color-accent: #20b7ee;
  --color-accent-strong: #58a6ff;
  --color-accent-soft: rgba(32, 183, 238, 0.14);
  --color-blue: #007bff;
  --color-green: #27c93f;
  --color-red: #ff5f56;
  --color-gold: #ffcc00;

  --color-border-hairline: rgba(148, 163, 184, 0.16);
  --color-border-strong: rgba(148, 163, 184, 0.32);

  /* ---------- Translucent materials ---------- */
  --color-nav-material: rgba(20, 27, 31, 0.72);
  --color-scrim: rgba(0, 0, 0, 0.5);
  --color-spotlight: rgba(32, 183, 238, 0.16);
  --color-grain: rgba(255, 255, 255, 0.028);

  /* ---------- Role tints ---------- */
  --color-role-lead: #ffb340;
  --color-role-secretary: #af52de;
  --color-role-tech: #30b0c7;
  --color-role-exec: #34c759;

  /* ---------- Night Shift accent (terminal amber) ---------- */
  --color-phosphor: var(--color-role-lead);

  /* ---------- Focus ---------- */
  --color-focus-ring: var(--color-accent);

  /* ---------- Spacing ---------- */
  --space-hair: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --space-6xl: 88px;

  /* ---------- Radius ---------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---------- Motion ---------- */
  --motion-instant: 120ms;
  --motion-base: 240ms;
  --motion-slow: 360ms;
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-touch: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ---------- Typography scales ---------- */
  --text-display: clamp(2.5rem, 7vw, 5.25rem);
  --text-heading: clamp(1.5rem, 3vw, 2rem);
  --text-title: clamp(1.125rem, 2vw, 1.375rem);
  --text-sub: 1rem;
  --text-kicker: 0.8125rem;
  --text-caption: 0.75rem;

  /* ---------- Icon sizes ---------- */
  --icon-sm: 1.25rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;

  /* ---------- Shadows ---------- */
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-float: 0 18px 40px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 -12px 48px rgba(0, 0, 0, 0.45);

  /* ---------- Layout ---------- */
  --shell-width: 1200px;
  --nav-height: 60px;

  color-scheme: dark;
}

/* ===========================================================
   Light theme - Apple system greys / blue.
   =========================================================== */
html[data-theme="light"] {
  --color-canvas: #f2f2f7;
  --color-surface: #ffffff;
  --color-surface-2: #e5e5ea;
  --color-surface-hover: #ebebf0;
  --color-fill: rgba(120, 120, 128, 0.14);

  --color-text-primary: #000000;
  --color-text-secondary: #3c3c43;
  --color-text-tertiary: #8e8e93;

  --color-accent: #007aff;
  --color-accent-strong: #0062cc;
  --color-accent-soft: rgba(0, 122, 255, 0.12);

  --color-border-hairline: rgba(60, 60, 67, 0.15);
  --color-border-strong: rgba(60, 60, 67, 0.29);

  --color-nav-material: rgba(242, 242, 247, 0.72);
  --color-scrim: rgba(0, 0, 0, 0.35);
  --color-spotlight: rgba(0, 122, 255, 0.12);
  --color-grain: rgba(0, 0, 0, 0.02);

  --color-role-lead: #c77700;
  --color-role-secretary: #8944ab;
  --color-role-tech: #1f8a9e;
  --color-role-exec: #248a3d;

  --color-phosphor: var(--color-role-lead);

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-float: 0 18px 40px rgba(0, 0, 0, 0.14);
  --shadow-sheet: 0 -12px 48px rgba(0, 0, 0, 0.18);

  color-scheme: light;
}