/* ===========================================================================
   Superota — Design tokens

   Eén bron van waarheid voor het gastenportaal, de boekingsflow, het
   medewerkersportaal en de Filament-backoffice. Wijzig hier, niet in de losse
   pagina's: een eigen huisstijl is dit bestand (plus fonts.css en het logo)
   vervangen, zonder één view aan te raken.

   Standaard is neutraal: een koele leisteengrijze inkt en grijsschaal, wit, één
   indigo accent (dezelfde schaal als de primaire kleur van de backoffice,
   Filaments Color::Indigo), dunne outlines met een zachte schaduw en
   pill-vormige knoppen.

   De prefix `--app-` is de naamruimte van de componenten (zoals de klassen
   `.app-choice` en `.app-cal`), geen merk. De kleuren heten naar hun rol
   (accent), niet naar hun tint, zodat een andere huisstijl geen namen hoeft
   te veranderen.
   =========================================================================== */
:root {
  /* --- Brand core --------------------------------------------------------- */
  --app-accent:        #818CF8;
  --app-accent-600:    #6366F1;
  --app-accent-700:    #4F46E5;
  --app-accent-200:    #E0E7FF;
  --app-accent-100:    #EEF2FF;

  --app-ink:           #0f172a;
  --app-ink-soft:      #1E293B;
  --app-snow:          #FFFFFF;

  /* --- Neutral ramp ------------------------------------------------------- */
  --app-gray-950:      #0b1220;
  --app-gray-900:      #172033;
  --app-gray-700:      #334155;
  --app-gray-500:      #64748B;
  --app-gray-400:      #94A3B8;
  --app-gray-300:      #CBD5E1;
  --app-gray-200:      #E2E8F0;
  --app-gray-100:      #F1F5F9;
  --app-gray-50:       #F8FAFC;

  /* --- Status ------------------------------------------------------------- */
  --app-success:       #15803D;
  --app-warning:       #F59E0B;
  --app-danger:        #DC2626;
  --app-info:          var(--app-accent-600);

  /* --- Semantic surfaces & text ------------------------------------------ */
  --surface-page:     var(--app-snow);
  --surface-dark:     var(--app-ink);
  --surface-card:     var(--app-snow);
  --surface-raised:   var(--app-ink-soft);
  --surface-muted:    var(--app-gray-50);
  --surface-tint:     var(--app-accent-100);

  --text-strong:      var(--app-ink);
  --text-body:        var(--app-gray-700);
  --text-muted:       var(--app-gray-500);
  /* Accent als tekst op een lichte ondergrond (links, kleine koppen, vinkjes): de 700-tint,
     omdat de 600 op wit net onder 4,5:1 blijft. Een eigen hoofdkleur vervangt hem door een tint
     die dat wel haalt (App\Support\Branding\Palette). */
  --text-eyebrow:     var(--accent-text);

  --text-on-dark:        var(--app-snow);
  --text-on-dark-muted:  var(--app-gray-400);
  --text-on-dark-accent: var(--app-accent);

  --border-hairline:  var(--app-gray-200);
  --border-strong:    var(--app-ink);
  --border-on-dark:   rgba(255,255,255,0.16);

  --accent:           var(--app-accent);
  --accent-ink:       var(--app-ink);
  --accent-hover:     var(--app-accent-600);
  --accent-press:     var(--app-accent-700);
  --accent-text:      var(--app-accent-700);
  --focus-ring:       var(--app-accent-600);

  /* --- Buttons ------------------------------------------------------------ */
  /* Een knop leest zijn vlak, tekst, rand en vorm uit eigen tokens, zodat het thema van een
     school (Settings → Branding → Advanced) de knoppen kan veranderen zonder de andere vlakken
     in de accentkleur mee te nemen. Standaard: een gevulde pill. */
  --button-bg:        var(--accent);
  --button-ink:       var(--accent-ink);
  --button-border:    var(--border-strong);
  --button-bg-hover:  var(--accent-hover);
  --button-bg-press:  var(--accent-press);

  /* --- Typography --------------------------------------------------------- */
  /* Het display-font draagt de koppen. Gewicht, hoofdletters en spatiëring staan
     als eigen tokens naast het font, omdat een andere displayletter vaak ook een
     ander gewicht en een andere kapitalisatie vraagt dan de broodtekst.
     "Inter" komt uit fonts.css (gastenportaal), "Inter Variable" is dezelfde font
     zoals Filament hem in het panel registreert, waar fonts.css niet laadt. */
  --font-display: "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Inter", "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", monospace;
  --font-heading: var(--font-display);
  --font-body:    var(--font-sans);

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;
  --fw-display: var(--fw-extra);
  --tt-display: none;

  --type-hero:     clamp(3.5rem, 1.5rem + 8vw, 8rem);
  --type-display:  clamp(2.75rem, 1.4rem + 5vw, 5rem);
  --type-h1:       clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --type-h2:       clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --type-h3:       clamp(1.375rem, 1.1rem + 1vw, 1.75rem);

  --text-xl:   1.375rem;
  --text-lg:   1.125rem;
  --text-base: 1rem;
  --text-sm:   0.875rem;
  --text-xs:   0.75rem;

  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-normal:  1.55;

  --ls-display: -0.02em;
  --ls-eyebrow:  0.14em;
  --ls-button:   0.02em;

  /* --- Spacing ------------------------------------------------------------ */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-8:   3rem;
  --space-10:  4rem;
  --space-12:  5rem;
  --space-16:  7.5rem;
  --section-pad-y: clamp(3.5rem, 2rem + 7vw, 8rem);
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --content-max:   1200px;
  --prose-max:     68ch;

  /* --- Radius ------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-button: var(--radius-pill);

  /* --- Borders ------------------------------------------------------------ */
  --bw-hair:   1px;
  --bw-line:   2px;
  --bw-bold:   2px;

  /* --- Shadows ------------------------------------------------------------ */
  --shadow-xs:  0 1px 2px rgba(15,23,42,0.06);
  --shadow-sm:  0 2px 8px rgba(15,23,42,0.08);
  --shadow-md:  0 8px 24px rgba(15,23,42,0.10);
  --shadow-lg:  0 18px 48px rgba(15,23,42,0.16);
  /* De schaduw onder knoppen en kaarten, en de variant voor een kaart die
     aandacht vraagt of onder de muis staat. Een eigen token naast de gewone
     schaal, zodat een huisstijl het gewicht van die vlakken los kan zetten. */
  --shadow-emphasis:        0 1px 2px rgba(15,23,42,0.08), 0 4px 12px rgba(15,23,42,0.08);
  --shadow-emphasis-accent: 0 0 0 3px var(--app-accent-200), 0 6px 16px rgba(79,70,229,0.16);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
}

/* --- Herbruikbare tekst-recepten ----------------------------------------- */
.app-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}
.app-display {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: var(--tt-display);
}
.app-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
}