/* playful.css — Playful Design System
 * Loaded after DaisyUI v5, before user styles.css.
 * Overrides DaisyUI light theme + adds Playful design tokens.
 */

/* ============================================
 * 1. DaisyUI v5 Light Theme Overrides
 * ============================================
 * Baseline: DaisyUI light theme defaults.
 * Customize these to establish Playful branding.
 */
:root {
  color-scheme: light;

  /* Base surfaces */
  --color-base-100: #f7f5f3;
  --color-base-200: #EBE7E3;
  --color-base-300: #E2DCD6;
  --color-base-content: oklch(21% 0.006 285.885);

  /* Primary */
  --color-primary: #7056B2;
  --color-primary-content: oklch(94% 0.029 294.588);

  /* Secondary */
  --color-secondary: #FF2E95;
  --color-secondary-content: oklch(97% 0.014 343.198);

  /* Accent */
  --color-accent: #B4DF01;
  --color-accent-content: oklch(27% 0.072 132.109);

  /* Neutral */
  --color-neutral: oklch(14% 0.005 285.823);
  --color-neutral-content: oklch(92% 0.004 286.32);

  /* Info */
  --color-info: #0093DB;
  --color-info-content: oklch(97% 0.014 254.604);

  /* Success */
  --color-success: #628F00;
  --color-success-content: oklch(98% 0.018 155.826);

  /* Warning */
  --color-warning: #FFC409;
  --color-warning-content: oklch(20% 0 0);

  /* Error */
  --color-error: oklch(71% 0.194 13.428);
  --color-error-content: oklch(27% 0.105 12.094);

  /* Component tokens */
  --radius-selector: 2rem;
  --radius-field: 1rem;
  --radius-box: 2rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

/* ============================================
 * 2. 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);
}

/* ============================================
 * 3. 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);
}

/* ============================================
 * 4. Extended Color Palette
 * ============================================
 * Brand scale for gradients, decorative use, etc.
 * Based on the primary hue (277).
 */
:root {
  --playful-brand-50:  oklch(97% 0.02 277);
  --playful-brand-100: oklch(93% 0.05 277);
  --playful-brand-200: oklch(87% 0.08 277);
  --playful-brand-300: oklch(78% 0.13 277);
  --playful-brand-400: oklch(65% 0.19 277);
  --playful-brand-500: oklch(52% 0.24 277);
  --playful-brand-600: oklch(45% 0.24 277);
  --playful-brand-700: oklch(38% 0.20 277);
  --playful-brand-800: oklch(30% 0.15 277);
  --playful-brand-900: oklch(23% 0.10 277);

  /* Surface utilities */
  --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);
}