/* Easy Language Software — brand tokens + shared recipes (2026-08-01)
 * Source of truth: the Yip Yap app's slate+emerald design language.
 * Canonical token sheet: the "Yip Yap / Easy Language" design system on
 * claude.ai/design (~/development/yipyap-design-system/tokens.css).
 * Dark mode is the brand's native mode (app values verbatim); light is
 * the derived variant (same slate ink, emerald deepened for contrast).
 * The old indigo #4353ff identity is retired.
 * NEVER restyle the 8 --align-N word-alignment colors — they are
 * identical in the app (colored_sentence.dart) by design. */
:root {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-raised: #F1F5F9;
  --ink: #0F172A;
  --ink-2: #475569;
  --ink-3: #94A3B8;
  --divider: #E2E8F0;

  --accent: #059669;
  --accent-strong: #047857;
  --accent-tint: #D1FAE5;
  --accent-tint-2: #ECFDF5;
  --on-accent: #FFFFFF;

  --success: #388E3C;
  --success-tint: #E8F5E9;
  --miss: #F57C00;
  --miss-tint: #FFF3E0;
  --wrong: #DC2626;
  --wrong-tint: #FDEAEA;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --radius: 12px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --shadow: 0 2px 6px rgba(15, 23, 42, 0.10);

  --align-1: #0072B2; --align-2: #D55E00; --align-3: #009E73;
  --align-4: #AA4499; --align-5: #56B4E9; --align-6: #E69F00;
  --align-7: #EE3377; --align-8: #882255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F172A;
    --surface: #1E293B;
    --surface-raised: #2D3748;
    --ink: rgba(255, 255, 255, 0.90);
    --ink-2: rgba(255, 255, 255, 0.70);
    --ink-3: rgba(255, 255, 255, 0.45);
    --divider: rgba(255, 255, 255, 0.07);

    --accent: #34D399;
    --accent-strong: #6EE7B7;
    --accent-tint: rgba(6, 78, 59, 0.55);
    --accent-tint-2: rgba(6, 78, 59, 0.30);
    --on-accent: #0F172A;

    --success: #81C784;
    --success-tint: #1B5E20;
    --miss: #FFB74D;
    --miss-tint: #E65100;
    --wrong: #EF9A9A;
    --wrong-tint: #7F1D1D;

    --shadow: none;
  }
}

/* ── Shared recipes ── */
body { font-family: var(--font); background: var(--bg); color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 16px; font-weight: 700;
  padding: 12px 16px; border-radius: var(--radius); border: none;
  cursor: pointer; text-decoration: none;
  background: var(--accent); color: var(--on-accent);
}
.btn:hover { background: var(--accent-strong); }
.btn-secondary {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--divider); box-shadow: var(--shadow);
}
.btn-ghost { background: transparent; color: var(--accent); }

.card {
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

.pill {
  display: inline-block; padding: 8px 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--divider);
  background: var(--surface); color: var(--ink-2); text-decoration: none;
}
.pill-accent {
  background: var(--accent-tint); color: var(--accent);
  border-color: transparent; font-weight: 700;
}