/* ============================================================
 * Netabor Launch 2027 — v2 Design Tokens (overlay)
 * ----------------------------------------------------------------
 * Loaded AFTER /staging/platform/assets/tokens.css.
 * Adds Modern-hybrid layer per design brief sekce 7-8:
 *   - Pastel pillar washes (subtle 4-color rule, brief sekce 8)
 *   - Chunky radii pro cards/buttons (--r-v2-*)
 *   - Editorial serif na h1 hero (--ff-serif Instrument Serif)
 *   - Stat tile tokens (--duo-stat-*) — anti-Duolingo (no flame/gem
 *     copy, ale color tokens jsou OK pro stats)
 *
 * STRICT NON-OVERRIDE: nepřepisuje existující tokens.css proměnné.
 * Pouze přidává nové (--c-pastel-*, --r-v2-*, --duo-stat-*, --ff-*).
 * Existující stránky v /staging/platform/* zůstávají vizuálně identické.
 *
 * Žádný !important. Žádné global selector overrides.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* Pastel pillar washes (brief sekce 8 — 10–12 % opacity equivalent
   * překlad přes opaque hex pro CSS efektivitu na velkých plochách.
   * Použití: hero gradient overlay + section background. Nikdy ne na
   * non-pillar pages — tam zůstává neutral palette.)
   */
  --c-pastel-yellow: #FFF4C2;   /* Kids accent wash */
  --c-pastel-coral:  #FFE2DD;   /* Teens accent wash */
  --c-pastel-teal:   #D6F3F4;   /* Rodice accent wash */
  --c-pastel-purple: #E5DFFB;   /* Klub accent wash */
  --c-pastel-mint:   #D9F5E4;   /* Success / safe context (AI tutor parent badge) */
  --c-pastel-pink:   #FBE0EF;   /* Audio specialty wash */

  /* Modern-hybrid radii (brief sekce 7 — soft, premium feel)
   * --r-* z tokens.css zůstávají. --r-v2-* používáme pro v2-* třídy. */
  --r-v2-sm: 10px;
  --r-v2-md: 16px;
  --r-v2-lg: 22px;
  --r-v2-xl: 32px;

  /* Warm surface alt — slightly cream tinted backgrounds pro section breaks
   * (brief sekce 4 anchor "Stripe — generous whitespace, confident"). */
  --c-surface-warm: #FBFAF6;

  /* Editorial serif (brief sekce 7 — Instrument Serif jako display accent
   * pro hero h1 + editorial sections, fallback Poppins).
   * Pouze pro display použití přes .v2-serif utility — ne globally. */
  --ff-serif: 'Instrument Serif', 'Tiempos Headline', Georgia, serif;

  /* Stat tile color trio (dashboard 4-stat grid).
   * Anti-Duolingo lingo: nepoužíváme "flame" / "gem" v copy, ale color
   * tokens jsou neutrální pojmenování průniků.
   * Hodnoty: tonal trio (bg / fg-text / border). */
  --duo-stat-streak-bg:    #FFF1E5;
  --duo-stat-streak-fg:    #FF7A1A;
  --duo-stat-streak-bd:    #FFD9B8;
  --duo-stat-progress-bg:  #E5F8EC;
  --duo-stat-progress-fg:  #1F9D5C;
  --duo-stat-progress-bd:  #BFE9CD;
  --duo-stat-coaching-bg:  #E5F4FA;
  --duo-stat-coaching-fg:  #1098C9;
  --duo-stat-coaching-bd:  #BFE2EE;
  --duo-stat-club-bg:      var(--c-pastel-purple);
  --duo-stat-club-fg:      #6B46E5;
  --duo-stat-club-bd:      rgba(107, 70, 229, 0.30);

  /* Chunky border-bottom pattern (Modern signature) — používá se na
   * v2-tier-card, v2-content-card, v2-stat. Hodnoty per intensity. */
  --bd-chunky-2: 4px;
  --bd-chunky-3: 5px;
  --bd-chunky-4: 6px;

  /* Pillar "ink" — tmavší varianta pillar accentu pro text na světlých bg.
   * Audit M3 fix — použito v inline h1Html accent spans (kids/teens). */
  --c-pillar-kids-ink:   #8a6b00;
  --c-pillar-teens-ink:  #b83a29;
  --c-pillar-rodice-ink: var(--c-brand-teal-dark);
  --c-pillar-klub-ink:   var(--c-pillar-klub);
}

/* Dark mode parity — pastels jsou tinted (rgba) v dark mode, aby zůstaly
 * čitelné jako accent washes ne jako solid backgrounds. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Pillar ink — v dark mode brighter pro WCAG AA contrast na dark bg */
    --c-pillar-kids-ink:   #FDCF00;
    --c-pillar-teens-ink:  #FF8B7A;
    --c-pillar-rodice-ink: #2DD8E0;
    --c-pillar-klub-ink:   #9B7EE8;

    --c-pastel-yellow: rgba(253, 207, 0, 0.12);
    --c-pastel-coral:  rgba(255, 107, 91, 0.14);
    --c-pastel-teal:   rgba(0, 180, 188, 0.16);
    --c-pastel-purple: rgba(139, 107, 245, 0.18);
    --c-pastel-mint:   rgba(16, 185, 129, 0.16);
    --c-pastel-pink:   rgba(236, 72, 153, 0.16);
    --c-surface-warm:  #14181F;

    --duo-stat-streak-bg:   rgba(255, 122, 26, 0.12);
    --duo-stat-streak-bd:   rgba(255, 122, 26, 0.30);
    --duo-stat-progress-bg: rgba(31, 157, 92, 0.14);
    --duo-stat-progress-bd: rgba(31, 157, 92, 0.32);
    --duo-stat-coaching-bg: rgba(16, 152, 201, 0.14);
    --duo-stat-coaching-bd: rgba(16, 152, 201, 0.32);
    --duo-stat-club-bg:     rgba(107, 70, 229, 0.18);
    --duo-stat-club-bd:     rgba(107, 70, 229, 0.40);
  }
}

:root[data-theme="dark"] {
  /* Pillar ink — v dark mode brighter pro WCAG AA contrast na dark bg */
  --c-pillar-kids-ink:   #FDCF00;
  --c-pillar-teens-ink:  #FF8B7A;
  --c-pillar-rodice-ink: #2DD8E0;
  --c-pillar-klub-ink:   #9B7EE8;

  --c-pastel-yellow: rgba(253, 207, 0, 0.12);
  --c-pastel-coral:  rgba(255, 107, 91, 0.14);
  --c-pastel-teal:   rgba(0, 180, 188, 0.16);
  --c-pastel-purple: rgba(139, 107, 245, 0.18);
  --c-pastel-mint:   rgba(16, 185, 129, 0.16);
  --c-pastel-pink:   rgba(236, 72, 153, 0.16);
  --c-surface-warm:  #14181F;

  --duo-stat-streak-bg:   rgba(255, 122, 26, 0.12);
  --duo-stat-streak-bd:   rgba(255, 122, 26, 0.30);
  --duo-stat-progress-bg: rgba(31, 157, 92, 0.14);
  --duo-stat-progress-bd: rgba(31, 157, 92, 0.32);
  --duo-stat-coaching-bg: rgba(16, 152, 201, 0.14);
  --duo-stat-coaching-bd: rgba(16, 152, 201, 0.32);
  --duo-stat-club-bg:     rgba(107, 70, 229, 0.18);
  --duo-stat-club-bd:     rgba(107, 70, 229, 0.40);
}

/* Reduced motion respect — pravidlo přesunuto na konec v2-components.css aby
 * source-order win override existující :hover (load: tokens → components). */