/* =============================================================================
   Dansebroen v2 — Design-tokens (shared/tokens.css)
   =============================================================================

   ENESTE fil i projektet der må indeholde rå farve-/font-værdier.
   Alt andet (components.css, sider, JS) refererer KUN semantiske tokens
   via var(--token). Håndhæves af tools/check-tokens.sh (exit 1 ved fund
   af hex/font-family uden for denne fil).

   ARKITEKTUR — to lag, så et rebrand er en lille, sikker ændring:

     LAG 1  PALET & PRIMITIVER   (rå værdier — "skift HER ved nyt design")
     LAG 2  SEMANTISKE TOKENS    (roller — komponenter bruger KUN disse)

   REBRAND-OPSKRIFT: rediger LAG 1 (paletten + gradienterne + @font-face).
   Lad LAG 2's navne stå urørt — hele fladen (public/portal/admin) følger med
   automatisk, fordi intet komponent-CSS kender de rå værdier.

   Skriftvalg: display = Barlow Condensed (kondenseret, sporty versal-følelse,
   beslægtet med — men ikke — Bebas/Oswald). Brødtekst = Figtree (rolig,
   humanistisk-geometrisk sans). Begge selvhostet (OFL) i shared/fonts/,
   font-display: swap. Ét sted at skifte skrift: @font-face-blokken + de to
   --font-*-tokens nedenfor.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   @font-face — skrifter indlæses ÉT sted (kun her).
   latin dækker dansk (æ ø å); latin-ext dækker øvrige europæiske navne.
   -------------------------------------------------------------------------- */

/* Display — Barlow Condensed 600 */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/barlow-condensed-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Display — Barlow Condensed 700 */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/barlow-condensed-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Brødtekst — Figtree (variabel skrift, én fil dækker 300–900) */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("fonts/figtree-var-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================
   LAG 1 — PALET & PRIMITIVER   (rå værdier — skift HER ved rebrand)
   ============================================================================ */
:root {
  /* --- Basis sort/hvid -------------------------------------------------- */
  --palette-white: #ffffff;
  --palette-black: #0b0d14; /* næsten-sort (logo/base) — ikke rent #000 */

  /* --- Neutrale (kølig slate, harmonerer med marineblå) ----------------- */
  --palette-neutral-50: #f6f8fb;
  --palette-neutral-100: #edf0f5;
  --palette-neutral-200: #dfe3ec; /* fine skillelinjer/rammer (dekorativt) */
  --palette-neutral-300: #c7cdda; /* stærkere skillelinje */
  --palette-neutral-400: #98a1b4; /* KUN dekorativt/disabled — ikke tekst på hvid */
  --palette-neutral-500: #616b80; /* sekundær tekst / placeholder (5.35:1 på hvid) */
  --palette-neutral-600: #454e60;
  --palette-neutral-700: #2e3547;
  --palette-neutral-800: #1e2433;
  --palette-neutral-900: #141926; /* primær tekst (17.55:1 på hvid) */
  --palette-neutral-border-strong: #7c8496; /* interaktive kontrolrammer (3.75:1 — WCAG 1.4.11) */

  /* --- Primær duotone: marineblå -> violet ------------------------------ */
  --palette-navy: #1e2a63;       /* brand marineblå */
  --palette-navy-strong: #18224f;/* hover på marine-flader */
  --palette-navy-deep: #111a40;  /* mørkeste marine — footer/hero-base */
  --palette-violet: #5c2e9e;     /* violet (gradient-slut) */
  --palette-violet-strong: #4a2585;
  --palette-violet-deep: #3a1c6e;
  --palette-navy-soft: #e7ecf9;  /* lys marine-tint (badge/alert-bund) */
  --palette-violet-soft: #efe7fb;/* lys violet-tint */

  /* --- Accent: koral/magenta (CTA — dansesportens energi) --------------- */
  --palette-accent: #e11955;        /* CTA-fyld (hvid tekst 4.70:1) */
  --palette-accent-strong: #b9083f; /* hover / link-tekst (hvid 6.63:1) */
  --palette-accent-soft: #fce7ee;   /* lys tint (badge/alert-bund) */

  /* --- Semantiske statusfarver ----------------------------------------- */
  --palette-success: #127a43;      /* hvid tekst 5.40:1 */
  --palette-success-soft: #e4f4ea; /* tekst-på-soft 4.74:1 */
  --palette-warning: #8a5a00;      /* hvid tekst 5.93:1 */
  --palette-warning-soft: #fbf0d8; /* tekst-på-soft 5.24:1 */
  --palette-danger: #c41f38;       /* hvid tekst 5.83:1 */
  --palette-danger-soft: #fbe6e9;  /* tekst-på-soft 4.89:1 */

  /* --- Gradienter & duotone (CSS — aldrig indbagt i billedfiler) --------
     Rebrand rammer al billedbehandling øjeblikkeligt, fordi duotonen
     er et overlay her, ikke i JPG'erne. */
  --gradient-hero: linear-gradient(
    135deg,
    var(--palette-navy-deep) 0%,
    var(--palette-navy) 42%,
    var(--palette-violet) 100%
  );
  --gradient-section: linear-gradient(
    160deg,
    var(--palette-navy) 0%,
    var(--palette-violet-deep) 100%
  );
  --gradient-accent: linear-gradient(
    120deg,
    var(--palette-accent) 0%,
    var(--palette-violet) 100%
  );
  /* Duotone-overlay lægges OVER et foto (mix-blend + alpha) -> ensartet
     brand-look på blandede fotokvaliteter. */
  --duotone-overlay: linear-gradient(
    150deg,
    rgba(17, 26, 64, 0.86) 0%,
    rgba(92, 46, 158, 0.68) 100%
  );
  /* Hero-duotone: kraftigere navy->violet-slør, der lægges NORMAL (ikke
     multiply) over forsidens varme foto. Multiply kan ikke tilføre den
     blå/violette kanal til et rødt foto, så heroen ville ellers læse
     crimson; den tætte normal-veil sikrer en ren navy->violet brandflade
     (accent/magenta er forbeholdt CTA-knapper). Hvid herotekst bevarer
     WCAG-kontrast langt over AA (~11:1 målt på lyseste punkt bag teksten). */
  --duotone-hero: linear-gradient(
    150deg,
    rgba(17, 26, 64, 0.9) 0%,
    rgba(30, 42, 99, 0.84) 48%,
    rgba(74, 37, 133, 0.8) 100%
  );
  /* Panel-duotone: lettere navy->violet-veil til fotoflader UDEN tekst
     (forsidens hero-sidepanel). Samme normal-blend-princip som
     --duotone-hero, men tyndere, så dansefotoet reelt bærer fladen —
     hvid tekst må ALDRIG stå direkte på denne (brug --duotone-hero). */
  --duotone-panel: linear-gradient(
    150deg,
    rgba(17, 26, 64, 0.62) 0%,
    rgba(30, 42, 99, 0.5) 48%,
    rgba(74, 37, 133, 0.46) 100%
  );
  /* Scrim: mørk bund-til-top, så hvid tekst nederst på et fotokort altid
     har kontrast (uanset billedet). */
  --scrim-photo: linear-gradient(
    to top,
    rgba(11, 13, 20, 0.82) 0%,
    rgba(11, 13, 20, 0.32) 46%,
    rgba(11, 13, 20, 0) 78%
  );
  --gradient-skeleton: linear-gradient(
    100deg,
    var(--palette-neutral-100) 30%,
    var(--palette-neutral-200) 50%,
    var(--palette-neutral-100) 70%
  );

  /* --- Skygger (tonet mod marineblå — aldrig ren sort) ------------------ */
  --palette-shadow-color: 17 26 64; /* rgb-kanaler til rgba(...) nedenfor */

  /* --- Skrift-familier (de ENESTE font-family-værdier i projektet) ------ */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", menlo,
    consolas, monospace;

  /* --- Ikon-data-URIs til form-kontroller ------------------------------
     En CSS-var kan ikke nå ind i en data-URI, så den farve, ikonet males med,
     bages ind HER (aldrig i components.css). Rebrand: skift stroke-farven.
     select-pil = neutral-500; afkrydsning = hvid (on-accent). */
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23616b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-check-on-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ============================================================================
   LAG 2 — SEMANTISKE TOKENS   (roller — brug KUN disse i komponenter)
   ============================================================================ */
:root {
  /* --- Flader & tekst --------------------------------------------------- */
  --color-bg: var(--palette-white);
  --color-surface: var(--palette-white);
  --color-surface-subtle: var(--palette-neutral-50);
  --color-surface-sunken: var(--palette-neutral-100);
  --color-surface-inverse: var(--palette-navy-deep);

  --color-text: var(--palette-neutral-900);
  --color-text-secondary: var(--palette-neutral-500);
  --color-text-muted: var(--palette-neutral-400); /* dekorativt/disabled */
  --color-text-on-brand: var(--palette-white);
  --color-text-on-accent: var(--palette-white);
  --color-heading: var(--palette-neutral-900);

  /* --- Rammer & skillelinjer ------------------------------------------- */
  --color-border: var(--palette-neutral-200);
  --color-border-strong: var(--palette-neutral-300);
  --color-divider: var(--palette-neutral-200);

  /* --- Brand / primær -------------------------------------------------- */
  --color-primary: var(--palette-navy);
  --color-primary-strong: var(--palette-navy-strong);
  --color-primary-deep: var(--palette-navy-deep);
  --color-primary-soft: var(--palette-navy-soft);
  --color-on-primary: var(--palette-white);
  --color-violet: var(--palette-violet);
  --color-violet-soft: var(--palette-violet-soft);

  /* --- Accent / CTA ---------------------------------------------------- */
  --color-accent: var(--palette-accent);
  --color-accent-strong: var(--palette-accent-strong);
  --color-accent-soft: var(--palette-accent-soft);
  --color-on-accent: var(--palette-white);
  --color-link: var(--palette-accent-strong);
  --color-link-hover: var(--palette-accent);

  /* --- Status ---------------------------------------------------------- */
  --color-success: var(--palette-success);
  --color-success-soft: var(--palette-success-soft);
  --color-warning: var(--palette-warning);
  --color-warning-soft: var(--palette-warning-soft);
  --color-danger: var(--palette-danger);
  --color-danger-soft: var(--palette-danger-soft);
  --color-info: var(--palette-navy);
  --color-info-soft: var(--palette-navy-soft);

  /* --- Formularer ------------------------------------------------------ */
  --color-input-bg: var(--palette-white);
  --color-input-border: var(--palette-neutral-border-strong);
  --color-input-text: var(--palette-neutral-900);
  --color-input-placeholder: var(--palette-neutral-500);
  --color-input-disabled-bg: var(--palette-neutral-100);

  /* --- Fokus (synlig tastatur-ring) ------------------------------------ */
  --color-focus-ring: var(--palette-accent);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring: 0 0 0 var(--focus-ring-offset) var(--color-bg),
    0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width))
    var(--color-focus-ring);

  /* --- Flader oven på brand-gradient (chips/paneler på mørk hero) ------- */
  --color-on-brand-surface: rgba(255, 255, 255, 0.14);
  --color-on-brand-border: rgba(255, 255, 255, 0.32);

  /* --- Mørk footer ----------------------------------------------------- */
  --color-footer-bg: var(--palette-navy-deep);
  --color-footer-text: var(--palette-white);
  --color-footer-muted: var(--palette-neutral-300); /* 10.58:1 på footer */
  --color-footer-border: rgba(255, 255, 255, 0.12);

  /* --- Overlay/backdrop ------------------------------------------------- */
  --color-backdrop: rgba(11, 13, 20, 0.55);

  /* =====================================================================
     Typografi
     ===================================================================== */
  --font-size-2xs: 0.6875rem; /* 11px — badges/små labels */
  --font-size-xs: 0.75rem;    /* 12px — captions, tabeldata */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px — brødtekst */
  --font-size-md: 1.125rem;   /* 18px — lead */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */
  --font-size-3xl: 2.25rem;   /* 36px */
  /* Display — flydende (clamp) versal Barlow */
  --font-size-display-sm: clamp(1.75rem, 1.3rem + 2.2vw, 2.5rem);
  --font-size-display-md: clamp(2.25rem, 1.5rem + 3.6vw, 3.75rem);
  --font-size-display-lg: clamp(2.75rem, 1.4rem + 6vw, 5.25rem);

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

  --line-height-display: 1.02;
  --line-height-heading: 1.15;
  --line-height-snug: 1.35;
  --line-height-body: 1.6;

  --tracking-tight: -0.01em;
  --tracking-display: 0.004em; /* Barlow versal: kun et pift */
  --tracking-normal: 0;
  --tracking-label: 0.09em;    /* versal eyebrows/labels (typografi: 5–12%) */
  --tracking-caps: 0.06em;

  --measure-body: 68ch;   /* læselængde 45–90 tegn */
  --measure-narrow: 42ch;

  /* =====================================================================
     Spacing (4px-basis)
     ===================================================================== */
  --space-0: 0;
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem;  /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.5rem;  /* 24 */
  --space-6: 2rem;    /* 32 */
  --space-7: 3rem;    /* 48 */
  --space-8: 4rem;    /* 64 */
  --space-9: 6rem;    /* 96 */
  --space-10: 8rem;   /* 128 */

  /* =====================================================================
     Radius — ÉN skala (shape-lock). Dokumenteret regel:
       knapper = pill · kort = lg · inputs/kontroller = sm · badges = pill
     ===================================================================== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --radius-button: var(--radius-pill);
  --radius-card: var(--radius-lg);
  --radius-control: var(--radius-sm);
  --radius-badge: var(--radius-pill);

  /* =====================================================================
     Skygger (tonet mod marineblå)
     ===================================================================== */
  --shadow-xs: 0 1px 2px rgba(var(--palette-shadow-color), 0.06);
  --shadow-sm: 0 2px 6px rgba(var(--palette-shadow-color), 0.08);
  --shadow-md: 0 8px 24px rgba(var(--palette-shadow-color), 0.1);
  --shadow-lg: 0 18px 48px rgba(var(--palette-shadow-color), 0.16);
  --shadow-xl: 0 28px 70px rgba(var(--palette-shadow-color), 0.22);

  /* =====================================================================
     Bevægelse
     ===================================================================== */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 120ms var(--ease-out);
  --transition: 200ms var(--ease-out);
  --transition-slow: 320ms var(--ease-out);

  /* =====================================================================
     Layout
     ===================================================================== */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-narrow: 760px;
  --header-height: 4.5rem; /* 72px */

  /* =====================================================================
     Z-index-skala (ingen vilkårlige tal ude i komponenterne)
     ===================================================================== */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-header: 1030;
  --z-backdrop: 1040;
  --z-modal: 1050;
  --z-toast: 1060;
}