/*
 * Steinerschool Gent — huisstijl in tokens.
 * Framework-onafhankelijk: plain CSS custom properties. Werkt in elk project
 * (React, Vue, Astro, statische HTML). Het Tailwind-blok onderaan is optioneel.
 *
 * Drie logokleuren, de Averia-letter, en "afgerond, niet afgesneden".
 *
 * De 500-waarden komen rechtstreeks uit het logobestand (LOGOhoriz_Steiner.ai),
 * niet uit een meting op een PNG. In druk: coral C2 M74 Y75 K0, gold is de
 * steunkleur OKERSTEINER (C3 M36 Y96 K12), blue C63 M16 Y10 K6. De overige vier
 * treden houden de lichtheid van de gids en zijn in OKLCH opnieuw afgeleid van
 * de tint van het logo.
 */

:root {
  /* --- Merkramps (identiek in licht en donker) --- */
  --brand-coral-100: #fee0da;
  --brand-coral-300: #fc9f90;
  --brand-coral-500: #ed4f3f;
  --brand-coral-700: #ad3f32;
  --brand-coral-900: #63241d;

  --brand-gold-100: #fbe9d3;
  --brand-gold-300: #f0be7a;
  --brand-gold-500: #d89214;
  --brand-gold-700: #9c6a17;
  --brand-gold-900: #5a3c0e;

  --brand-blue-100: #deecf4;
  --brand-blue-300: #9bc7dd;
  --brand-blue-500: #5da6c8;
  --brand-blue-700: #3e7189;
  --brand-blue-900: #23404e;

  /* --- Vlakken, licht (standaard) --- */
  --bg: #fdfaf7;
  --surface-1: #ffffff;
  --surface-2: #f3ece3;
  --text: #2a2420;
  --text-muted: #6b625a;
  --border: #e8e1d9;

  /* Tinten die met het thema mee moeten kantelen om leesbaar te blijven. */
  --alert-bg: var(--brand-coral-100);
  --alert-text: var(--brand-coral-700);
  --calm-text: var(--brand-blue-700);
  --warm-text: var(--brand-gold-700);

  /* --- Accent (data-accent wisselt het) --- */
  --accent: var(--brand-coral-500);
  /* Afgeleid van het accent, zodat een eigen merkkleur zijn hover-tint
     meebrengt zonder een tweede waarde in te voeren. */
  --accent-hover: color-mix(in srgb, var(--accent), black 16%);
  --accent-contrast: #ffffff;

  /* --- Vorm ---
   * De onregelmatige, handgemaakte radius is voor grote vlakken (header, grote
   * panelen), waar hij bedoeld oogt. Kleine chips en rijen krijgen een gewone
   * even radius: op die schaal wordt de asymmetrie ruis en vecht ze met de data.
   */
  --radius-sm: 0.4rem;
  --radius-md: 0.7rem;
  --radius-lg: 2.5rem 0.625rem 2.5rem 0.625rem / 3.125rem 0.875rem 3.125rem
    0.875rem;

  /* --- Type --- */
  --font-display: "Averia Sans Libre", cursive;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Vlakken, donker --- */
[data-theme="dark"] {
  --bg: #1c1815;
  --surface-1: #262019;
  --surface-2: #2f2820;
  --text: #f5efe8;
  --text-muted: #a89c8f;
  --border: #3a332b;

  --alert-bg: var(--brand-coral-900);
  --alert-text: var(--brand-coral-300);
  --calm-text: var(--brand-blue-300);
  --warm-text: var(--brand-gold-300);
}

[data-accent="gold"] {
  --accent: var(--brand-gold-500);
}
[data-accent="blue"] {
  --accent: var(--brand-blue-500);
}

/*
 * Kies één regel voor het thema en houd je eraan:
 *  - een scherm/kiosk: thema is een instelling (data-theme), geen voorkeur;
 *  - een gewone site: laat prefers-color-scheme meespelen door onderstaand
 *    blok aan te zetten, met data-theme="light" als ontsnapping.
 */
/*
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1815;
    --surface-1: #262019;
    --surface-2: #2f2820;
    --text: #f5efe8;
    --text-muted: #a89c8f;
    --border: #3a332b;
    --alert-bg: var(--brand-coral-900);
    --alert-text: var(--brand-coral-300);
    --calm-text: var(--brand-blue-300);
    --warm-text: var(--brand-gold-300);
  }
}
*/

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Kleine kapitalen-label boven kolommen en zones. */
.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Het feature-card-blob uit de gids: een scheve vorm die uit de hoek loopt,
   nooit een rechthoek. Zet hem in een positie:relative container. */
.blob {
  position: absolute;
  top: -30%;
  right: -20%;
  width: 70%;
  height: 160%;
  opacity: 0.6;
  clip-path: polygon(
    30% 0%,
    100% 10%,
    90% 60%,
    100% 100%,
    40% 90%,
    10% 100%,
    0% 40%
  );
}

/*
 * Eén regel tekst die wordt afgekapt. Averia's ascent-to-descent is 1.23em, dus
 * bij line-height 1 sneuvelen de staarten van g, j, p en /. 1.25 dekt de hele
 * em-box.
 */
.truncate-tight {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.25;
}

/* ------------------------------------------------------------------
 * Optioneel: Tailwind v4. Plak dit in je globals.css ná @import
 * "tailwindcss", zodat bg-surface-1 / text-muted / border-line bestaan.
 * De rounded-sm|md|lg-utilities pikken de --radius-* hierboven vanzelf op.
 * ------------------------------------------------------------------
@theme inline {
  --color-bg: var(--bg);
  --color-surface-1: var(--surface-1);
  --color-surface-2: var(--surface-2);
  --color-text: var(--text);
  --color-muted: var(--text-muted);
  --color-line: var(--border);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-contrast: var(--accent-contrast);
  --color-alert-bg: var(--alert-bg);
  --color-alert: var(--alert-text);
  --color-calm: var(--calm-text);
  --color-warm: var(--warm-text);
  --color-coral: var(--brand-coral-500);
  --color-gold: var(--brand-gold-500);
  --color-blue: var(--brand-blue-500);
  --font-display: var(--font-averia), "Averia Sans Libre", cursive;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
*/