/**
 * LEARNature-ly — Shared UI Design Tokens
 *
 * Provides --ln-* CSS custom properties used across all games.
 * Each game may override these in its own :root block.
 * This file prevents 404 console errors on games that reference it.
 *
 * Loaded by: 19+ games via  ../../shared/dist/ui/styles.css
 */

:root {
  /* ── Green Palette ──────────────────────────────────── */
  --ln-green-800: #065f46;
  --ln-green-700: #059669;
  --ln-green-600: #10b981;
  --ln-green-500: #34d399;
  --ln-green-400: #6ee7b7;
  --ln-green-300: #a7f3d0;
  --ln-green-100: #d1fae5;
  --ln-green-50:  #ecfdf5;

  /* ── Semantic Colours ───────────────────────────────── */
  --ln-bg:          #f0fdf4;
  --ln-text:        #064e3b;
  --ln-text-light:  #065f46;
  --ln-surface:     #ffffff;
  --ln-shadow:      0 2px 8px rgba(5, 150, 105, 0.15);

  --ln-danger:      #ef4444;
  --ln-warning:     #f59e0b;
  --ln-info:        #3b82f6;
  --ln-success:     #10b981;

  /* ── Typography ─────────────────────────────────────── */
  --ln-font:       'Segoe UI', system-ui, -apple-system, sans-serif;
  --ln-font-size:  16px;

  /* ── Shape & Motion ─────────────────────────────────── */
  --ln-radius:     12px;
  --ln-radius-sm:  8px;
  --ln-radius-xs:  4px;
  --ln-transition: 0.2s ease;

  /* ── Accessibility ──────────────────────────────────── */
  --ln-touch-min: 44px;   /* minimum touch target */

  /* ── Dark Mode Overrides ────────────────────────────── */
  --ln-dark:         #022c22;
  --ln-dark-surface: #064e3b;
  --ln-dark-card:    #065f46;
}

/* ── Focus-Visible (WCAG 2.2) ──────────────────────── */
:focus-visible {
  outline: 3px solid var(--ln-green-600, #10b981);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ── Minimum Touch Targets (WCAG 2.2 — 44x44px) ──── */
button,
[role="button"],
a[href],
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
summary {
  min-height: var(--ln-touch-min, 44px);
  min-width: var(--ln-touch-min, 44px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ln-bg:         #022c22;
    --ln-text:       #d1fae5;
    --ln-text-light: #a7f3d0;
    --ln-surface:    #064e3b;
    --ln-shadow:     0 2px 8px rgba(0, 0, 0, 0.4);
  }
}