/* Spark Design System — Tokens
 * All values in oklch for harmonic relationships.
 * Light + Dark themes. Two palettes: neutral + player. */

:root {
  /* ─────────────────────────────────────────────
   * NEUTRALS — warm-cool balanced, slight tint
   * ───────────────────────────────────────────── */
  --bg-0: oklch(0.13 0.005 60);   /* deepest — page bg dark */
  --bg-1: oklch(0.17 0.005 60);   /* surface raised */
  --bg-2: oklch(0.22 0.006 60);   /* surface higher */
  --bg-3: oklch(0.28 0.006 60);   /* surface highest / hover */

  --bg-light-0: oklch(0.99 0.003 80);
  --bg-light-1: oklch(0.97 0.004 80);
  --bg-light-2: oklch(0.94 0.005 80);
  --bg-light-3: oklch(0.90 0.006 80);

  --fg-0: oklch(0.98 0.003 80);   /* highest contrast text on dark */
  --fg-1: oklch(0.85 0.004 80);   /* secondary */
  --fg-2: oklch(0.66 0.005 80);   /* tertiary / labels */
  --fg-3: oklch(0.45 0.005 80);   /* disabled */

  --fg-light-0: oklch(0.18 0.005 60);
  --fg-light-1: oklch(0.36 0.005 60);
  --fg-light-2: oklch(0.55 0.005 60);
  --fg-light-3: oklch(0.72 0.005 60);

  --border-1: oklch(1 0 0 / 0.08);
  --border-2: oklch(1 0 0 / 0.14);
  --border-light-1: oklch(0 0 0 / 0.07);
  --border-light-2: oklch(0 0 0 / 0.13);

  /* ─────────────────────────────────────────────
   * SPARK BRAND — refined orange
   * ───────────────────────────────────────────── */
  --spark: oklch(0.74 0.165 55);          /* main */
  --spark-hover: oklch(0.78 0.16 55);
  --spark-press: oklch(0.68 0.165 55);
  --spark-soft: oklch(0.74 0.16 55 / 0.14);
  --spark-line: oklch(0.74 0.16 55 / 0.35);

  /* ─────────────────────────────────────────────
   * PLAYER PALETTE — armonized via oklch
   * Same lightness (0.65) and chroma (0.16),
   * hues equispaciadas. Up to 6 players.
   * Number is the canonical seat order.
   * ───────────────────────────────────────────── */
  --p1: oklch(0.66 0.18 28);    /* coral / red */
  --p2: oklch(0.72 0.17 75);    /* amber */
  --p3: oklch(0.72 0.17 145);   /* green */
  --p4: oklch(0.66 0.15 230);   /* blue */
  --p5: oklch(0.62 0.18 295);   /* violet */
  --p6: oklch(0.66 0.20 340);   /* magenta */

  /* Player tints for backgrounds (very low chroma + low lightness) */
  --p1-bg: oklch(0.22 0.045 28);
  --p2-bg: oklch(0.22 0.045 75);
  --p3-bg: oklch(0.22 0.045 145);
  --p4-bg: oklch(0.22 0.045 230);
  --p5-bg: oklch(0.22 0.045 295);
  --p6-bg: oklch(0.22 0.05 340);

  /* High-saturation versions for the actual life screen — keep punch */
  --p1-bold: oklch(0.62 0.20 28);
  --p2-bold: oklch(0.72 0.18 75);
  --p3-bold: oklch(0.70 0.20 145);
  --p4-bold: oklch(0.62 0.18 230);
  --p5-bold: oklch(0.55 0.21 295);
  --p6-bold: oklch(0.62 0.22 340);

  /* ─────────────────────────────────────────────
   * SEMANTIC
   * ───────────────────────────────────────────── */
  --ok:    oklch(0.72 0.17 145);
  --warn:  oklch(0.78 0.165 75);
  --err:   oklch(0.66 0.20 28);
  --info:  oklch(0.66 0.15 230);

  /* ─────────────────────────────────────────────
   * RADII
   * ───────────────────────────────────────────── */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ─────────────────────────────────────────────
   * SPACING (4pt base)
   * ───────────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* ─────────────────────────────────────────────
   * TYPE
   * ───────────────────────────────────────────── */
  --font-text: -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  --font-display: -apple-system-rounded, "SF Pro Rounded", ui-rounded, "SF Pro Text", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — match iOS HIG roughly */
  --t-caption: 11px;
  --t-footnote: 13px;
  --t-body: 16px;
  --t-headline: 18px;
  --t-title3: 20px;
  --t-title2: 24px;
  --t-title1: 30px;
  --t-display: 56px;
  --t-mega: 96px;
  --t-life: 140px;

  /* Weights */
  --w-regular: 400;
  --w-medium: 510;
  --w-semibold: 590;
  --w-bold: 700;
  --w-heavy: 820;

  /* ─────────────────────────────────────────────
   * ANIMATION
   * ───────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-normal: 240ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────
 * LIGHT THEME OVERRIDE
 * ───────────────────────────────────────────── */
.theme-light {
  --bg-0: var(--bg-light-0);
  --bg-1: var(--bg-light-1);
  --bg-2: var(--bg-light-2);
  --bg-3: var(--bg-light-3);
  --fg-0: var(--fg-light-0);
  --fg-1: var(--fg-light-1);
  --fg-2: var(--fg-light-2);
  --fg-3: var(--fg-light-3);
  --border-1: var(--border-light-1);
  --border-2: var(--border-light-2);
  /* player tints brighten in light mode */
  --p1-bg: oklch(0.94 0.04 28);
  --p2-bg: oklch(0.94 0.05 75);
  --p3-bg: oklch(0.94 0.05 145);
  --p4-bg: oklch(0.94 0.045 230);
  --p5-bg: oklch(0.94 0.045 295);
  --p6-bg: oklch(0.94 0.05 340);
}

/* ─────────────────────────────────────────────
 * BASE
 * ───────────────────────────────────────────── */
.spark {
  font-family: var(--font-text);
  color: var(--fg-0);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "ss02" 1;
}
.spark *, .spark *::before, .spark *::after { box-sizing: border-box; }

/* Display / numerals — tabular */
.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "calt" 1;
  letter-spacing: -0.01em;
}
.num-tight { letter-spacing: -0.04em; }

/* Label small caps style for section headers */
.eyebrow {
  font: var(--w-semibold) var(--t-footnote)/1 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Utility */
.divider { height: 1px; background: var(--border-1); }
.divider-strong { height: 1px; background: var(--border-2); }

/* Input / Textarea placeholder */
.spark input::placeholder,
.spark textarea::placeholder { color: var(--fg-3); }