/* ══════════════════════════════════════════════════════════════
   Lernwortschatz Multi v2 — Design tokens
   Japanese-stationery palette. Reference: Lernwortschatz_Multi_Plan.docx Appendix C
   Light mode on :root; dark overrides via @media and [data-theme="dark"].
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Palette ── */
  --bg:    #F8F1E4;  /* warm paper – app background */
  --sur:   #F1E5CF;  /* secondary paper – cards, sheets */
  --sur2:  #E8D9BC;  /* recessed paper – inputs, wells */
  --ind:   #355C7D;  /* ink blue – brand, primary CTA */
  --cop:   #B98655;  /* terracotta – secondary CTA, accents */
  --uri:   #9B3A2A;  /* urushi red – Again button, emphasis ONLY */
  --smi:   #2C2C2C;  /* sumi ink – body text */
  --sla:   #6E6253;  /* warm editorial gray – secondary text */
  --tea:   #668C7A;  /* sage – "der" article, neutral accent */
  --ros:   #B58A8A;  /* rose – "die" article */
  --och:   #C9A961;  /* ochre – "das" article */

  /* ── Easing ── */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Spacing scale (4px base) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  /* ── Type scale ── */
  --fs-hero:   38px;  /* German headword (card front) */
  --fs-h1:     24px;  /* home greeting, onboarding h1 */
  --fs-h2:     20px;  /* section headings */
  --fs-body:   16px;  /* primary body copy */
  --fs-label:  14px;  /* labels, button text */
  --fs-meta:   12px;  /* IPA, plurals, article labels */
  --fs-micro:  10px;  /* tiny badges, keyboard hints */

  /* ── Radius ── */
  --r-sm:  8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* ── Shadows ── */
  --sh-card:  0 2px 12px rgba(44, 44, 44, 0.10);
  --sh-sheet: 0 -4px 24px rgba(44, 44, 44, 0.12);
  --sh-btn:   0 2px 0 rgba(44, 44, 44, 0.12);

  /* ── Touch target minimum (Google Play requirement) ── */
  --touch: 48px;

  /* ── Semantic aliases (maps legacy style.css names → palette tokens) ── */
  --bg-card:     var(--sur);
  --bg-elevated: var(--sur2);
  --border:      rgba(44, 44, 44, 0.14);
  --primary:     var(--ind);
  --ind-h:       #244159;
  --primary-h:   var(--ind-h);  /* alias kept for any external CSS */
  --primary-glow:rgba(53, 92, 125, 0.22);
  --secondary:   var(--tea);
  --success:     #3A7A5C;
  --danger:      var(--uri);
  --text:        var(--smi);
  --text-muted:  var(--sla);
  --text-dim:    #888;
  --radius-sm:   var(--r-sm);
  --radius:      var(--r-md);
  --radius-lg:   var(--r-lg);
  --shadow:      var(--sh-card);
  --shadow-glow: 0 0 0 3px rgba(53, 92, 125, 0.22);

  /* ── Accessible text variants (pass AA 4.5:1 on their respective surfaces) ── */
  --cop-text:     #7A4E28;  /* darkened terracotta for text on light bg */
  --ind-text:     var(--ind); /* ink blue as text on light bg — passes AA */

  /* ── Tints and scrims ── */
  --scrim:        rgba(0, 0, 0, 0.55);
  --success-tint: rgba(58, 122, 92, 0.08);
  --uri-tint:     rgba(155, 58, 42, 0.08);
  --ind-tint:     rgba(53, 92, 125, 0.14);
  --ind-border:   rgba(53, 92, 125, 0.30);
  --ind-check:    rgba(53, 92, 125, 0.25);
  --cop-tint:     rgba(185, 134, 85, 0.08);
}

/* ══ Dark mode ══════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:   #243746;  /* soft graphite */
    --sur:  #2E4152;  /* dark surface */
    --sur2: #374D5F;  /* recessed dark */
    --smi:  #F1E5CF;  /* warm paper – body text on dark */
    --sla:  #8B919A;  /* muted text for dark */
    /* Article colors: same hue, lighter value for contrast on dark */
    --tea:  #7DBDBD;
    --ros:  #D4ACAC;
    --och:  #DDB84D;
    /* Accessible text on dark surfaces — light values pass 4.5:1 on --sur dark */
    --cop-text:  #D4A470;  /* lightened terracotta text */
    --ind-text:  #7AB4CC;  /* lightened ink blue text */
    --sh-card:  0 2px 12px rgba(0, 0, 0, 0.35);
    --sh-sheet: 0 -4px 24px rgba(0, 0, 0, 0.40);
    --sh-btn:   0 2px 0 rgba(0, 0, 0, 0.35);
    --border:      rgba(241, 229, 207, 0.14);
    --text-dim:    #6B7280;
    --shadow:      0 2px 12px rgba(0, 0, 0, 0.35);
    --ind-tint:    rgba(122, 180, 204, 0.12);
    --ind-border:  rgba(122, 180, 204, 0.28);
    --ind-check:   rgba(122, 180, 204, 0.22);
    --cop-tint:    rgba(185, 134, 85, 0.18);
    --uri-tint:    rgba(155, 58, 42, 0.18);
    --success-tint:rgba(58, 122, 92, 0.18);
    --scrim:       rgba(0, 0, 0, 0.65);
  }
}

[data-theme="dark"] {
  --bg:   #243746;
  --sur:  #2E4152;
  --sur2: #374D5F;
  --smi:  #F1E5CF;
  --sla:  #8B919A;
  --tea:  #7DBDBD;
  --ros:  #D4ACAC;
  --och:  #DDB84D;
  --cop-text:  #D4A470;
  --ind-text:  #7AB4CC;
  --sh-card:  0 2px 12px rgba(0, 0, 0, 0.35);
  --sh-sheet: 0 -4px 24px rgba(0, 0, 0, 0.40);
  --sh-btn:   0 2px 0 rgba(0, 0, 0, 0.35);
  --border:      rgba(241, 229, 207, 0.14);
  --text-dim:    #6B7280;
  --shadow:      0 2px 12px rgba(0, 0, 0, 0.35);
  --ind-tint:    rgba(122, 180, 204, 0.12);
  --ind-border:  rgba(122, 180, 204, 0.28);
  --ind-check:   rgba(122, 180, 204, 0.22);
  --cop-tint:    rgba(185, 134, 85, 0.18);
  --uri-tint:    rgba(155, 58, 42, 0.18);
  --success-tint:rgba(58, 122, 92, 0.18);
  --scrim:       rgba(0, 0, 0, 0.65);
}

[data-theme="light"] {
  --bg:   #F8F1E4;
  --sur:  #F1E5CF;
  --sur2: #E8D9BC;
  --smi:  #2C2C2C;
  --sla:  #6E6253;
  --tea:  #668C7A;
  --ros:  #B58A8A;
  --och:  #C9A961;
  --cop-text:  #7A4E28;
  --ind-text:  var(--ind);
  --sh-card:  0 2px 12px rgba(44, 44, 44, 0.10);
  --sh-sheet: 0 -4px 24px rgba(44, 44, 44, 0.12);
  --sh-btn:   0 2px 0 rgba(44, 44, 44, 0.12);
}