/* ============================================================
   tokens.css v2 — PREMIUM
   Sickla IF Sponsra
   ============================================================ */

/* ── TYPOGRAFI ──────────────────────────────────────────────
   Bricolage Grotesque: variabel display-font med karaktär.
   Inter: clean body. Variabel optisk storlek + grad.
   ──────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('https://fonts.gstatic.com/s/bricolagegrotesque/v7/3y9U6as8bTXq_nANBjzKo3IeZx8z6up5BeSl5jBNz_19PpbpMXuECpwUxJBOm_OJWiaaD30YfKfjZZoLvRviyM0nTCT5SVIkpA.woff2') format('woff2');
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}
/* Inter via rsms.me (laddas i layouten) */

:root,
[data-theme="light"] {
    /* ── KLUBBFÄRGER (exakta från officiella logon) ──────── */
    --club-red: #C21B32;
    --club-red-deep: #951425;
    --club-red-bright: #DD3C53;
    --club-blue: #1A3060;
    --club-blue-deep: #0F1E40;
    --club-blue-bright: #2D4988;
    --club-gold: #897145;     /* olivkrans-guld från logon */
    --club-gold-bright: #B89766;
    --club-cream: #F4E5C2;
    --club-bone: #FBF7EE;

    /* ── YT-FÄRGER (LIGHT) ─────────────────────────────────
       Off-white men varmt, går mot cream/bone. INTE rent vitt. */
    --bg: #FBF7EE;              /* ny bone-bakgrund */
    --bg-elevated: #FFFFFF;
    --bg-subtle: #F4EDDF;
    --bg-hover: #EDE3CF;
    --bg-deep: #1A1410;         /* för kontrasterande sektioner */

    /* ── TEXT (LIGHT) ──────────────────────────────────────
       Mörk navy istället för svart. Läggs sig ovanpå cream
       med varm kontrast. */
    --text: #0E1729;
    --text-muted: #525A6B;
    --text-subtle: #8C92A2;
    --text-on-primary: #FFFFFF;
    --text-on-deep: #FBF7EE;

    /* ── BORDERS ───────────────────────────────────────────
       Aldrig grå streckar — alltid med ton från paletten. */
    --border: rgba(14, 23, 41, 0.08);
    --border-strong: rgba(14, 23, 41, 0.16);
    --border-accent: rgba(200, 16, 46, 0.20);

    /* ── SEMANTIK ──────────────────────────────────────────  */
    --primary: var(--club-red);
    --primary-deep: var(--club-red-deep);
    --primary-bright: var(--club-red-bright);
    --primary-hover: var(--club-red-deep);
    --accent: var(--club-blue);
    --accent-deep: var(--club-blue-deep);
    --highlight: var(--club-cream);

    --success: #1F7A3D;
    --warning: #B85B00;
    --danger: #B0152A;

    /* ── SKUGGOR ───────────────────────────────────────────
       Färgade skuggor, inte gråa. */
    --shadow-sm: 0 1px 2px rgba(14, 23, 41, 0.06);
    --shadow: 0 8px 24px -4px rgba(14, 23, 41, 0.12), 0 2px 6px rgba(14, 23, 41, 0.04);
    --shadow-lg: 0 24px 48px -12px rgba(14, 23, 41, 0.18), 0 4px 12px rgba(14, 23, 41, 0.06);
    --shadow-red: 0 16px 32px -8px rgba(194, 27, 50, 0.30);
    --shadow-deep: 0 24px 64px -16px rgba(14, 23, 41, 0.40);
}

/* ── DARK MODE ──────────────────────────────────────────────
   Dark är nästan blue-black, varma highlights. Mer "matchdag-
   under-strålkastare"-känsla än "tech-app". */
[data-theme="dark"] {
    --club-red: #FF4A60;
    --club-red-deep: #DD3C53;
    --club-red-bright: #FF6B7E;
    --club-blue: #6B85D6;
    --club-blue-deep: #4A66B5;
    --club-blue-bright: #8AA3E0;
    --club-gold: #C4A56E;
    --club-gold-bright: #D9BE8A;
    --club-cream: #F4E5C2;

    --bg: #0A0F1F;
    --bg-elevated: #131A2E;
    --bg-subtle: #1E263D;
    --bg-hover: #29324D;
    --bg-deep: #050813;

    --text: #F8F4E8;
    --text-muted: #B5BACC;
    --text-subtle: #6B7185;
    --text-on-primary: #FFFFFF;
    --text-on-deep: #FBF7EE;

    --border: rgba(248, 244, 232, 0.08);
    --border-strong: rgba(248, 244, 232, 0.16);
    --border-accent: rgba(255, 74, 96, 0.30);

    --primary: var(--club-red);
    --primary-deep: var(--club-red-deep);
    --primary-bright: var(--club-red-bright);
    --primary-hover: var(--club-red-bright);
    --accent: var(--club-blue);
    --accent-deep: var(--club-blue-deep);
    --highlight: var(--club-cream);

    --success: #4ADE80;
    --warning: #FBBF24;
    --danger: #FF6B7E;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.8);
    --shadow-red: 0 16px 32px -8px rgba(255, 74, 96, 0.40);
    --shadow-deep: 0 24px 64px -16px rgba(0, 0, 0, 0.9);
}

/* ── TYPOGRAFI-SYSTEM ───────────────────────────────────── */
:root {
    --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* Font-vikter */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Bricolage variable axes */
    --bc-tight: 75;     /* condensed/tight */
    --bc-normal: 100;   /* default */

    /* Skala — modular scale med 1.25x ratio + dramatic display sizes */
    --text-xs: 0.75rem;       /* 12 */
    --text-sm: 0.875rem;      /* 14 */
    --text-base: 1rem;        /* 16 */
    --text-lg: 1.125rem;      /* 18 */
    --text-xl: 1.25rem;       /* 20 */
    --text-2xl: 1.5rem;       /* 24 */
    --text-3xl: 2rem;         /* 32 */
    --text-4xl: 2.75rem;      /* 44 */
    --text-5xl: 4rem;         /* 64 */
    --text-6xl: 5.5rem;       /* 88 */
    --text-7xl: 7.5rem;       /* 120 */
    --text-display: clamp(3rem, 9vw, 8rem);
    --text-mega: clamp(4rem, 12vw, 11rem);

    /* Line heights — tighter för display, generösare för body */
    --leading-none: 1;
    --leading-tight: 1.05;
    --leading-snug: 1.15;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* Letter-spacing — dramatic på display */
    --tracking-tightest: -0.04em;
    --tracking-tighter: -0.03em;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.1em;
    --tracking-widest: 0.2em;
}

/* ── SPACING ────────────────────────────────────────────── */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;
    --space-11: 192px;

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;
}

/* ── LAYOUT ─────────────────────────────────────────────── */
:root {
    --container-narrow: 720px;
    --container: 1080px;
    --container-wide: 1280px;
    --container-mega: 1440px;
}

/* ── MOTION ─────────────────────────────────────────────── */
:root {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 1);

    --duration-fast: 200ms;
    --duration: 400ms;
    --duration-slow: 600ms;
    --duration-very-slow: 1000ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration: 0ms;
        --duration-slow: 0ms;
        --duration-very-slow: 0ms;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Kontextöverbryggande theme transition */
html {
    transition: background-color var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out);
}