@charset "UTF-8";
/**
 * Design Tokens — 013-handwriting (Tracing / Handwriting Practice Sheets)
 *
 * Visual direction: Warm Sunshine + Sky Blue — cheerful, encouraging, kid-friendly.
 * Primary  #fbbf24 (sunshine yellow, HSL ~43°) — warm, inviting, pencil-inspired.
 * Accent   #38bdf8 (sky blue,       HSL ~199°) — cool complement, ruling-line feel.
 * Heading  'Fredoka One' / 'Nunito' — rounded, friendly, elementary-school charm.
 * All spacing on 8px grid. Radius: Round personality (kid-friendly).
 */

/* ╔══════════════════════════════════════════════╗
   ║  @font-face: Fredoka One (Google Fonts CDN)  ║
   ╚══════════════════════════════════════════════╝
   Loaded via <link> in base template; fallbacks handle offline.            */

:root {
  /* ── Primary: Sunshine Yellow (HSL ~43°) ── */
  --site-primary:        #fbbf24;
  --site-primary-hover:  #f59e0b;
  --site-primary-dark:   #92400e;
  --site-primary-light:  #fffbeb;
  --site-primary-border: #fde68a;

  /* ── Accent: Sky Blue (HSL ~199°) ── */
  --site-accent:       #38bdf8;
  --site-accent-hover: #0ea5e9;
  --site-accent-dark:  #0369a1;

  /* ── Text — warm brown tones ── */
  --site-text:       #1c1400;
  --site-text-muted: #78716c;
  --site-text-light: #57534e;

  /* ── Background: Warm White → Sky Tint gradient (applied in skin.css body) ── */
  --site-background:     #ffffff;
  --site-background-alt: #fffef0;
  --site-surface:        #fffef0;

  /* ── Border: Soft butter yellow ── */
  --site-border:      #fef3c7;
  --site-border-dark: #fde68a;

  /* ── Shadows (warm amber-tinted) ── */
  --shadow-sm: 0 1px 3px rgba(251, 191, 36, 0.10);
  --shadow-md: 0 4px 8px rgba(251, 191, 36, 0.14);
  --shadow-lg: 0 10px 20px rgba(251, 191, 36, 0.16);

  /* ── Detail page tokens ── */
  --detail-bg-gradient-start: #fffbeb;
  --detail-bg-gradient-end:   #f0f9ff;
  --detail-card-shadow:       0 2px 8px rgba(251, 191, 36, 0.10);
  --detail-card-shadow-hover: 0 8px 24px rgba(251, 191, 36, 0.20);
  --detail-border-radius:     16px;
  --detail-theme-primary:     var(--site-primary);
  --detail-theme-secondary:   var(--site-primary-hover);
  --detail-theme-soft:        var(--site-primary-light);
  --detail-theme-border:      var(--site-primary-border);

  /* ── Border Radius: Round / kid-friendly ── */
  --radius-sm:     8px;
  --radius-button: 24px;
  --radius-card:   16px;
  --radius-pill:   9999px;

  /* ── Typography: Fredoka One for cheerful headings ── */
  --font-heading: 'Fredoka One', 'Nunito', system-ui, -apple-system, sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Transitions ── */
  --dur-fast:   150ms;
  --dur-normal: 250ms;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── Premium Elevation Tokens ── */
  --shadow-card:          0 4px 8px -1px rgba(251,191,36,0.12), 0 2px 4px -2px rgba(0,0,0,0.06);
  --shadow-card-hover:    0 20px 40px -12px rgba(251,191,36,0.24);
  --shadow-btn-brand:     0 4px 14px -3px rgba(251,191,36,0.45);
  --shadow-btn-hover:     0 4px 14px rgba(251,191,36,0.25);
  --shadow-btn-active:    0 1px 4px rgba(251,191,36,0.15);
  --gradient-stat-badge:  linear-gradient(135deg, rgba(251,191,36,0.12), rgba(56,189,248,0.10));
  --gradient-hero-blob:   radial-gradient(circle 300px, rgba(251,191,36,0.12), transparent);
  --gradient-body:        linear-gradient(160deg, #fffbeb 0%, #ffffff 50%, #f0f9ff 100%);
  --radius-card-lg:       20px;
  --transition-lift:      transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
                          box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Handwriting ruling-line colors (paper aesthetic) ── */
  --ruling-line-color:  #bae6fd;
  --ruling-line-mid:    #e0f2fe;
  --ruling-baseline:    #7dd3fc;
}