/*
  Sicomi design tokens. This is the only file that holds colors, fonts and radii.
  Components in styles.css read these variables and never use raw values.

  To re-skin: edit the values below, or add a new [data-theme="..."] block and
  register it in js/theme.js. See THEMING.md.
*/

/* ---------- Shared tokens (all themes) ---------- */
:root {
  /* Typography */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', Georgia, serif;
  --display-weight: 400;

  /* Shape */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Status colors */
  --success: #4CC38A;
  --success-soft: color-mix(in srgb, var(--success) 14%, transparent);
  --danger: #E5484D;

  /* Anything drawn on top of artwork (hero, posters, player) stays light in every theme */
  --on-image: #FFFFFF;
  --on-image-muted: rgba(255, 255, 255, 0.78);
  --on-image-btn: rgba(255, 255, 255, 0.12);
  --on-image-btn-border: rgba(255, 255, 255, 0.18);
  --hero-scrim: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0) 100%);
  --image-ring: rgba(255, 255, 255, 0.06);
  --progress-track: rgba(255, 255, 255, 0.2);
  --scrim-soft: rgba(0, 0, 0, 0.45);
  --caption-bg: rgba(0, 0, 0, 0.6);

  /* Player is always dark, like a cinema */
  --player-bg: #000000;
  --player-controls: #0B0B0D;
  --player-btn: rgba(255, 255, 255, 0.08);
  --player-btn-hover: rgba(255, 255, 255, 0.16);

  /* Accent defaults (overridden by [data-accent]) */
  --accent: #F5B83D;
  --accent-ink: #1A1305;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ---------- Theme: Cinema (dark, default) ---------- */
:root,
[data-theme="cinema"] {
  color-scheme: dark;
  --bg: #0B0B0D;
  --surface: #141417;
  --surface-2: #1D1D21;
  --surface-3: #26262B;
  --text: #F2F0EA;
  --muted: #9A978F;
  --border: #2A2A2F;
  --border-strong: #3A3A40;
  --header-bg: rgba(11, 11, 13, 0.88);
  --overlay: rgba(0, 0, 0, 0.7);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --switch-off: #3A3A40;
  --switch-knob: #FFFFFF;
  --rank-stroke: #77756E;
  --pay-bg: #FFFFFF;
  --pay-ink: #000000;
}

/* ---------- Theme: Daylight (light) ---------- */
[data-theme="daylight"] {
  color-scheme: light;
  --bg: #FAF9F6;
  --surface: #FFFFFF;
  --surface-2: #F1EFEA;
  --surface-3: #E7E4DD;
  --text: #17161A;
  --muted: #6B6964;
  --border: #E4E1DA;
  --border-strong: #CFCBC2;
  --header-bg: rgba(250, 249, 246, 0.9);
  --overlay: rgba(20, 18, 24, 0.45);
  --shadow: 0 12px 40px rgba(20, 18, 24, 0.14);
  --switch-off: #CFCBC2;
  --switch-knob: #FFFFFF;
  --rank-stroke: #A9A59C;
  --pay-bg: #000000;
  --pay-ink: #FFFFFF;
}

/* ---------- Accent colors ---------- */
[data-accent="gold"]   { --accent: #F5B83D; --accent-ink: #1A1305; }
[data-accent="blue"]   { --accent: #3D7BFF; --accent-ink: #FFFFFF; }
[data-accent="red"]    { --accent: #E5484D; --accent-ink: #FFFFFF; }
[data-accent="violet"] { --accent: #7C6CF2; --accent-ink: #FFFFFF; }
[data-accent="mono"]   { --accent: var(--text); --accent-ink: var(--bg); }

/* Gold is too pale to read as text on a light background, so deepen it there */
[data-theme="daylight"][data-accent="gold"] { --accent: #C98A12; --accent-ink: #FFFFFF; }