@charset "UTF-8";
/**
 * Design Tokens — 010-wordjumble
 * Theme:   Warm Amber + Forest Green
 * Feel:    NYT Games meets Wordle — editorial, cozy, premium word-game energy
 * Heading: Merriweather (serif editorial)
 * Special: .jumbled-word uses monospace for letter-by-letter clarity
 */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&display=swap');

:root {
  /* ── Primary: Golden Amber ── */
  --site-primary:        #d97706;
  --site-primary-hover:  #b45309;
  --site-primary-dark:   #78350f;
  --site-primary-light:  #fffbeb;
  --site-primary-border: #fcd34d;

  /* ── Accent: Forest Green ── */
  --site-accent:         #16a34a;
  --site-accent-hover:   #15803d;
  --site-accent-dark:    #14532d;
  --site-accent-light:   #f0fdf4;
  --site-accent-border:  #86efac;

  /* ── Text ── */
  --site-text:           #1c1401;
  --site-text-muted:     #6b7280;
  --site-text-light:     #57534e;

  /* ── Backgrounds ── */
  --site-background:     #ffffff;
  --site-surface:        #fefce8;

  /* ── Borders ── */
  --site-border:         #fef3c7;
  --site-border-dark:    #fde68a;

  /* ── Radius — Soft personality (editorial but friendly) ── */
  --detail-border-radius: 12px;
  --radius-sm:            6px;
  --radius-button:        10px;
  --radius-card:          12px;
  --radius-tile:          8px;
  --radius-pill:          9999px;

  /* ── Typography ── */
  --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Source Code Pro', 'Fira Code', 'Courier New', Courier, monospace;

  /* ── Shadows — amber-tinted brand shadows ── */
  --shadow-sm:     0 1px 3px rgba(217, 119, 6, 0.08);
  --shadow-md:     0 4px 8px rgba(217, 119, 6, 0.12);
  --shadow-lg:     0 10px 20px rgba(217, 119, 6, 0.14);
  --shadow-xl:     0 20px 32px rgba(217, 119, 6, 0.16);
  --shadow-tile:   0 2px 0 #b45309, 0 3px 6px rgba(120, 53, 15, 0.20);
  --shadow-tile-hover: 0 4px 0 #b45309, 0 6px 12px rgba(120, 53, 15, 0.24);
  --shadow-green:  0 2px 8px rgba(22, 163, 74, 0.14);

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

  /* ── Premium extras ── */
  --premium-glow:         rgba(217, 119, 6, 0.12);
  --premium-glow-strong:  rgba(217, 119, 6, 0.22);
  --premium-accent-glow:  rgba(22, 163, 74, 0.14);
  --premium-lift:         translateY(-4px);
  --premium-shadow-rest:  0 1px 3px rgba(217, 119, 6, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --premium-shadow-hover: 0 10px 24px rgba(217, 119, 6, 0.16), 0 4px 10px rgba(0, 0, 0, 0.06);
  --premium-transition:   260ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Semantic (standard, never brand-overridden) ── */
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error:   #dc2626;
  --color-info:    #2563eb;
}