/*
 * Huisstijl van House of Sports — tokens, v1
 * Gegenereerd uit src/app/globals.css van De Arena door scripts/huisstijl-tokens.mjs.
 * Niet met de hand aanpassen: de volgende build overschrijft het.
 *
 * Gebruik: <link rel="stylesheet" href="https://arena.houseofsports.nl/huisstijl/v1/tokens.css">
 * en dan bijvoorbeeld background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
 * Donker thema: class="dark" of data-theme="dark" op <html>.
 * Uitleg en de contrastregel: docs/NIEUWE-TOOL.md §3.
 */

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('./fonts/HankenGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('./fonts/HankenGrotesk-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('./fonts/HankenGrotesk-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('./fonts/HankenGrotesk-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('./fonts/HankenGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('./fonts/HankenGrotesk-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('./fonts/HankenGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('./fonts/HankenGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('./fonts/HankenGrotesk-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;
  --brand-flame: 21 100% 50%;
  --brand-ember: 40 100% 50%;
  --brand-steel: 30 4% 40%;
  --brand-ink: 30 15% 5%;
  --brand-amber: 39 94% 53%;
  --brand-deep: 19 84% 52%;
  --background: 0 0% 96%;
  --foreground: 30 15% 5%;
  --card: 0 0% 100%;
  --card-foreground: 30 15% 5%;
  --muted: 30 17% 98%;
  --muted-foreground: 30 4% 40%;
  --border: 0 0% 90%;
  --input: 27 16% 87%;
  --ring: 21 100% 50%;
  --primary: 21 100% 50%;
  --primary-hover: 19 84% 52%;
  --primary-foreground: 30 15% 5%;
  --accent: 24 100% 96%;
  --accent-foreground: 22 100% 32%;
  --destructive: 3 65% 47%;
  --destructive-foreground: 0 0% 100%;
  --chart-1: 21 100% 50%;
  --chart-2: 224 76% 48%;
  --chart-3: 175 84% 32%;
  --chart-4: 262 83% 58%;
  --fase-idee: 0 0% 74%;
  --fase-nog-niet-gestart: 207 31% 58%;
  --fase-kick-off: 40 100% 50%;
  --fase-mee-bezig: 21 100% 50%;
  --fase-live: 152 55% 40%;
  --fase-afgerond: 0 0% 18%;
  --radius: 0.875rem;
  --organogram-ink: 0 0% 18%;
  --organogram-paper: 60 14% 98%;
  --organogram-bg: 0 0% 4%;
}

.dark,
[data-theme='dark'] {
  --brand-flame: 21 100% 50%;
  --brand-ember: 40 100% 50%;
  --brand-steel: 30 5% 58%;
  --brand-ink: 30 15% 5%;
  --brand-amber: 39 94% 53%;
  --brand-deep: 19 84% 52%;
  --background: 30 8% 9%;
  --foreground: 30 8% 96%;
  --card: 30 9% 14%;
  --card-foreground: 30 8% 96%;
  --muted: 30 7% 19%;
  --muted-foreground: 30 5% 68%;
  --border: 30 6% 24%;
  --input: 30 6% 29%;
  --ring: 40 100% 50%;
  --primary: 21 100% 50%;
  --primary-hover: 30 100% 56%;
  --primary-foreground: 0 0% 10%;
  --accent: 0 0% 24%;
  --accent-foreground: 40 100% 62%;
  --destructive: 0 70% 58%;
  --destructive-foreground: 0 0% 10%;
  --chart-1: 24 98% 47%;
  --chart-2: 217 91% 60%;
  --chart-3: 175 84% 32%;
  --chart-4: 258 90% 66%;
  --fase-idee: 0 0% 55%;
  --fase-nog-niet-gestart: 207 31% 58%;
  --fase-kick-off: 40 100% 50%;
  --fase-mee-bezig: 21 100% 50%;
  --fase-live: 152 50% 45%;
  --fase-afgerond: 0 0% 82%;
}

.bg-flame-gradient {
  background-image: linear-gradient(
    90deg,
    hsl(var(--brand-amber)) 0%,
    hsl(var(--brand-flame)) 55%,
    hsl(var(--brand-deep)) 100%
  );
}

.text-flame-gradient {
  background-image: linear-gradient(
    135deg,
    hsl(var(--brand-ember)) 0%,
    hsl(var(--brand-flame)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}