/* ============================================================
   GoalPeek Design System — CSS Custom Properties (Tokens)
   All surfaces, typography, spacing, radius, shadows, transitions
   ============================================================ */

:root {
    /* ── Colours ─────────────────────────────────────────── */
    --ds-color-primary:           #3b82f6;
    --ds-color-primary-dark:      #1d4ed8;
    --ds-color-primary-light:     #eff6ff;
    --ds-color-surface:           #ffffff;
    --ds-color-surface-secondary: #f8fafc;
    --ds-color-border:            #e2e8f0;
    --ds-color-text:              #0f172a;
    --ds-color-text-muted:        #64748b;
    --ds-color-success:           #22c55e;
    --ds-color-success-light:     #f0fdf4;
    --ds-color-warning:           #f59e0b;
    --ds-color-warning-light:     #fffbeb;
    --ds-color-danger:            #ef4444;
    --ds-color-danger-light:      #fef2f2;
    --ds-color-info:              #06b6d4;
    --ds-color-info-light:        #ecfeff;
    --ds-color-gold:              #fbbf24;
    --ds-color-silver:            #94a3b8;
    --ds-color-bronze:            #c2853a;

    /* ── Typography ──────────────────────────────────────── */
    --ds-font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ds-font-size-xs:   0.75rem;    /* 12px */
    --ds-font-size-sm:   0.875rem;   /* 14px */
    --ds-font-size-base: 1rem;       /* 16px */
    --ds-font-size-lg:   1.125rem;   /* 18px */
    --ds-font-size-xl:   1.25rem;    /* 20px */
    --ds-font-size-2xl:  1.5rem;     /* 24px */
    --ds-font-size-3xl:  1.875rem;   /* 30px */
    --ds-font-size-4xl:  2.25rem;    /* 36px */

    --ds-font-weight-normal:   400;
    --ds-font-weight-medium:   500;
    --ds-font-weight-semibold: 600;
    --ds-font-weight-bold:     700;
    --ds-font-weight-black:    900;

    --ds-line-height-tight:   1.25;
    --ds-line-height-normal:  1.5;
    --ds-line-height-relaxed: 1.75;

    /* ── Spacing (0.25rem scale) ─────────────────────────── */
    --ds-space-1:  0.25rem;
    --ds-space-2:  0.5rem;
    --ds-space-3:  0.75rem;
    --ds-space-4:  1rem;
    --ds-space-5:  1.25rem;
    --ds-space-6:  1.5rem;
    --ds-space-8:  2rem;
    --ds-space-10: 2.5rem;
    --ds-space-12: 3rem;
    --ds-space-16: 4rem;

    /* ── Border radius ───────────────────────────────────── */
    --ds-radius-sm:   4px;
    --ds-radius-md:   8px;
    --ds-radius-lg:   12px;
    --ds-radius-xl:   16px;
    --ds-radius-2xl:  24px;
    --ds-radius-full: 9999px;

    /* ── Shadows ─────────────────────────────────────────── */
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

    /* ── Transitions ─────────────────────────────────────── */
    --ds-transition-fast:   150ms ease;
    --ds-transition-normal: 250ms ease;
    --ds-transition-slow:   350ms ease;
}

/* ── Dark mode overrides ─────────────────────────────────── */
[data-bs-theme="dark"] {
    --ds-color-surface:           #0f172a;
    --ds-color-surface-secondary: #1e293b;
    --ds-color-border:            #334155;
    --ds-color-text:              #f1f5f9;
    --ds-color-text-muted:        #94a3b8;
    --ds-color-primary-light:     #1e3a5f;
    --ds-color-success-light:     #14532d;
    --ds-color-warning-light:     #451a03;
    --ds-color-danger-light:      #450a0a;
    --ds-color-info-light:        #0c4a6e;
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

/* ── Global typography ───────────────────────────────────── */
body {
    font-family: var(--ds-font-family);
    font-size:   var(--ds-font-size-base);
    line-height: var(--ds-line-height-normal);
    color:       var(--ds-color-text);
}

h1 {
    font-size:   clamp(1.75rem, 4vw, 2.25rem);
    font-weight: var(--ds-font-weight-black);
    line-height: var(--ds-line-height-tight);
}
h2 {
    font-size:   clamp(1.375rem, 3vw, 1.75rem);
    font-weight: var(--ds-font-weight-bold);
    line-height: var(--ds-line-height-tight);
}
h3 {
    font-size:   var(--ds-font-size-xl);
    font-weight: var(--ds-font-weight-semibold);
}
h4, h5, h6 {
    font-weight: var(--ds-font-weight-semibold);
}

.text-muted {
    color: var(--ds-color-text-muted) !important;
}

/* ── ds-card variants ────────────────────────────────────── */
.ds-card {
    border-radius:    var(--ds-radius-lg);
    background-color: var(--ds-color-surface);
    border:           1px solid var(--ds-color-border);
}
.ds-card--elevated {
    border:     none;
    box-shadow: var(--ds-shadow-md);
}
.ds-card--bordered {
    border: 2px solid var(--ds-color-border);
    box-shadow: none;
}
.ds-card--glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
[data-bs-theme="dark"] .ds-card--glass {
    background: rgba(15, 23, 42, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ── Podium colours ──────────────────────────────────────── */
.ds-podium-1 { --podium-color: var(--ds-color-gold);   }
.ds-podium-2 { --podium-color: var(--ds-color-silver); }
.ds-podium-3 { --podium-color: var(--ds-color-bronze); }

/* ── Progress bar semantic colors ────────────────────────── */
.ds-progress-low    { --bs-progress-bar-bg: var(--ds-color-success); }
.ds-progress-medium { --bs-progress-bar-bg: var(--ds-color-warning); }
.ds-progress-high   { --bs-progress-bar-bg: var(--ds-color-danger);  }

/* ── Sidebar active state (admin) ────────────────────────── */
/* Use blue-300 (#93c5fd) for text — blue-500 (#3b82f6) fails AA on dark+rgba overlay */
.sidebar .nav-link.active {
    border-left: 3px solid var(--ds-color-primary);
    background:  rgba(59, 130, 246, 0.12);
    color:       #93c5fd !important;
    border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
}
.sidebar .nav-link {
    border-left: 3px solid transparent;
    transition: background var(--ds-transition-fast), border-color var(--ds-transition-fast);
    border-radius: 0 var(--ds-radius-md) var(--ds-radius-md) 0;
}
.sidebar .nav-link:hover:not(.active) {
    background: rgba(255, 255, 255, 0.06);
    border-left-color: rgba(59, 130, 246, 0.3);
}