/* playful.css - Playful Design System
 * Loaded before user styles.css. Provides Playful design tokens.
 */

/* ============================================
 * 1. Typography
 * ============================================
 * Inter is loaded via Google Fonts in the preamble.
 */
:root {
  /* Font stacks */
  --playful-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --playful-font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

  /* Type scale (~1.25 ratio) */
  --playful-text-xs: 0.75rem;     /* 12px */
  --playful-text-sm: 0.875rem;    /* 14px */
  --playful-text-base: 1rem;      /* 16px */
  --playful-text-lg: 1.125rem;    /* 18px */
  --playful-text-xl: 1.25rem;     /* 20px */
  --playful-text-2xl: 1.5rem;     /* 24px */
  --playful-text-3xl: 1.875rem;   /* 30px */
  --playful-text-4xl: 2.25rem;    /* 36px */
  --playful-text-5xl: 3rem;       /* 48px */

  /* Line heights */
  --playful-leading-none: 1;
  --playful-leading-tight: 1.25;
  --playful-leading-snug: 1.375;
  --playful-leading-normal: 1.5;
  --playful-leading-relaxed: 1.625;

  /* Font weights */
  --playful-font-light: 300;
  --playful-font-normal: 400;
  --playful-font-medium: 500;
  --playful-font-semibold: 600;
  --playful-font-bold: 700;
}

body {
  font-family: var(--playful-font-sans);
  margin: 0;
}

/* ============================================
 * 2. Shadow / Elevation
 * ============================================ */
:root {
  --playful-shadow-xs: 0 1px 2px oklch(0% 0 0 / 0.05);
  --playful-shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.1),
                       0 1px 2px oklch(0% 0 0 / 0.06);
  --playful-shadow-md: 0 4px 6px oklch(0% 0 0 / 0.1),
                       0 2px 4px oklch(0% 0 0 / 0.06);
  --playful-shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.1),
                       0 4px 6px oklch(0% 0 0 / 0.05);
  --playful-shadow-xl: 0 20px 25px oklch(0% 0 0 / 0.1),
                       0 8px 10px oklch(0% 0 0 / 0.04);
  --playful-shadow-2xl: 0 25px 50px oklch(0% 0 0 / 0.25);
}

/* ============================================
 * 3. Surface Utilities
 * ============================================
 * Hue-neutral utilities for overlays, scrims, glassmorphic cards.
 * Safe to use regardless of the app's palette.
 */
:root {
  --playful-surface-overlay: oklch(0% 0 0 / 0.5);
  --playful-surface-glass: oklch(100% 0 0 / 0.8);
  --playful-surface-scrim: oklch(0% 0 0 / 0.3);
}

/* ============================================
 * 4. Dialog primitive
 * ============================================
 * Native <dialog> positioning is fragile: the UA stylesheet centers
 * via `margin: auto`, but Tailwind Preflight and utility classes can
 * neutralize that and pin the dialog to the top-left. This class
 * locks in a safe centered layout plus a default backdrop.
 *
 * Usage: <dialog class="playful-dialog"> ... </dialog>
 * Open with dialog.showModal(); close with dialog.close().
 */
.playful-dialog {
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  max-width: min(92vw, 560px);
  max-height: 90vh;
  overflow: visible;
}
.playful-dialog::backdrop {
  background: var(--playful-surface-overlay);
}

/* ============================================
 * 5. Toast animation keyframes
 * ============================================
 * Reusable slide-in / slide-out for transient toast messages.
 * Apply to the toast element; style everything else (color, size,
 * position) with Tailwind utilities or your own app styles.
 *
 * Usage: animation: playful-toast-in 0.3s ease forwards;
 */
@keyframes playful-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes playful-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}

/* ============================================
 * 6. Utilities
 * ============================================
 * Force .hidden to always hide the element. Tailwind v4 puts utilities
 * in @layer utilities, so unlayered user CSS can beat `.hidden` and make
 * classList.toggle('hidden') inert. !important restores the expected
 * behavior.
 */
.hidden {
  display: none !important;
}