/*
 * Tira — Shared Design System Tokens
 *
 * Single source of truth for all four calculators (Baloot/index.html, Trix,
 * Sibeet, Konkan). Every per-file <style> block consumes these via var().
 * Per-file blocks may still declare component-specific styles; they must NOT
 * redeclare tokens defined here.
 *
 * See DESIGN.md at the project root for the design system spec.
 */

:root {
  /* --- Surface -------------------------------------------------- */
  --bg: #F5F5F7;
  --bg-subtle: #ECECEE;

  /* --- Identity ------------------------------------------------- */
  --burgundy: #1C1C1E;
  --burgundy-glow: rgba(28, 28, 30, 0.10);
  --gold: #FFB800;
  --gold-soft: rgba(255, 184, 0, 0.12);
  --gold-text: #8F5C00;  /* darker than #A87000 to clear WCAG AA 4.5:1 on white */

  /* --- Text ----------------------------------------------------- */
  --navy: #1C1C1E;       /* legacy name; canonical text color */
  --text: var(--navy);   /* semantic alias for the same role */
  --cream: #F5F5F7;
  --navy-soft: rgba(28, 28, 30, 0.06);

  /* --- State ---------------------------------------------------- */
  --focus-ring: var(--burgundy);

  /* --- Component bases ----------------------------------------- */
  --card-bg: #FFFFFF;
  --input-bg: #FFFFFF;
  --input-border: rgba(28, 28, 30, 0.12);

  /* --- Elevation (light mode shadows) ------------------------- */
  --shadow-sm: 0 1px 3px rgba(28, 28, 30, 0.06);
  --shadow-md: 0 4px 12px rgba(28, 28, 30, 0.08);
  --shadow-lg: 0 8px 24px rgba(28, 28, 30, 0.10);

  /* --- Shape ---------------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* --- Spacing (informational; per-file styles may not adopt yet) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
}

[data-theme="dark"] {
  --bg: #000000;
  --bg-subtle: #1C1C1E;
  --burgundy: #1C1C1E;
  --burgundy-glow: rgba(255, 184, 0, 0.15);
  --gold: #FFB800;
  --gold-soft: rgba(255, 184, 0, 0.10);
  --gold-text: #FFB800;
  --navy: #F5F5F7;
  --text: var(--navy);
  --navy-soft: rgba(245, 245, 247, 0.06);
  --cream: #F5F5F7;
  --focus-ring: var(--gold);
  --card-bg: #0E0E1C;
  --input-bg: rgba(245, 240, 230, 0.06);
  --input-border: rgba(245, 240, 230, 0.12);
}