@charset "UTF-8";
/**
 * Design Tokens — 007-bingo
 * Theme:   Vibrant coral-rose + golden yellow — joyful game energy
 * Primary: #f43f5e (rose red / coral)
 * Accent:  #f59e0b (golden yellow)
 * Feel:    Fun, celebratory, classroom game night
 */

:root {
  /* ── Primary (coral rose) ── */
  --site-primary:        #f43f5e;
  --site-primary-hover:  #e11d48;
  --site-primary-dark:   #be123c;
  --site-primary-light:  #fff1f2;
  --site-primary-border: #fecdd3;

  /* ── Accent (golden yellow) ── */
  --site-accent:         #f59e0b;
  --site-accent-hover:   #d97706;
  --site-accent-dark:    #92400e;

  /* ── Text ── */
  --site-text:           #1c0714;
  --site-text-muted:     #6b7280;
  --site-text-light:     #4b5563;

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

  /* ── Borders ── */
  --site-border:         #fce7f3;
  --site-border-dark:    #fbcfe8;

  /* ── Radius — Round personality (playful, game-like) ── */
  --detail-border-radius: 16px;
  --radius-sm:            8px;
  --radius-md:            12px;
  --radius-lg:            20px;
  --radius-button:        12px;
  --radius-card:          16px;
  --radius-pill:          9999px;

  /* ── Typography ── */
  --font-heading: 'Fredoka One', 'Nunito', system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Shadows (brand-tinted) ── */
  --shadow-sm:    0 1px 3px rgba(244, 63, 94, 0.06);
  --shadow-md:    0 4px 12px rgba(244, 63, 94, 0.10);
  --shadow-lg:    0 10px 28px rgba(244, 63, 94, 0.14);
  --shadow-xl:    0 20px 40px rgba(244, 63, 94, 0.16);
  --shadow-glow:  0 0 24px rgba(244, 63, 94, 0.20);
  --shadow-gold:  0 4px 16px rgba(245, 158, 11, 0.18);

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

  /* ── Gradients ── */
  --gradient-brand:   linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  --gradient-gold:    linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-festive: linear-gradient(135deg, #f43f5e 0%, #f59e0b 100%);
  --gradient-surface: linear-gradient(160deg, #fff1f2 0%, #ffffff 40%, #fffbeb 100%);
  --gradient-hero:    linear-gradient(160deg, #fff1f2 0%, #fce7f3 50%, #fffbeb 100%);

  /* ── Bingo game tokens ── */
  --bingo-cell-bg:       #ffffff;
  --bingo-cell-border:   #fecdd3;
  --bingo-cell-marked:   #f43f5e;
  --bingo-cell-win:      #f59e0b;
  --bingo-free-bg:       linear-gradient(135deg, #fef3c7, #fde68a);
  --bingo-free-color:    #92400e;
  --bingo-header-bg:     var(--gradient-brand);
  --bingo-mark-anim:     bingoMark 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── Semantic ── */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger:  #ef4444;
  --color-info:    #3b82f6;
}