/*
  Creative ZOO — brand tokens til interne værktøjer.
  Version 2.0 — 2026-08-19. Se BRAND.md for versionsnummer/changelog og
  regler for hvornår hvad bruges.
  Denne fil er selvstændig — importér den, ret ikke stierne.
*/

/* ---------- Creative ZOO Sans ---------- */

@font-face {
  font-family: "Creative ZOO Sans";
  src: url("fonts/CreativeZooSans-Thin.woff2") format("woff2"),
       url("fonts/CreativeZooSans-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Sans";
  src: url("fonts/CreativeZooSans-ThinOblique.woff2") format("woff2"),
       url("fonts/CreativeZooSans-ThinOblique.woff") format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Sans";
  src: url("fonts/CreativeZooSans-Light.woff2") format("woff2"),
       url("fonts/CreativeZooSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Sans";
  src: url("fonts/CreativeZooSans-LightOblique.woff2") format("woff2"),
       url("fonts/CreativeZooSans-LightOblique.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Sans";
  src: url("fonts/CreativeZooSans-Regular.woff2") format("woff2"),
       url("fonts/CreativeZooSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Sans";
  src: url("fonts/CreativeZooSans-RegularOblique.woff2") format("woff2"),
       url("fonts/CreativeZooSans-RegularOblique.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Sans";
  src: url("fonts/CreativeZooSans-Bold.woff2") format("woff2"),
       url("fonts/CreativeZooSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Sans";
  src: url("fonts/CreativeZooSans-BoldOblique.woff2") format("woff2"),
       url("fonts/CreativeZooSans-BoldOblique.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Sans";
  src: url("fonts/CreativeZooSans-Black.woff2") format("woff2"),
       url("fonts/CreativeZooSans-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Sans";
  src: url("fonts/CreativeZooSans-BlackOblique.woff2") format("woff2"),
       url("fonts/CreativeZooSans-BlackOblique.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Creative ZOO Slab ---------- */

@font-face {
  font-family: "Creative ZOO Slab";
  src: url("fonts/CreativeZooSlab-Thin.woff2") format("woff2"),
       url("fonts/CreativeZooSlab-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Slab";
  src: url("fonts/CreativeZooSlab-Thinoblique.woff2") format("woff2"),
       url("fonts/CreativeZooSlab-Thinoblique.woff") format("woff");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Slab";
  src: url("fonts/CreativeZooSlab-Light.woff2") format("woff2"),
       url("fonts/CreativeZooSlab-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Slab";
  src: url("fonts/CreativeZooSlab-Lightoblique.woff2") format("woff2"),
       url("fonts/CreativeZooSlab-Lightoblique.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Slab";
  src: url("fonts/CreativeZooSlab-Regular.woff2") format("woff2"),
       url("fonts/CreativeZooSlab-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Slab";
  src: url("fonts/CreativeZooSlab-Regularoblique.woff2") format("woff2"),
       url("fonts/CreativeZooSlab-Regularoblique.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Slab";
  src: url("fonts/CreativeZooSlab-Bold.woff2") format("woff2"),
       url("fonts/CreativeZooSlab-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Slab";
  src: url("fonts/CreativeZooSlab-Boldoblique.woff2") format("woff2"),
       url("fonts/CreativeZooSlab-Boldoblique.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Slab";
  src: url("fonts/CreativeZooSlab-Black.woff2") format("woff2"),
       url("fonts/CreativeZooSlab-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creative ZOO Slab";
  src: url("fonts/CreativeZooSlab-Blackoblique.woff2") format("woff2"),
       url("fonts/CreativeZooSlab-Blackoblique.woff") format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- Farver ---------- */
/* Navngivning følger Notion-brandguidens egne kategorier og navne 1:1.
   Se BRAND.md for de fulde tabeller (CMYK/Pantone) og Kims anvisning om
   at bruge de vibrante varianter til digitale interne værktøjer. */

:root {
  /* Primære farver */
  --czoo-sort: #000000;
  --czoo-hvid: #ffffff;

  /* Sekundære farver */
  --czoo-roed: #ff6591;
  --czoo-primary-blue: #313f93;
  --czoo-gul: #feed48;
  --czoo-graa: #ebebeb;

  /* Sekundære farver vibrant */
  --czoo-vivid-blue: #314ae2;
  --czoo-roed-vibrant: #ff6d92;

  /* Set på czoo.dk (ikke i Notion-teksten) — det faktiske "sort" i UI
     (mørke sektioner, fyldte knapper) er #1b1b1c, ikke rent #000000.
     Målt via computed styles på footer-baggrund og "Hvem er du?"-knappen. */
  --czoo-off-black: #1b1b1c;

  --czoo-font-sans: "Creative ZOO Sans", Arial, sans-serif;
  --czoo-font-slab: "Creative ZOO Slab", Arial, sans-serif;

  /* Set på czoo.dk (ikke i Notion-teksten) — fuldt afrundede piller til
     knapper/badges. Brug den, hvor der skal en fuldt rund kant på, uanset
     elementets højde. */
  --czoo-radius-pill: 999px;

  /* ---------- UI-overflader og tekst (semantiske tokens) ---------- */
  /* Ikke fra Notion — afledt af hvordan interne CZOO-værktøjer rent faktisk
     bruger farverne. Brug ALTID disse i stedet for color-mix(..., transparent)
     eller anden opacity på tekst/kanter — se BRAND.md "Undgå AI-typiske
     mønstre". Lyst er standard-æstetikken for interne værktøjer (Kim besluttede
     dette 2026-08-19 efter at have set begge temaer side om side i et testprojekt).
     Byg altid lyst tema først, medmindre et konkret projekt eksplicit beder om mørkt.

     --czoo-surface-raised er bevidst identisk med --czoo-surface: kort/paneler
     får IKKE en lysere baggrund end siden ("elevation"/skygge-erstatning via
     gråtone). Hverken czoo.dk eller CZOO's Keynote-facit adskiller sektioner
     sådan — de bruger en flad, ensfarvet baggrund og adskiller udelukkende med
     en tynd kant (--czoo-border). Tokennet findes stadig, så et konkret
     projekt kan overskrive det bevidst, men default er "ingen elevation".

     Kun ÉT dæmpet tekst-niveau (--czoo-text-muted), ikke to. Målt direkte i
     czoo.dk's kode: på mørk baggrund (esgparat.dk) er selv den dæmpede
     brødtekst under en overskrift stadig relativt lys (#c7c7c8, ikke en
     svag grå) — og bruges KUN til egentlig brødtekst/støttetekst under en
     overskrift, aldrig til tabeldata, labels eller kolonneoverskrifter. På
     lys baggrund (czoo.dk/tekst, czoo.dk/kontakt) er selv støttetekst
     (jobtitel, telefonnummer) stort set ren sort/hvid, ikke dæmpet. Så: brug
     --czoo-text (fuld kontrast) som standard for ALT — labels, tabeldata,
     kolonneoverskrifter, eyebrows — og reservér --czoo-text-muted udelukkende
     til en decideret brødtekst-sætning under en overskrift.

     --czoo-hvid (ren hvid) og --czoo-graa (#ebebeb) er begge set som FLAD
     sidebaggrund på czoo.dk (hvid på fx czoo.dk/tekst, en lysegrå ~#f2f2f2 —
     praktisk talt --czoo-graa — på czoo.dk/kontakt), ikke som et "hævet
     kort"-lag oven på hvid. */
  --czoo-surface: var(--czoo-hvid);
  --czoo-surface-raised: var(--czoo-surface);
  --czoo-text: var(--czoo-off-black);
  --czoo-text-muted: #55555a;
  --czoo-border: #d8d8d8;
}

/* ---------- Mørkt tema ---------- */
/* Inert som standard — aktiveres kun ved at et projekt selv sætter
   data-theme="dark" på <html> (eller tilsvarende element). Pakken bygger
   bevidst IKKE en automatisk prefers-color-scheme-switch her, da det ville
   ændre udseendet af alle eksisterende projekter, der importerer tokens.css,
   uden varsel. Se BRAND.md "Lyst/mørkt tema" for hvornår det giver mening
   at bruge dette. */
[data-theme="dark"] {
  /* Samme "ingen elevation"-princip som det lyse tema: surface-raised er
     identisk med surface som standard. */
  --czoo-surface: var(--czoo-off-black);
  --czoo-surface-raised: var(--czoo-surface);
  --czoo-text: var(--czoo-hvid);
  --czoo-text-muted: #c7c7c8;
  --czoo-border: #3a3a3c;
}


/* ---------- Skalaer ---------- */
/* Ikke fra Notion — nødvendige for at agenter genbruger samme spacing/
   størrelser i stedet for at opfinde rå px/rem-værdier fra projekt til
   projekt. Se BRAND.md "Skalaer" og "Komponenter". */

:root {
  /* Spacing — til komponent-padding/gaps. Fluid hero-spacing (fx en stor
     forside-margin) må stadig bruge clamp() med to af disse tokens som
     grænser; til almindelig UI-spacing, brug disse direkte, ikke rå px. */
  --czoo-space-3xs: 0.25rem;  /* 4px */
  --czoo-space-2xs: 0.5rem;   /* 8px */
  --czoo-space-xs: 0.75rem;   /* 12px */
  --czoo-space-sm: 1rem;      /* 16px */
  --czoo-space-md: 1.25rem;   /* 20px */
  --czoo-space-lg: 1.5rem;    /* 24px */
  --czoo-space-xl: 2rem;      /* 32px */
  --czoo-space-2xl: 3rem;     /* 48px */
  --czoo-space-3xl: 4rem;     /* 64px */

  /* Breakpoints kan ikke være CSS-variabler (virker ikke i @media) — brug
     disse to tal direkte: @media (max-width: 960px) for tablet/kollaps af
     flerkolonne-layout, @media (max-width: 480px) for mobil-finjustering. */

  /* Font-size — til alt UNDER hero-tekst-niveau (labels, brødtekst, data,
     mindre overskrifter). Hero-H1'er er fortsat projekt-specifik clamp(),
     jf. "Typografi" nedenfor. */
  --czoo-fs-2xs: 0.75rem;    /* 12px — tabel-th, mikro-labels */
  --czoo-fs-xs: 0.8125rem;   /* 13px — metatekst */
  --czoo-fs-sm: 0.875rem;    /* 14px — formular-labels, sekundær tekst */
  --czoo-fs-base: 1rem;      /* 16px — brødtekst-standard */
  --czoo-fs-md: 1.125rem;    /* 18px — lead/introtekst */
  --czoo-fs-lg: 1.375rem;    /* 22px — panel-underoverskrifter */
  --czoo-fs-xl: 1.75rem;     /* 28px — h2/sektionsoverskrift */
  --czoo-fs-2xl: 2.25rem;    /* 36px — ikke-hero h1 */
  --czoo-fs-3xl: 3rem;       /* 48px — store KPI-tal */

  /* Z-index */
  --czoo-z-sticky: 10;    /* sticky topbar/nav */
  --czoo-z-dropdown: 20;  /* menuer, popovers */
  --czoo-z-overlay: 30;   /* modal-baggrund */
  --czoo-z-modal: 40;     /* modal/dialog-indhold */
  --czoo-z-toast: 50;     /* toasts/notifikationer */
  --czoo-z-skiplink: 60;  /* skal altid vinde over fokus-synlighed */

  /* Timing — holdt minimal, matcher den underspillede Helte-arketype.
     Ingen bounce/spring-easing. */
  --czoo-duration-fast: 120ms;   /* hover/farve-mikrointeraktioner */
  --czoo-duration-base: 180ms;   /* standard: knapper, badges, panel-toggles */
  --czoo-duration-spinner: 800ms; /* undtagelsen — lineær, uendelig rotation, ikke en transition */
  --czoo-ease-standard: ease-out;

  /* Ny, ikke-pilleformet radius til formular-kontroller (inputs/selects/
     textareas) — kun --czoo-radius-pill fandtes før, og en pilleformet
     tekstboks ser forkert ud. */
  --czoo-radius-control: 10px;

  /* Ikon-størrelser, til brug med .czoo-icon i components.css. */
  --czoo-icon-size-sm: 1rem;    /* 16px */
  --czoo-icon-size-md: 1.25rem; /* 20px — standard */
  --czoo-icon-size-lg: 1.5rem;  /* 24px */

  /* Zebra-striping til tabeller — se BRAND.md "Zebra-striping vs.
     elevation". Bevidst en EGEN token, ikke en genbrug af --czoo-surface/
     --czoo-off-black/--czoo-hvid: en tidlig testbygning genbrugte
     --czoo-off-black til zebra-rækker i mørkt tema, hvor det var identisk
     med sidens egen baggrund — zebra-rækkerne var derfor usynlige. Denne
     token er garanteret forskellig fra --czoo-surface i begge temaer. */
  --czoo-surface-zebra: var(--czoo-graa); /* #ebebeb, samme diskrete niveau som czoo.dk's flade sidebaggrunde */
}
[data-theme="dark"] {
  --czoo-surface-zebra: #2a2a2c; /* ny værdi, ikke målt fra czoo.dk — tjek visuelt i et rigtigt mørkt-tema-projekt */
}



/* ---------- Typografi-roller ---------- */
/* Direkte kodning af rollefordelingen fra BRAND.md / Notion "Typografi".
   Ingen nye regler — samme mapping som guiden selv angiver. */

.czoo-overskrift {
  font-family: var(--czoo-font-sans);
  font-weight: 900; /* Sans Black */
  font-style: normal;
}

.czoo-underoverskrift {
  font-family: var(--czoo-font-slab);
  font-weight: 100; /* Slab Thin */
  font-style: normal;
}

.czoo-mellemrubrik,
.czoo-broedtekst {
  font-family: var(--czoo-font-slab);
  font-weight: 300; /* Slab Light */
  font-style: normal;
}

.czoo-infotekst {
  font-family: var(--czoo-font-sans);
  font-weight: 300; /* Sans Light Oblique */
  font-style: italic;
}