/**
 * design-system.css
 * Core design tokens, fonts, and base styles for e-co-chalkboard-game.
 * All other stylesheets import or build on top of these variables.
 */

/* ─────────────────────────────────────────────
   FONTS
   ───────────────────────────────────────────── */
@font-face {
    font-family: 'KccSign';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCC-Ganpan.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OmuDaye';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/omyu_pretty.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ─────────────────────────────────────────────
   COLOR TOKENS
   ───────────────────────────────────────────── */
:root {
    /* Surface scale — darkest to lightest */
    --background:                   #0c0e10;
    --surface-dim:                  #0c0e10;
    --surface-container-lowest:     #000000;
    --surface-container-low:        #111416;
    --surface-container:            #171a1c;
    --surface-container-high:       #1d2022;
    --surface-container-highest:    #232629;
    --surface-variant:              #3a3d40;
    --outline-variant:              #46484a;

    /* Text */
    --on-surface:                   #eeeef0;
    --on-surface-variant:           #aaabad;

    /* Brand colors */
    --primary:                      #fdd34d;   /* golden yellow */
    --primary-container:            #c19c13;   /* deeper gold */
    --secondary:                    #fd8863;   /* coral orange */
    --secondary-dim:                #ef7e5a;
    --tertiary:                     #7ed3ff;   /* sky blue */
    --tertiary-container:           #54c7fc;

    /* Semantic aliases */
    --color-correct:                #4ade80;   /* green — correct answer */
    --color-wrong:                  #f87171;   /* red — wrong answer */
    --color-player-1:               var(--tertiary);
    --color-player-2:               var(--secondary);
    --color-player-3:               var(--primary);
    --color-player-4:               #c084fc;   /* purple */

    /* ─── Spacing ─── */
    --space-xs:   0.25rem;
    --space-sm:   0.5rem;
    --space-md:   1rem;
    --space-lg:   1.5rem;
    --space-xl:   2rem;
    --space-2xl:  3rem;

    /* ─── Radii ─── */
    --radius-sm:     0.5rem;
    --radius-md:     1rem;
    --radius-lg:     1.5rem;
    --radius-xl:     3rem;
    --radius-full:   9999px;

    /* ─── Typography ─── */
    --font-display: 'KccSign', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'OmuDaye', 'Segoe UI', system-ui, sans-serif;

    --text-xs:   clamp(0.65rem, 1.2vw,  0.8rem);
    --text-sm:   clamp(0.8rem,  1.5vw,  1rem);
    --text-md:   clamp(1rem,    2vw,    1.25rem);
    --text-lg:   clamp(1.25rem, 2.5vw,  1.75rem);
    --text-xl:   clamp(1.75rem, 3.5vw,  2.5rem);
    --text-2xl:  clamp(2.5rem,  5vw,    4rem);
    --text-3xl:  clamp(3.5rem,  7vw,    6rem);

    /* ─── Transitions ─── */
    --transition-fast:    100ms ease-out;
    --transition-normal:  200ms ease-out;
    --transition-bounce:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-index layers ─── */
    --z-base:     1;
    --z-panel:    10;
    --z-header:   20;
    --z-modal:    100;
    --z-toast:    200;
}

/* ─────────────────────────────────────────────
   CSS RESET & BASE
   ───────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Prevent text selection during rapid tapping */
    -webkit-tap-highlight-color: transparent;
}

html {
    /* Lock the document to a single, non-scrollable viewport */
    height: 100%;
    overflow: hidden;
    font-size: 16px;
}

body {
    height: 100%;
    overflow: hidden;
    background: #000;          /* letterbox bars */
    color: var(--on-surface);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Disable double-tap zoom on touch devices */
    touch-action: manipulation;
    user-select: none;
}

/* ─────────────────────────────────────────────
   CHALKBOARD TEXTURE MIXIN
   Applied via utility class .chalk-bg
   ───────────────────────────────────────────── */
.chalk-bg {
    background-color: var(--background);
    /* SVG noise pattern encoded inline to avoid external file dependency */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

/* ─────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────── */

/* Typography */
.font-display  { font-family: var(--font-display); }
.font-body     { font-family: var(--font-body); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-md   { font-size: var(--text-md); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.text-center  { text-align: center; }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-tertiary  { color: var(--tertiary); }
.text-muted     { color: var(--on-surface-variant); }

/* Flex helpers */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }

/* Spacing */
.p-md  { padding: var(--space-md); }
.p-lg  { padding: var(--space-lg); }
.p-xl  { padding: var(--space-xl); }

/* Radius */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Ambient glow helper — apply to floating elements */
.glow-primary {
    box-shadow: 0 0 24px 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.glow-secondary {
    box-shadow: 0 0 24px 4px color-mix(in srgb, var(--secondary) 18%, transparent);
}
.glow-tertiary {
    box-shadow: 0 0 24px 4px color-mix(in srgb, var(--tertiary) 18%, transparent);
}

/* ─────────────────────────────────────────────
   KEYFRAME ANIMATIONS (shared across all views)
   ───────────────────────────────────────────── */

/* Entrance bounce — used for button groups on landing */
@keyframes bounceIn {
    0%   { opacity: 0; transform: scale(0.5) translateY(40px); }
    60%  { opacity: 1; transform: scale(1.08) translateY(-8px); }
    80%  { transform: scale(0.96) translateY(4px); }
    100% { transform: scale(1) translateY(0); }
}

/* Title drop */
@keyframes titleDrop {
    0%   { opacity: 0; transform: translateY(-60px) rotate(-4deg); }
    70%  { transform: translateY(10px) rotate(1deg); }
    100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* Bubble float upward */
@keyframes floatUp {
    0%   { transform: translateY(120%) scale(0.6); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Bubble pop on correct tap */
@keyframes popCorrect {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* Shake on wrong tap */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%  { transform: translateX(-10px) rotate(-4deg); }
    40%  { transform: translateX(10px)  rotate(4deg); }
    60%  { transform: translateX(-6px)  rotate(-2deg); }
    80%  { transform: translateX(6px)   rotate(2deg); }
}

/* Score flash */
@keyframes scoreFlash {
    0%   { opacity: 0; transform: translateY(0) scale(0.8); }
    30%  { opacity: 1; transform: translateY(-20px) scale(1.2); }
    100% { opacity: 0; transform: translateY(-60px) scale(0.9); }
}

/* Pulse glow */
@keyframes pulseGlow {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

/* Countdown tick */
@keyframes timerPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Spin */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Fade in */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Slide up */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Ripple */
@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

/* Wobble — for cute idle/win effects */
@keyframes wobble {
    0%, 100% { transform: rotate(0deg) scale(1); }
    20%       { transform: rotate(-6deg) scale(1.08); }
    40%       { transform: rotate(5deg) scale(1.06); }
    60%       { transform: rotate(-4deg) scale(1.04); }
    80%       { transform: rotate(3deg) scale(1.02); }
}

/* Heartbeat — for score/win highlights */
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14%       { transform: scale(1.18); }
    28%       { transform: scale(1); }
    42%       { transform: scale(1.12); }
    70%       { transform: scale(1); }
}