/* ============================================================
   URBAN GRND — tokens.css
   Brand variabelen + fonts. @font-face-paden zijn CSS-relatief
   (../fonts/) en werken daarom op elke pagina-diepte, file:// én server.
   ============================================================ */

/* ---- Made Tommy (koppen én tekst) ---- */
@font-face{font-family:"Made Tommy";src:url("../fonts/MadeTommy-300.woff2") format("woff2"),url("../fonts/MadeTommy-300.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Made Tommy";src:url("../fonts/MadeTommy-400.woff2") format("woff2"),url("../fonts/MadeTommy-400.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Made Tommy";src:url("../fonts/MadeTommy-500.woff2") format("woff2"),url("../fonts/MadeTommy-500.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Made Tommy";src:url("../fonts/MadeTommy-700.woff2") format("woff2"),url("../fonts/MadeTommy-700.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Made Tommy";src:url("../fonts/MadeTommy-800.woff2") format("woff2"),url("../fonts/MadeTommy-800.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Made Tommy";src:url("../fonts/MadeTommy-900.woff2") format("woff2"),url("../fonts/MadeTommy-900.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}

/* ---- Made Tommy Soft (Black) — titels ---- */
@font-face{font-family:"Made Tommy Soft";src:url("../fonts/MadeTommySoft.woff2") format("woff2"),url("../fonts/MadeTommySoft.woff") format("woff");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* ===== Brand colours ===== */
  --ug-violet-900:#220559;
  --ug-violet-800:#2a0676;  /* donkerste vlak / ink op amber */
  --ug-violet-700:#350096;  /* deep purple — kaarten, contrast */
  --ug-violet-500:#5a08d2;  /* PRIMAIR violet — hoofdachtergrond */
  --ug-violet-400:#7b38e0;
  --ug-violet-200:#c3b3ee;  /* lavendel — gedempte tekst */

  --ug-amber-700:#c97f1e;
  --ug-amber-500:#e39638;   /* brand amber — het enige accent */
  --ug-amber-300:#f6c479;

  --ug-white:#ffffff;
  --ug-paper:#f4f1fb;       /* lichte app-surface */
  --ug-ink:#1c0a4d;         /* tekst op wit/amber */
  --ug-lavender:#c3b3ee;
  --ug-lavender-dim:#9c86d6;
  --ug-border-light:#d9cef2;

  /* ===== Semantisch ===== */
  --surface-deep:var(--ug-violet-800);
  --surface:var(--ug-violet-500);
  --surface-card:var(--ug-violet-700);
  --surface-light:var(--ug-white);
  --surface-paper:var(--ug-paper);

  --on-dark:var(--ug-white);
  --on-dark-muted:var(--ug-lavender);
  --on-light:var(--ug-ink);
  --on-light-muted:#6a5a9a;

  --action:var(--ug-amber-500);
  --action-hover:var(--ug-amber-700);
  --on-action:var(--ug-white);
  --accent:var(--ug-amber-500);

  --border-light:var(--ug-border-light);
  --border-on-dark:rgba(255,255,255,.18);

  /* ===== Typografie ===== */
  --font-display:"Made Tommy Soft","Made Tommy",system-ui,sans-serif;
  --font-heading:"Made Tommy",system-ui,sans-serif;
  --font-body:"Made Tommy",system-ui,-apple-system,sans-serif;

  --text-display:clamp(3rem,7vw,6rem);
  --text-h1:clamp(2.25rem,4.5vw,3.75rem);
  --text-h2:clamp(1.75rem,3vw,2.5rem);
  --text-h3:1.5rem; --text-h4:1.25rem;
  --text-lg:1.125rem; --text-base:1rem; --text-sm:.875rem; --text-xs:.75rem;

  --leading-tight:.95; --leading-snug:1.12; --leading-normal:1.5;
  --tracking-display:-.01em; --tracking-label:.16em;

  /* ===== Spacing (4px) ===== */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;

  /* ===== Radius ===== */
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;

  /* ===== Shadow & glow ===== */
  --shadow-sm:0 2px 8px rgba(26,4,80,.14);
  --shadow-md:0 12px 30px rgba(26,4,80,.22);
  --shadow-lg:0 24px 60px rgba(26,4,80,.34);
  --glow-amber:0 10px 32px rgba(227,150,56,.42);

  /* ===== Layout ===== */
  --header-h:76px;
  --maxw:1240px;
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); font-weight:500;
  font-size:var(--text-base); line-height:var(--leading-normal);
  color:var(--on-light); background:var(--surface-paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:900; line-height:var(--leading-snug);
  letter-spacing:var(--tracking-display); text-transform:uppercase; margin:0;
}
a{color:inherit;text-decoration:none}
img{display:block}
button{font-family:inherit}

/* toegankelijkheid — geldt overal */
:focus-visible{outline:3px solid var(--ug-amber-300);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}