/* ============================================================================
   Rustmoment in de klas — Design Tokens
   Colors, typography, spacing, radii, shadows.
   Speels maar professioneel · Friendly but professional
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Caveat:wght@400;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS (from logo + huisstijl) ----------------------- */

  /* Primary: the wordmark blue — used for headings, main CTAs, brand surfaces. */
  --ridk-blue:        #3075B1;
  --ridk-blue-700:    #265E8E;
  --ridk-blue-300:    #6FA3D0;
  --ridk-blue-100:    #E3EEF7;

  /* Deep teal — secondary brand color from the dark wordmark + huisstijl
     extension. Used as a calm anchor for headings/text/footer. */
  --ridk-teal:        #3A6476;
  --ridk-teal-700:    #2B4D5C;
  --ridk-teal-300:    #6F8E9C;
  --ridk-teal-100:    #DDE5EA;

  /* Coral / Tomato — the wordmark "bowl" color. Energetic accent, used for
     primary CTAs, callouts, social-card highlights. */
  --ridk-coral:       #FC6048;
  --ridk-coral-700:   #D84528;
  --ridk-coral-300:   #FFA192;
  --ridk-coral-100:   #FFE0DA;

  /* Mustard / Honey — wordmark "head" color. Warm, sun-like; used for
     framing devices, highlight strokes, klassen-abonnement borders. */
  --ridk-yellow:      #FFAC24;
  --ridk-yellow-700:  #E08D00;
  --ridk-yellow-300:  #FFCB75;
  --ridk-yellow-100:  #FFF1D8;

  /* Sage / Mint pebble — wordmark "base" color. Grounding, calm; used for
     huisstijl extension (highlight pills behind handwritten words). */
  --ridk-sage:        #91BEBB;
  --ridk-sage-700:    #6E9D9A;
  --ridk-sage-300:    #B8D5D2;
  --ridk-sage-100:    #E3EEED;

  /* Olive (extension) — used in homepage redesign for grounded sections. */
  --ridk-olive:       #9CA66B;
  --ridk-olive-700:   #7A8453;

  /* Soft rose (extension) — used in kaartenset highlight pills. */
  --ridk-rose:        #F2C7C2;
  --ridk-rose-700:    #D89D97;

  /* ---------- NEUTRALS -------------------------------------------------- */

  --ridk-paper:       #FAF6EE;   /* warm cream — kaartenset background */
  --ridk-paper-grain: #F4EFE3;   /* slightly warmer */
  --ridk-bg:          #FFFFFF;
  --ridk-fg:          #2A3742;   /* near-teal, never pure black */
  --ridk-fg-2:        #5A6B77;   /* secondary text */
  --ridk-fg-3:        #8A98A2;   /* tertiary / captions */
  --ridk-line:        #E6EAEE;   /* hairlines */
  --ridk-line-warm:   #E8DFCC;   /* hairlines on cream */

  /* ---------- SEMANTIC FOREGROUND --------------------------------------- */
  --fg:               var(--ridk-fg);
  --fg-2:             var(--ridk-fg-2);
  --fg-3:             var(--ridk-fg-3);
  --bg:               var(--ridk-bg);
  --bg-paper:         var(--ridk-paper);

  /* ---------- TYPE ------------------------------------------------------ */
  --font-display:     'Quicksand', system-ui, sans-serif;   /* 700 — for headings, brand */
  --font-body:        'Quicksand', system-ui, sans-serif;   /* 400/500 — for body */
  --font-script:      'Caveat', 'Quicksand', cursive;       /* hand-written touches (quotes, signatures) */

  /* Type scale (1.250 major-third, scaled gently). All in rem. */
  --fs-xs:            0.75rem;   /* 12px — micro labels */
  --fs-sm:            0.875rem;  /* 14px — captions */
  --fs-base:          1rem;      /* 16px — body */
  --fs-md:            1.125rem;  /* 18px — comfortable body */
  --fs-lg:            1.375rem;  /* 22px — lead / sub-heads */
  --fs-xl:            1.75rem;   /* 28px — h3 */
  --fs-2xl:           2.25rem;   /* 36px — h2 */
  --fs-3xl:           3rem;      /* 48px — h1 */
  --fs-display:       4rem;      /* 64px — hero */

  --lh-tight:         1.1;
  --lh-snug:          1.25;
  --lh-normal:        1.5;
  --lh-relaxed:       1.65;

  /* ---------- SPACING (4-px grid) --------------------------------------- */
  --space-1:          0.25rem;   /*  4px */
  --space-2:          0.5rem;    /*  8px */
  --space-3:          0.75rem;   /* 12px */
  --space-4:          1rem;      /* 16px */
  --space-5:          1.5rem;    /* 24px */
  --space-6:          2rem;      /* 32px */
  --space-7:          2.5rem;    /* 40px */
  --space-8:          3rem;      /* 48px */
  --space-9:          4rem;      /* 64px */
  --space-10:         6rem;      /* 96px */

  /* ---------- RADII (generous, soft, never sharp) ----------------------- */
  --radius-xs:        4px;
  --radius-sm:        8px;
  --radius-md:        14px;
  --radius-lg:        20px;
  --radius-xl:        28px;
  --radius-pill:      999px;
  --radius-blob:      48% 52% 60% 40% / 50% 45% 55% 50%;  /* organic blob — for huisstijl pebble */

  /* ---------- SHADOWS — soft, never harsh, biased warm ------------------ */
  --shadow-xs:        0 1px 2px rgba(58,100,118,0.06);
  --shadow-sm:        0 2px 6px rgba(58,100,118,0.08);
  --shadow-md:        0 6px 18px rgba(58,100,118,0.10);
  --shadow-lg:        0 14px 36px rgba(58,100,118,0.14);
  --shadow-card:      0 8px 22px rgba(48,117,177,0.10);

  /* ---------- MOTION ---------------------------------------------------- */
  --ease-soft:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:         140ms;
  --dur-base:         220ms;
  --dur-slow:         400ms;
}

/* ============================================================================
   SEMANTIC TYPOGRAPHY
   ========================================================================= */

html { font-family: var(--font-body); color: var(--fg); }
body { font-family: var(--font-body); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--fg); }

h1, .ridk-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ridk-teal);
  margin: 0 0 var(--space-5);
}

h2, .ridk-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--ridk-teal);
  margin: 0 0 var(--space-4);
}

h3, .ridk-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--ridk-teal);
  margin: 0 0 var(--space-3);
}

h4, .ridk-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--ridk-teal);
  margin: 0 0 var(--space-3);
}

p, .ridk-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.ridk-lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  font-weight: 500;
}

.ridk-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ridk-coral);
}

.ridk-caption {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}

.ridk-script {
  font-family: var(--font-script);
  font-weight: 600;
  color: var(--ridk-teal);
}

/* Quote — handwritten feel, used for testimonials */
blockquote, .ridk-quote {
  font-family: var(--font-script);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--ridk-teal);
  margin: 0;
}

/* Highlight pill — the signature "huisstijl" device.
   Place behind a word with a colored pebble/pill. */
.ridk-highlight {
  display: inline-block;
  padding: 0.05em 0.4em 0.1em;
  border-radius: var(--radius-pill);
  background: var(--ridk-yellow-300);
  color: var(--ridk-teal);
}
.ridk-highlight--coral { background: var(--ridk-coral-300); }
.ridk-highlight--sage  { background: var(--ridk-sage-300); }
.ridk-highlight--rose  { background: var(--ridk-rose); }