/* CCSE 2026 — Color tokens
   Palette: Spanish-flag accents (deep red + warm yellow) over clean white/cream,
   dark navy ink. App-accent hues sampled from the iOS app screenshots. */

:root {
  /* ---- Brand: red ---- */
  --red-700: #A50919;
  --red-600: #C60B1E;   /* brand red */
  --red-500: #DE2436;
  --red-100: #F9D3D7;
  --red-50:  #FCEDEE;

  /* ---- Brand: yellow ---- */
  --yellow-500: #F0B400;
  --yellow-400: #FFC400; /* brand yellow */
  --yellow-300: #FFD65C;
  --yellow-100: #FFEFB3;
  --yellow-50:  #FFF8E1;

  /* ---- Ink / navy neutrals ---- */
  --navy-950: #0A1428;
  --navy-900: #101C36;  /* primary ink */
  --navy-800: #1B2A47;
  --navy-700: #324158;
  --navy-500: #5C6B82;
  --navy-400: #8492A6;
  --navy-300: #B9C2D0;
  --navy-200: #D8DEE7;
  --navy-100: #EAEEF3;
  --navy-50:  #F5F7FA;

  /* ---- Base surfaces ---- */
  --white: #FFFFFF;
  --cream: #FBF7EF;      /* warm off-white section background */
  --cream-deep: #F4EDDE;

  /* ---- App accents (sampled from app UI) ---- */
  --app-blue: #3E7BE8;       /* Mock Test tile */
  --app-steel: #6C9BD2;      /* quiz header bar */
  --app-green: #10A96B;      /* Bookmarks tile */
  --app-purple: #7B2FE3;     /* Failed Questions tile */
  --app-orange: #F7A81B;     /* corner badges (Top 80 / Repaso) */
  --state-correct: #2F9E44;  /* correct answer row */
  --state-wrong: #C62F2F;    /* wrong answer row */

  /* ---- Semantic aliases (light) ---- */
  --surface-page: var(--white);
  --surface-alt: var(--cream);
  --surface-card: var(--white);
  --surface-sunken: var(--navy-50);
  --surface-inverse: var(--navy-950);

  --text-primary: var(--navy-900);
  --text-secondary: var(--navy-700);
  --text-muted: var(--navy-500);
  --text-inverse: #F4F7FB;
  --text-on-accent: #FFFFFF;

  --accent: var(--red-600);
  --accent-hover: var(--red-700);
  --accent-soft: var(--red-50);
  --accent-2: var(--yellow-400);
  --accent-2-soft: var(--yellow-50);

  --border-subtle: #E4E8EF;
  --border-strong: #C9D1DD;
  --focus-ring: rgba(198, 11, 30, 0.28);

  /* ---- Flag motif (use thin: 3–6px stripes, underlines, progress tracks) ---- */
  --flag-stripe-h: linear-gradient(90deg, var(--red-600) 0%, var(--red-600) 30%, var(--yellow-400) 30%, var(--yellow-400) 70%, var(--red-600) 70%, var(--red-600) 100%);
  --flag-stripe-v: linear-gradient(180deg, var(--red-600) 0%, var(--red-600) 30%, var(--yellow-400) 30%, var(--yellow-400) 70%, var(--red-600) 70%, var(--red-600) 100%);

  /* ---- Hero glow (subtle animated gradient base) ---- */
  --hero-glow-red: rgba(198, 11, 30, 0.07);
  --hero-glow-yellow: rgba(255, 196, 0, 0.12);
}

[data-theme="dark"] {
  --surface-page: #0B1322;
  --surface-alt: #0E1830;
  --surface-card: #152139;
  --surface-sunken: #0E1830;
  --surface-inverse: #F4F7FB;

  --text-primary: #F2F6FC;
  --text-secondary: #C3CDDC;
  --text-muted: #8B99AF;
  --text-inverse: var(--navy-900);
  --text-on-accent: #FFFFFF;

  --accent: #F2545F;
  --accent-hover: #FF6B75;
  --accent-soft: rgba(242, 84, 95, 0.14);
  --accent-2: #FFC400;
  --accent-2-soft: rgba(255, 196, 0, 0.12);

  --border-subtle: #243252;
  --border-strong: #33456B;
  --focus-ring: rgba(242, 84, 95, 0.4);

  --hero-glow-red: rgba(242, 84, 95, 0.12);
  --hero-glow-yellow: rgba(255, 196, 0, 0.08);
}