/* ============================================================
   TMaths Design Tokens & Themes – Phase 2
   - Structural tokens: theme-agnostic
   - Colour tokens: 4 themes × 2 modes (light / dark)
   - Bootstrap bridge: keeps BS components themed correctly
   ============================================================ */

/* ─── Structural tokens ──────────────────────────────────── */
:root {
    /* Layout */
    --tm-navbar-height: 60px;
    --tm-bottom-nav-height: 64px;
    --tm-content-max: 1280px;
    /* Radius */
    --tm-radius-sm: 6px;
    --tm-radius-md: 10px;
    --tm-radius-lg: 16px;
    --tm-radius-pill: 9999px;
    /* Spacing */
    --tm-space-1: 4px;
    --tm-space-2: 8px;
    --tm-space-3: 12px;
    --tm-space-4: 16px;
    --tm-space-5: 20px;
    --tm-space-6: 24px;
    --tm-space-8: 32px;
    --tm-space-10: 40px;
    --tm-space-12: 48px;
    /* Typography */
    --tm-font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --tm-font-mono: 'JetBrains Mono', 'Courier New', monospace;
    --tm-font-size-xs: 0.75rem;
    --tm-font-size-sm: 0.875rem;
    --tm-font-size-base: 1rem;
    --tm-font-size-lg: 1.125rem;
    --tm-font-size-xl: 1.25rem;
    --tm-font-size-2xl: 1.5rem;
    /* Shadows */
    --tm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --tm-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --tm-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.12);
    /* Transitions */
    --tm-transition-fast: 150ms ease;
    --tm-transition-base: 250ms ease;
    /* Overlay */
    --tm-overlay: rgba(15, 23, 42, 0.5);
    /* Layout */
    --tm-navbar-height: 60px;
    --tm-bottom-nav-height: 64px;
    --tm-content-max: 1280px;
    /* Component heights (for stacking fixed elements) */
    --tm-scoreboard-height: 30px; /* adjust if you change score board padding */
    --tm-fab-size: 48px; /* matches .floating-btn width/height */
    --tm-fab-gap: var(--tm-space-4); /* 16px default gap */

    --keyboard-padding-bottom: 0px;
    --_contains-highlight-background-color: transparent !important;
}

/* ─── Semantic colours (constant across themes) ─────────── */
:root {
    --tm-success: #16a34a;
    --tm-success-subtle: #dcfce7;
    --tm-warning: #f59e0b;
    --tm-warning-subtle: #fef3c7;
    --tm-danger: #dc2626;
    --tm-danger-subtle: #fee2e2;
    --tm-info: #0284c7;
    --tm-info-subtle: #e0f2fe;
}

:root[data-bs-theme="dark"] {
    --tm-success-subtle:    #14532d;
    --tm-warning-subtle:    #78350f;
    --tm-danger-subtle:     #7f1d1d;
    --tm-info-subtle:       #0c4a6e;
    --tm-overlay:           rgba(0, 0, 0, 0.7);
}

/* ═══════════════════════════════════════════════════════════
   THEME 1: EXPEDITION (default) – Teal + Amber
   ═══════════════════════════════════════════════════════════ */

/* Light */
:root,
[data-theme="expedition"] {
    --tm-primary:           #0d9488;
    --tm-primary-rgb:       13, 148, 136;
    --tm-primary-hover:     #0f766e;
    --tm-primary-subtle:    #ccfbf1;

    --tm-accent:            #f59e0b;
    --tm-accent-hover:      #d97706;
    --tm-accent-subtle:     #fef3c7;

    --tm-bg:                #ffffff;
    --tm-surface:           #f8fafc;
    --tm-surface-alt:       #f1f5f9;
    --tm-surface-elevated:  #ffffff;
    --tm-border:            #e2e8f0;
    --tm-border-strong:     #cbd5e1;

    --tm-text:              #0f172a;
    --tm-text-muted:        #64748b;
    --tm-text-subtle:       #94a3b8;
    --tm-text-inverse:      #ffffff;
}

/* Dark */
:root[data-bs-theme="dark"],
[data-theme="expedition"][data-bs-theme="dark"] {
    --tm-primary:           #14b8a6;
    --tm-primary-rgb:       20, 184, 166;
    --tm-primary-hover:     #2dd4bf;
    --tm-primary-subtle:    #134e4a;

    --tm-accent:            #fbbf24;
    --tm-accent-hover:      #f59e0b;
    --tm-accent-subtle:     #78350f;

    --tm-bg:                #0f1419;
    --tm-surface:           #161d24;
    --tm-surface-alt:       #1d262f;
    --tm-surface-elevated:  #1a222b;
    --tm-border:            #2a343f;
    --tm-border-strong:     #3a4550;

    --tm-text:              #e8eef5;
    --tm-text-muted:        #94a3b8;
    --tm-text-subtle:       #64748b;
    --tm-text-inverse:      #0f172a;
}

/* ═══════════════════════════════════════════════════════════
   THEME 2: COSMOS – Indigo + Gold
   ═══════════════════════════════════════════════════════════ */

[data-theme="cosmos"] {
    --tm-primary:           #6366f1;
    --tm-primary-rgb:       99, 102, 241;
    --tm-primary-hover:     #4f46e5;
    --tm-primary-subtle:    #e0e7ff;

    --tm-accent:            #f59e0b;
    --tm-accent-hover:      #d97706;
    --tm-accent-subtle:     #fef3c7;

    --tm-bg:                #ffffff;
    --tm-surface:           #f8f9ff;
    --tm-surface-alt:       #eef0ff;
    --tm-surface-elevated:  #ffffff;
    --tm-border:            #e0e5f5;
    --tm-border-strong:     #c7cdf0;

    --tm-text:              #0f172a;
    --tm-text-muted:        #64748b;
    --tm-text-subtle:       #94a3b8;
    --tm-text-inverse:      #ffffff;
}

[data-theme="cosmos"][data-bs-theme="dark"] {
    --tm-primary:           #818cf8;
    --tm-primary-rgb:       129, 140, 248;
    --tm-primary-hover:     #a5b4fc;
    --tm-primary-subtle:    #1e1b4b;

    --tm-accent:            #fcd34d;
    --tm-accent-hover:      #fbbf24;
    --tm-accent-subtle:     #78350f;

    --tm-bg:                #0a0e27;
    --tm-surface:           #111739;
    --tm-surface-alt:       #1a1f4a;
    --tm-surface-elevated:  #161c43;
    --tm-border:            #2a3060;
    --tm-border-strong:     #3d4480;

    --tm-text:              #e8eef5;
    --tm-text-muted:        #94a3b8;
    --tm-text-subtle:       #64748b;
    --tm-text-inverse:      #0a0e27;
}

/* ═══════════════════════════════════════════════════════════
   THEME 3: ATLAS – Slate + Coral
   ═══════════════════════════════════════════════════════════ */

[data-theme="atlas"] {
    --tm-primary:           #475569;
    --tm-primary-rgb:       71, 85, 105;
    --tm-primary-hover:     #334155;
    --tm-primary-subtle:    #e2e8f0;

    --tm-accent:            #f97316;
    --tm-accent-hover:      #ea580c;
    --tm-accent-subtle:     #fed7aa;

    --tm-bg:                #ffffff;
    --tm-surface:           #f8f7f5;
    --tm-surface-alt:       #f0eeea;
    --tm-surface-elevated:  #ffffff;
    --tm-border:            #e2ded5;
    --tm-border-strong:     #cbd0d8;

    --tm-text:              #111318;
    --tm-text-muted:        #64748b;
    --tm-text-subtle:       #94a3b8;
    --tm-text-inverse:      #ffffff;
}

[data-theme="atlas"][data-bs-theme="dark"] {
    --tm-primary:           #94a3b8;
    --tm-primary-rgb:       148, 163, 184;
    --tm-primary-hover:     #cbd5e1;
    --tm-primary-subtle:    #1e293b;

    --tm-accent:            #fb923c;
    --tm-accent-hover:      #f97316;
    --tm-accent-subtle:     #7c2d12;

    --tm-bg:                #111318;
    --tm-surface:           #1a1d24;
    --tm-surface-alt:       #23272f;
    --tm-surface-elevated:  #1c2029;
    --tm-border:            #2f353f;
    --tm-border-strong:     #3f4753;

    --tm-text:              #e8eef5;
    --tm-text-muted:        #94a3b8;
    --tm-text-subtle:       #64748b;
    --tm-text-inverse:      #111318;
}

/* ═══════════════════════════════════════════════════════════
   THEME 4: QUEST – Violet + Lime
   ═══════════════════════════════════════════════════════════ */

[data-theme="quest"] {
    --tm-primary:           #7c3aed;
    --tm-primary-rgb:       124, 58, 237;
    --tm-primary-hover:     #6d28d9;
    --tm-primary-subtle:    #ede9fe;

    --tm-accent:            #84cc16;
    --tm-accent-hover:      #65a30d;
    --tm-accent-subtle:     #d9f99d;

    --tm-bg:                #ffffff;
    --tm-surface:           #faf8ff;
    --tm-surface-alt:       #f2edff;
    --tm-surface-elevated:  #ffffff;
    --tm-border:            #e5e0f5;
    --tm-border-strong:     #d0c7ee;

    --tm-text:              #16121e;
    --tm-text-muted:        #64748b;
    --tm-text-subtle:       #94a3b8;
    --tm-text-inverse:      #ffffff;
}

[data-theme="quest"][data-bs-theme="dark"] {
    --tm-primary:           #a78bfa;
    --tm-primary-rgb:       167, 139, 250;
    --tm-primary-hover:     #c4b5fd;
    --tm-primary-subtle:    #2e1065;

    --tm-accent:            #a3e635;
    --tm-accent-hover:      #84cc16;
    --tm-accent-subtle:     #365314;

    --tm-bg:                #16121e;
    --tm-surface:           #1d1729;
    --tm-surface-alt:       #262035;
    --tm-surface-elevated:  #201a2d;
    --tm-border:            #332b45;
    --tm-border-strong:     #453a5c;

    --tm-text:              #ece5ff;
    --tm-text-muted:        #a0a3b8;
    --tm-text-subtle:       #6b7280;
    --tm-text-inverse:      #16121e;
}

/* ─── Bootstrap bridge (applies to every theme) ─────────── */
:root,
[data-theme] {
    --bs-primary:           var(--tm-primary);
    --bs-primary-rgb:       var(--tm-primary-rgb);
    --bs-body-bg:           var(--tm-bg);
    --bs-body-color:        var(--tm-text);
    --bs-border-color:      var(--tm-border);
    --bs-secondary-bg:      var(--tm-surface-alt);
    --bs-tertiary-bg:       var(--tm-surface);
    --bs-secondary-color:   var(--tm-text-muted);
    --bs-emphasis-color:    var(--tm-text);
    --bs-heading-color:     var(--tm-text);
    --bs-link-color:        var(--tm-primary);
    --bs-link-hover-color:  var(--tm-primary-hover);
    --bs-link-color-rgb:    var(--tm-primary-rgb);
}

/* Ensure body adapts smoothly */
body {
    background-color: var(--tm-bg);
    color: var(--tm-text);
    transition: background-color var(--tm-transition-base), color var(--tm-transition-base);
}

.ML__contains-highlight {
    background: var(--contains-highlight-background-color);
}

:host .ML__contains-highlight {
    --contains-highlight-background-color: rgba(255, 220, 80, 0.5);
}