/*
 * Color tokens ported 1:1 from the Android app's Material3 color scheme
 * (dev.hristovski.nikola.android.trifectaword.ui.theme.Color.kt / Theme.kt).
 *
 * Theme is applied via a `data-theme="light"|"dark"` attribute on <html>, set by js/theme.js.
 * `data-theme="system"` is never set on the element directly — system mode resolves to light or
 * dark at apply-time based on prefers-color-scheme, then re-resolves live if the OS setting
 * changes while `system` is selected.
 */

:root,
html[data-theme="light"] {
  color-scheme: light;

  --primary: #0060A9;           /* BlueLight */
  --on-primary: #FFFFFF;
  --primary-container: #D6EFFF; /* BlueContainerLight */
  --on-primary-container: #0A2A43;

  --secondary: #00897B;         /* TealLight */
  --on-secondary: #FFFFFF;
  --secondary-container: #CDEAE6; /* TealContainerLight */
  --on-secondary-container: #07332E;

  --tertiary: #2E7D9A;          /* CyanLight */
  --on-tertiary: #FFFFFF;
  --tertiary-container: #BFE3F2; /* CyanContainerLight */
  --on-tertiary-container: #0A2A43;

  --background: #F3F9FE;        /* CanvasLight */
  --on-background: #0A2A43;

  --surface: #D6EFFF;           /* SurfaceLight */
  --on-surface: #0A2A43;
  --surface-variant: #E3F1FB;
  --on-surface-variant: #3D6480;

  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #EAF5FE;
  --surface-container: #E3F1FB;
  --surface-container-high: #D6EFFF;
  --surface-container-highest: #C7E7FB;

  --outline: #9DB8CC;
  --outline-variant: #C4D8E6;

  /* Inverted pair, for surfaces that deliberately contrast with the page — the tooltip bubble. */
  --inverse-surface: #12303F;
  --inverse-on-surface: #EAF5FE;

  --error: #E5533D;
  --on-error: #FFFFFF;
  --error-container: #FBE2DD;
  --on-error-container: #5C1B10;

  /* Game-specific (same in both themes) */
  --border-cyan: #45D7EE;
  --border-gold: #E6B84C;

  --letter-green: #5CB85C;
  --letter-yellow: #E0C34C;
  --letter-on-fill: #FFFFFF;
  --letter-hidden-bg: #FAFDFF;
  --letter-hidden-border: #7FA8C4;

  /* Google sign-in button (light) */
  --google-btn-bg: #FFFFFF;
  --google-btn-fg: #1F1F1F;
  --google-btn-border: #747775;

  --rank-gold: #FFC93C;
  --rank-silver: #C0C7CE;
  --rank-bronze: #CD8B5B;
  --rank-top3-fg: #3A2D00;
  --current-user-row: #2E7DF6;
  --current-user-row-border: #1B5FC9;

  --shadow-color: rgba(0, 96, 169, 0.25);

  /* First-run tutorial (coachmark) overlay. One single dim value is used for every step so the
     screen never changes brightness as the player moves through the tutorial. */
  --coachmark-dim: rgba(6, 26, 43, 0.62);
  --coachmark-ring: #0B87C7;
  --coachmark-ring-glow: rgba(69, 215, 238, 0.35);
  --coachmark-card-bg: #FFFFFF;
  --coachmark-card-border: rgba(10, 42, 67, 0.12);
  --coachmark-card-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --primary: #6FB6F0;           /* BlueDark */
  --on-primary: #06243B;
  --primary-container: #0A3A5E; /* BlueContainerDark */
  --on-primary-container: #CDE6FB;

  --secondary: #4DB6AC;         /* TealDark */
  --on-secondary: #00382F;
  --secondary-container: #00504A; /* TealContainerDark */
  --on-secondary-container: #B2DFD9;

  --tertiary: #7FC4DE;          /* CyanDark */
  --on-tertiary: #062733;
  --tertiary-container: #14424F; /* CyanContainerDark */
  --on-tertiary-container: #CDEAF5;

  --background: #0B1E2B;        /* CanvasDark */
  --on-background: #DCEBF5;

  --surface: #102A3C;           /* SurfaceDark */
  --on-surface: #DCEBF5;
  --surface-variant: #2A3F4D;
  --on-surface-variant: #B6C9D6;

  --surface-container-lowest: #071520;
  --surface-container-low: #0E2433;
  --surface-container: #132B3C;
  --surface-container-high: #1B3547;
  --surface-container-highest: #234153;

  --outline: #577283;
  --outline-variant: #35505F;

  /* Inverted pair, for surfaces that deliberately contrast with the page — the tooltip bubble. */
  --inverse-surface: #DCEBF5;
  --inverse-on-surface: #0B1E2B;

  --error: #FF7A66;
  --on-error: #2A0A06;
  --error-container: #4A1810;
  --on-error-container: #FFDAD3;

  --border-cyan: #45D7EE;
  --border-gold: #E6B84C;

  --letter-green: #4C9F4C;
  --letter-yellow: #C9A227;
  --letter-on-fill: #FFFFFF;
  --letter-hidden-bg: #3E5B70;
  --letter-hidden-border: #7FA3BC;

  --google-btn-bg: #131314;
  --google-btn-fg: #E3E3E3;
  --google-btn-border: #8E918F;

  --rank-gold: #FFC93C;
  --rank-silver: #C0C7CE;
  --rank-bronze: #CD8B5B;
  --rank-top3-fg: #3A2D00;
  --current-user-row: #2E7DF6;
  --current-user-row-border: #1B5FC9;

  --shadow-color: rgba(0, 0, 0, 0.4);

  /* See the light theme block: same single-value dimming, tuned for the dark canvas. */
  --coachmark-dim: rgba(0, 0, 0, 0.66);
  --coachmark-ring: #45D7EE;
  --coachmark-ring-glow: rgba(69, 215, 238, 0.3);
  --coachmark-card-bg: #1B3547;
  --coachmark-card-border: rgba(220, 235, 245, 0.16);
  --coachmark-card-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}