/* ============================================================================
   DeeDee design tokens
   The single source of truth for colour, type, spacing, radii, shadows and
   motion. Every other stylesheet uses these variables; nothing else should
   declare raw brand colours. Loaded first (see index.html).
   ============================================================================ */
:root {
    /* ---- Brand & sky ---- */
    --c-sky-top:      #B3E5FC;
    --c-sky:          #D4EDFC;
    --c-sky-bottom:   #E8F5E9;
    --c-page:         #EEF3F8;   /* behind the hub panel on computer screens */
    --c-hub-sky-top:    #D9EFFC; /* hub canvas: a soft blue at the top */
    --c-hub-sky:        #F2F8FD; /* a faint blue through the middle */
    --c-hub-sky-bottom: #EFF7F0; /* a faint green towards the grass */
    --c-grass:        #4CAF50;
    --c-grass-dark:   #2E7D32;
    --c-grass-deep:   #1B5E20;
    --c-grass-light:  #66BB6A;
    --c-cloud:        rgba(255, 255, 255, 0.85);
    --c-brand:        #1E88E5;   /* DeeDee wordmark blue */
    --c-brand-dark:   #1565C0;

    /* ---- Text (all pass WCAG AA on the light surfaces below) ---- */
    --c-ink:          #1A2B4A;   /* navy headings/body */
    --c-ink-soft:     #4A5B72;   /* secondary text: 6.4:1 on white, 4.9:1 on sky */
    --c-ink-on-dark:  #FFFFFF;
    --c-ink-muted-on-dark: rgba(255, 255, 255, 0.82);

    /* ---- Surfaces ---- */
    --c-surface:      #FFFFFF;
    --c-surface-soft: #F5F9FF;
    --c-line:         #D6E2F0;

    /* ---- Semantic colours ---- */
    --c-success:      #43A047;
    --c-success-dark: #2E7D32;
    --c-success-soft: #E8F5E9;
    --c-danger:       #D32F2F;
    --c-danger-dark:  #B71C1C;
    --c-danger-soft:  #FFEBEE;
    --c-warn:         #FB8C00;
    --c-warn-dark:    #E65100;
    --c-warn-soft:    #FFF3E0;
    --c-focus:        #1565C0;

    /* ---- Card palettes: --card-bg / --card-line / --card-ink per theme ---- */
    --green-bg:  #E8F5E9; --green-line:  #81C784; --green-ink:  #1B5E20;
    --blue-bg:   #E3F2FD; --blue-line:   #64B5F6; --blue-ink:   #0D47A1;
    --purple-bg: #EDE7F6; --purple-line: #B39DDB; --purple-ink: #4527A0;
    --orange-bg: #FFF3E0; --orange-line: #FFB74D; --orange-ink: #7A3E00;
    --gold-bg:   #FFF8E1; --gold-line:   #FFA000; --gold-ink:   #6D4C00;
    --red-bg:    #FFEBEE; --red-line:    #EF9A9A; --red-ink:    #B71C1C;
    --teal-bg:   #E0F2F1; --teal-line:   #4DB6AC; --teal-ink:   #00695C;
    --pink-bg:   #FCE4EC; --pink-line:   #F48FB1; --pink-ink:   #880E4F;
    --slate-bg:  #ECEFF1; --slate-line:  #90A4AE; --slate-ink:  #263238;

    /* ---- Game palettes ---- */
    --c-scrim: rgba(26, 43, 74, 0.45);          /* behind start / results cards */
    --answer-bg-2: #F1F8E9; --answer-hover-1: #DCEDC8; --answer-hover-2: #C5E1A5;
    --answer-wrong-1: #EF9A9A; --answer-wrong-2: #E57373;
    --progress-1: #7CB342; --progress-2: #FFD54F;
    /* Memory Match: DeeDee-blue backs, sunny fronts */
    --mem-back-1: #64B5F6; --mem-back-2: var(--c-brand); --mem-back-line: var(--c-brand-dark);
    --mem-front-1: #FFFDE7; --mem-front-2: #FFF3C4; --mem-front-line: #FFCA28;
    --mem-match-1: #E8F5E9; --mem-match-2: #A5D6A7; --mem-match-line: var(--c-success-dark);
    /* Noughts & Crosses players (the -ink shades pass AA on white) */
    --nc-x: #E53935; --nc-x-soft: #FFEBEE; --nc-x-line: #EF9A9A; --nc-x-ink: #B71C1C;
    --nc-o: #1E88E5; --nc-o-soft: #E3F2FD; --nc-o-line: #90CAF9; --nc-o-ink: #0D47A1;
    /* Simon Says pads: resting colour / lit colour */
    --simon-green:  #43A047; --simon-green-lit:  #B9F6CA;
    --simon-red:    #E53935; --simon-red-lit:    #FFCDD2;
    --simon-blue:   #1E88E5; --simon-blue-lit:   #BBDEFB;
    --simon-yellow: #FFB300; --simon-yellow-lit: #FFF59D;
    --simon-rim:    #FFFFFF;

    /* ---- Type ---- */
    --font: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --fs-xs:  0.8rem;
    --fs-sm:  0.9rem;
    --fs-md:  1rem;
    --fs-lg:  1.15rem;
    --fs-xl:  1.4rem;
    --fs-2xl: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
    --fs-3xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);

    /* ---- Spacing (4px scale) ---- */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

    /* ---- Radii ---- */
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-pill: 999px;

    /* ---- Shadows: soft "clay" look used across the hub and cards ---- */
    --sh-clay:       6px 6px 12px rgba(0, 0, 0, 0.06), -3px -3px 8px rgba(255, 255, 255, 0.7), inset 0 2px 0 rgba(255, 255, 255, 0.5);
    --sh-clay-hover: 10px 10px 24px rgba(0, 0, 0, 0.14), -4px -4px 12px rgba(255, 255, 255, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.6);
    --sh-card:       0 8px 28px rgba(26, 43, 74, 0.10);
    --sh-pop:        0 12px 40px rgba(0, 0, 0, 0.25);

    /* ---- Controls ---- */
    --tap: 48px;                 /* minimum tap target */
    --focus-ring: 0 0 0 4px rgba(21, 101, 192, 0.35);

    /* ---- Motion ---- */
    --t-fast: 0.15s ease;
    --t-med:  0.25s ease;
}