/* ═══ SKIP LINK — Accessibility ═══ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
    padding: 0.75rem 1.5rem;
    background: var(--brand-1, #1d4051);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 0.5rem 0;
}
.skip-link:focus {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
}

/* ═══ DESIGN TOKENS — Brand palette, spacing, typography, theme variables ═══ */
/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — Use ONLY these values in @media
   ───────────────────────────────────────────────────────────
   480px  — phones (small)
   600px  — phones (large) / small tablet
   768px  — tablets
   900px  — large tablets / small desktop
   1024px — desktop
   1280px — large desktop
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   BRAND PALETTE — Change ONLY these values for a full rebrand
   ═══════════════════════════════════════════════════════════ */
:root {
    --brand-1: #1d4051;
    --brand-1-dark: #16333f;
    --brand-1-light: #254d53;
    --brand-2: #254d53;
    --brand-accent: #75c9a7;
    --brand-accent-light: #a3dcc4;
    --brand-accent-dark: #5ab08e;
    --brand-gray: #7f969a;
    --brand-light-gray: #e9edee;

    --primary: var(--brand-1);
    --primary-dark: var(--brand-1-dark);
    --primary-light: var(--brand-1-light);
    --secondary: var(--brand-2);
    --mint: var(--brand-accent);
    --mint-light: var(--brand-accent-light);
    --mint-dark: var(--brand-accent-dark);
    --success: var(--brand-accent);
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
    --dark: var(--brand-1);
    --light: #f5f7f8;
    --border: #dde2e4;
    --accent-light: var(--brand-accent-light);
    --accent-lighter: var(--brand-accent);
    --text-muted: var(--brand-gray);
    --shadow: 0 4px 6px -1px rgba(29, 64, 81, 0.1), 0 2px 4px -1px rgba(29, 64, 81, 0.06);
    --shadow-lg: 0 20px 25px -5px rgba(29, 64, 81, 0.1), 0 10px 10px -5px rgba(29, 64, 81, 0.04);

/* ── Typography scale ────────────────────────────────── */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.8125rem;    /* 13px */
    --text-base: 0.875rem;   /* 14px */
    --text-md: 1rem;         /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 2rem;        /* 32px */

/* ── Spacing / Radius / Motion foundation tokens ──────── */
    --space-1: 0.25rem;      /* 4px */
    --space-2: 0.5rem;       /* 8px */
    --space-3: 0.75rem;      /* 12px */
    --space-4: 1rem;         /* 16px */
    --space-5: 1.25rem;      /* 20px */
    --space-6: 1.5rem;       /* 24px */
    --space-8: 2rem;         /* 32px */
    --space-10: 2.5rem;      /* 40px */
    --space-12: 3rem;        /* 48px */
    --space-16: 4rem;        /* 64px */
    --space-20: 5rem;        /* 80px */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 350ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    --shadow-1: 0 2px 8px rgba(0,0,0,0.18);
    --shadow-2: 0 6px 18px rgba(0,0,0,0.24);
    --shadow-3: 0 10px 28px rgba(0,0,0,0.3);

/* ── Dark theme (default) ──────────────────────────────── */
    --t-bg: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
    --t-surface: rgba(255,255,255,0.04);
    --t-surface-elevated: rgba(255,255,255,0.06);
    --t-text: rgba(255,255,255,0.95);
    --t-text-secondary: rgba(255,255,255,0.7);
    --t-text-muted: rgba(255,255,255,0.45);
    --t-text-subtle: rgba(255,255,255,0.35);
    --t-border: rgba(255,255,255,0.08);
    --t-border-strong: rgba(255,255,255,0.12);
    --t-input-bg: rgba(255,255,255,0.06);
    --t-input-border: rgba(255,255,255,0.12);
    --t-input-text: rgba(255,255,255,0.9);
    --t-placeholder: rgba(255,255,255,0.3);
    --t-heading: white;
    --t-heading-section: rgba(255,255,255,0.9);
    --t-focus-border: var(--brand-accent);
    --t-focus-ring: rgba(117,201,167,0.15);
    --t-hover-bg: rgba(255,255,255,0.06);
    --t-dropdown-bg: #1a2332;
    --t-dropdown-text: rgba(255,255,255,0.9);
    --t-dropdown-hover: rgba(255,255,255,0.08);
    --t-dropdown-divider: rgba(255,255,255,0.08);
    --t-card-shadow: 0 4px 12px rgba(0,0,0,0.3);
    --t-btn-outline-bg: rgba(255,255,255,0.06);
    --t-btn-outline-border: rgba(255,255,255,0.2);
    --t-btn-outline-text: rgba(255,255,255,0.85);
    --t-btn-outline-hover-bg: rgba(255,255,255,0.12);
    --t-table-row-alt: rgba(255,255,255,0.02);
    --t-table-row-hover: rgba(255,255,255,0.06);
    --t-table-border: rgba(255,255,255,0.06);
    --t-select-option-bg: #1a1a2e;
    --t-alert-warning-bg: rgba(251,191,36,0.12);
    --t-alert-warning-border: rgba(251,191,36,0.3);
    --t-alert-warning-text: #fcd34d;
    --t-alert-bg: rgba(255,255,255,0.06);
    --t-link: var(--brand-accent);
    --t-link-hover: var(--brand-accent-light);

/* ── Badge / Status tokens ─────────────────────────────── */
    --t-badge-league-bg: rgba(29,78,216,0.15);
    --t-badge-league-text: #93c5fd;
    --t-badge-tournament-bg: rgba(124,58,237,0.15);
    --t-badge-tournament-text: #c4b5fd;
    --t-badge-ladder-bg: rgba(180,83,9,0.15);
    --t-badge-ladder-text: #fbbf24;
    --t-badge-listing-bg: rgba(13,148,136,0.15);
    --t-badge-listing-text: #5eead4;
    --t-badge-subscribed-bg: rgba(22,163,74,0.15);
    --t-badge-subscribed-text: #86efac;
    --t-badge-premium-bg: rgba(190,24,93,0.15);
    --t-badge-premium-text: #f9a8d4;
    --t-badge-free-bg: rgba(255,255,255,0.06);
    --t-badge-free-text: rgba(255,255,255,0.5);
    --t-badge-owner-bg: rgba(3,105,161,0.15);
    --t-badge-owner-text: #7dd3fc;
    --t-badge-private-bg: rgba(245,158,11,0.15);
    --t-badge-private-text: #fbbf24;
    --t-badge-active-bg: rgba(22,163,74,0.15);
    --t-badge-active-text: #86efac;
    --t-badge-inactive-bg: rgba(255,255,255,0.06);
    --t-badge-inactive-text: rgba(255,255,255,0.5);
    --t-badge-default-bg: rgba(255,255,255,0.1);
    --t-badge-default-text: rgba(255,255,255,0.85);

    --t-status-success-bg: rgba(117,201,167,0.1);
    --t-status-success-border: rgba(117,201,167,0.2);
    --t-status-success-text: #75c9a7;
    --t-status-danger-bg: rgba(239,68,68,0.1);
    --t-status-danger-border: rgba(239,68,68,0.2);
    --t-status-danger-text: #fca5a5;
    --t-status-warning-bg: rgba(245,158,11,0.1);
    --t-status-warning-border: rgba(245,158,11,0.2);
    --t-status-warning-text: #fbbf24;
    --t-status-info-bg: rgba(59,130,246,0.1);
    --t-status-info-border: rgba(59,130,246,0.2);
    --t-status-info-text: #93c5fd;

/* ── Sponsor banner tokens ─────────────────────────────── */
    --t-sponsor-img-filter: brightness(0) invert(1);
    --t-sponsor-img-opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — overrides semantic tokens only
   ═══════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --t-bg: #f0f4f7;
    --t-surface: #ffffff;
    --t-surface-elevated: #ffffff;
    --t-text: var(--brand-1);
    --t-text-secondary: #475569;
    --t-text-muted: #94a3b8;
    --t-text-subtle: #cbd5e1;
    --t-border: #e2e8f0;
    --t-border-strong: #cbd5e1;
    --t-input-bg: #ffffff;
    --t-input-border: #d1d5db;
    --t-input-text: var(--brand-1);
    --t-placeholder: #9ca3af;
    --t-heading: var(--brand-1);
    --t-heading-section: var(--brand-1);
    --t-focus-border: var(--brand-1);
    --t-focus-ring: rgba(29,64,81,0.1);
    --t-hover-bg: #f3f4f6;
    --t-dropdown-bg: #ffffff;
    --t-dropdown-text: var(--brand-1);
    --t-dropdown-hover: #f3f4f6;
    --t-dropdown-divider: #e2e8f0;
    --t-card-shadow: 0 4px 6px -1px rgba(29,64,81,0.1), 0 2px 4px -1px rgba(29,64,81,0.06);
    --t-btn-outline-bg: #ffffff;
    --t-btn-outline-border: var(--brand-1);
    --t-btn-outline-text: var(--brand-1);
    --t-btn-outline-hover-bg: var(--brand-1);
    --t-table-row-alt: #f9fafb;
    --t-table-row-hover: #f3f4f6;
    --t-table-border: #e2e8f0;
    --t-select-option-bg: #ffffff;
    --t-alert-warning-bg: #fef3c7;
    --t-alert-warning-border: #fbbf24;
    --t-alert-warning-text: #92400e;
    --t-alert-bg: #f8fafc;
    --t-link: var(--brand-1);
    --t-link-hover: var(--brand-2);

    --t-badge-league-bg: rgba(29,78,216,0.08);
    --t-badge-league-text: #1e40af;
    --t-badge-tournament-bg: rgba(124,58,237,0.08);
    --t-badge-tournament-text: #6d28d9;
    --t-badge-ladder-bg: rgba(180,83,9,0.08);
    --t-badge-ladder-text: #b45309;
    --t-badge-listing-bg: rgba(13,148,136,0.08);
    --t-badge-listing-text: #0d9488;
    --t-badge-subscribed-bg: rgba(22,163,74,0.08);
    --t-badge-subscribed-text: #16a34a;
    --t-badge-premium-bg: rgba(190,24,93,0.08);
    --t-badge-premium-text: #be185d;
    --t-badge-free-bg: #f1f5f9;
    --t-badge-free-text: #64748b;
    --t-badge-owner-bg: rgba(3,105,161,0.08);
    --t-badge-owner-text: #0369a1;
    --t-badge-private-bg: rgba(245,158,11,0.08);
    --t-badge-private-text: #b45309;
    --t-badge-active-bg: rgba(22,163,74,0.08);
    --t-badge-active-text: #16a34a;
    --t-badge-inactive-bg: #f1f5f9;
    --t-badge-inactive-text: #64748b;
    --t-badge-default-bg: #1d4051;
    --t-badge-default-text: #ffffff;

    --t-status-success-bg: #f0fdf4;
    --t-status-success-border: #bbf7d0;
    --t-status-success-text: #16a34a;
    --t-status-danger-bg: #fef2f2;
    --t-status-danger-border: #fecaca;
    --t-status-danger-text: #dc2626;
    --t-status-warning-bg: #fffbeb;
    --t-status-warning-border: #fde68a;
    --t-status-warning-text: #b45309;
    --t-status-info-bg: #eff6ff;
    --t-status-info-border: #bfdbfe;
    --t-status-info-text: #2563eb;

    --t-sponsor-img-filter: none;
    --t-sponsor-img-opacity: 1;
}

/* ── Reduced-motion preference ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}