/* ============================================================
   Drijver's TC — Design tokens
   Fonts + colors + typography + spacing.
   Brand red sampled from the DTC tennis-ball logo: #D52A2B.
   Warm cream/ink neutrals keep things gezellig & paper-like.
   A festive gold is reserved for the diamanten jubileum.
   ============================================================ */

/* ---- Webfonts (officiële huisstijl 2025, self-hosted) ----
   Parkinsans: friendly variable display sans (wght 300–800) — koppen, grote cijfers.
   Inter: neutral variable workhorse (100–900, incl. italic) — body & UI + italic-accenten. */
@font-face {
  font-family: 'Parkinsans';
  src: url('assets/fonts/Parkinsans-VariableFont.ttf') format('truetype');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/Inter-Italic-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Brand red scale (tennis-ball red) ---- */
  --red-50:  #FCEBEB;
  --red-100: #F8D2D2;
  --red-200: #F0A9A9;
  --red-300: #E67A7B;
  --red-400: #DD4D4E;
  --red-500: #D52D2A;   /* ← brand red, officiële huisstijl 2025 */
  --red-600: #B81F20;
  --red-700: #951A1B;
  --red-800: #6E1616;
  --red-900: #4A1011;

  /* ---- Warm neutral / "stone" scale ---- */
  --white:    #FFFFFF;
  --cream:    #FBF6F0;   /* default page paper */
  --sand:     #F3EBE1;   /* sunken / alternate surface */
  --stone-50:  #FAF7F3;
  --stone-100: #F1EAE3;
  --stone-200: #E3D8CD;
  --stone-300: #CCBEB0;
  --stone-400: #A8998A;
  --stone-500: #837466;
  --stone-600: #61564D;
  --stone-700: #453D37;
  --stone-800: #2B2521;
  --stone-900: #1A1512;
  --ink:       #211A18;  /* primary text — warm near-black */

  /* ---- Festive gold (jubilee accent — use sparingly) ---- */
  --gold-100: #F6ECCF;
  --gold-300: #E2C879;
  --gold-500: #BF9B30;   /* champagne gold */
  --gold-700: #8A6F1E;

  /* ---- Optional supporting "court" green (tennis context only) ---- */
  --court-100: #DCEAE2;
  --court-500: #3A7D5C;
  --court-700: #275A41;

  /* ---- Semantic state colors ---- */
  --success: #3A7D5C;
  --warning: #BF9B30;
  --danger:  #C0392B;

  /* ---- Surfaces & background ---- */
  --bg:              var(--cream);
  --surface:         var(--white);
  --surface-sunken:  var(--sand);
  --surface-inverse: var(--ink);
  --surface-brand:   var(--red-500);

  /* ---- Text ---- */
  --text:           var(--ink);
  --text-muted:     var(--stone-600);
  --text-subtle:    var(--stone-500);
  --text-on-brand:  var(--white);
  --text-on-dark:   var(--cream);
  --text-link:      var(--red-600);

  /* ---- Borders & lines ---- */
  --border:         var(--stone-200);
  --border-strong:  var(--stone-300);
  --border-brand:   var(--red-500);
  --line-court:     var(--white);

  /* ---- Interactive / primary ---- */
  --primary:         var(--red-500);
  --primary-hover:   var(--red-600);
  --primary-active:  var(--red-700);
  --on-primary:      var(--white);
  --accent:          var(--gold-500);
  --focus-ring:      var(--red-500);

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  --font-display: 'Parkinsans', system-ui, sans-serif; /* koppen, posters, grote cijfers */
  --font-sans:    'Inter', system-ui, sans-serif;      /* body, UI */
  --font-serif:   'Inter', system-ui, sans-serif;      /* italic-accenten (bv. "Vier je mee?") */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    800;

  --width-normal:   100;
  --width-expanded: 125;
  --width-narrow:    78;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  clamp(2rem, 4.2vw, 3rem);
  --text-4xl:  clamp(2.6rem, 6vw, 4rem);
  --text-5xl:  clamp(3.4rem, 9vw, 6rem);
  --display:   clamp(4.5rem, 13vw, 11rem);

  --leading-tight:   1.04;
  --leading-snug:    1.18;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.14em;

  /* =========================================================
     SPACING · RADII · SHADOWS · LAYOUT · MOTION
     ========================================================= */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  --shadow-xs: 0 1px 2px rgba(33, 26, 24, 0.06);
  --shadow-sm: 0 2px 6px rgba(33, 26, 24, 0.08);
  --shadow-md: 0 6px 18px rgba(33, 26, 24, 0.10);
  --shadow-lg: 0 16px 40px rgba(33, 26, 24, 0.14);
  --shadow-red: 0 10px 28px rgba(213, 42, 43, 0.28);
  --ring-focus: 0 0 0 3px rgba(213, 42, 43, 0.35);

  --border-width: 1.5px;
  --border-width-bold: 3px;

  --container:      1200px;
  --container-wide: 1440px;
  --container-text: 68ch;
  --gutter: clamp(1rem, 4vw, 4rem);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-normal: 240ms;
  --dur-slow:   420ms;
}