/* ============================================================
   DE SCHOVENHORST — Colors & Type Foundations
   Basisschool in het bos. Seizoenskleuren van het bos.
   Friendly, but strak (clean / design-led).
   ============================================================ */

/* Fonts loaded from Google Fonts CDN.
   Display: Bricolage Grotesque — characterful, modern, design-forward, still warm.
   Body:    Hanken Grotesk — clean, humanist, highly legible, friendly. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

:root {
  /* ---------- BRAND PALETTE (the three forest animals) ---------- */
  /* Deer — autumn gold. The dominant mark color. */
  --gold-900: #6E4E16;
  --gold-700: #A9802F;
  --gold-600: #C39039;
  --gold-500: #D4A24A;   /* core brand gold */
  --gold-400: #E0B85F;
  --gold-300: #ECCB7C;
  --gold-200: #F4DDA3;
  --gold-100: #FBF0D2;

  /* Hummingbird — forest teal. Spring & summer foliage. Primary action color. */
  --teal-900: #143430;
  --teal-800: #1C4A44;
  --teal-700: #235A52;
  --teal-600: #2C6860;   /* core brand teal */
  --teal-500: #357B71;
  --teal-400: #4F968C;
  --teal-300: #82B6AE;
  --teal-200: #BCD7D2;
  --teal-100: #E4F0ED;

  /* Squirrel — russet earth. Autumn & bark. Warm secondary accent. */
  --rust-900: #4E2A23;
  --rust-700: #743F35;
  --rust-600: #8A4C40;
  --rust-500: #925248;   /* core brand rust */
  --rust-400: #A9685D;
  --rust-300: #C28F86;
  --rust-200: #DFBFB8;
  --rust-100: #F2E2DD;

  /* ---------- WARM NEUTRALS (paper, bark, mist) ---------- */
  --ink-900: #251D18;    /* deepest bark — near-black, warm */
  --ink-800: #33291F;
  --ink-700: #463A2E;
  --ink-600: #6A5C4D;    /* muted body / secondary text */
  --ink-500: #8C7E6E;
  --ink-400: #B3A795;    /* placeholder / disabled */
  --line-300: #E2D8C7;   /* hairline borders */
  --line-200: #ECE4D6;
  --paper-100: #F6F0E4;  /* sand surface */
  --paper-50:  #FAF6EE;  /* page background — warm cream */
  --white: #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --bg: var(--paper-50);
  --surface: var(--white);
  --surface-sunk: var(--paper-100);
  --fg-1: var(--ink-900);     /* primary text / headings */
  --fg-2: var(--ink-600);     /* body, secondary */
  --fg-3: var(--ink-500);     /* tertiary, captions */
  --fg-on-dark: #FBF7EF;
  --border: var(--line-300);
  --border-strong: #D2C5AE;

  --primary: var(--teal-600);
  --primary-hover: var(--teal-700);
  --primary-press: var(--teal-800);
  --primary-soft: var(--teal-100);
  --on-primary: #FBF7EF;

  --accent-gold: var(--gold-500);
  --accent-gold-soft: var(--gold-100);
  --accent-rust: var(--rust-500);
  --accent-rust-soft: var(--rust-100);

  --focus-ring: color-mix(in oklab, var(--teal-600) 55%, transparent);

  /* Status (kept within the warm forest world) */
  --success: #4F7A3A;
  --success-soft: #E9F1E0;
  --warning: var(--gold-600);
  --warning-soft: var(--gold-100);
  --danger: #B23B2E;
  --danger-soft: #F7E3DF;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* ---------- TYPE SCALE (1.5rem base, ~1.2 ratio with display jumps) ---------- */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-md: 1.125rem;   /* 18px */
  --text-lg: 1.375rem;   /* 22px */
  --text-xl: 1.75rem;    /* 28px */
  --text-2xl: 2.25rem;   /* 36px */
  --text-3xl: 3rem;      /* 48px */
  --text-4xl: 4rem;      /* 64px */
  --text-5xl: 5.25rem;   /* 84px */

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* ---------- RADII ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- SHADOWS (warm, soft, low-contrast) ---------- */
  --shadow-xs: 0 1px 2px rgba(56, 42, 28, 0.06);
  --shadow-sm: 0 2px 6px rgba(56, 42, 28, 0.08);
  --shadow-md: 0 8px 20px -6px rgba(56, 42, 28, 0.14);
  --shadow-lg: 0 20px 44px -12px rgba(56, 42, 28, 0.20);
  --shadow-focus: 0 0 0 4px var(--focus-ring);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — use as a reference / base layer
   ============================================================ */
.ds-h1, .ds-h2, .ds-h3, .ds-h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.ds-h1 { font-size: var(--text-4xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.ds-h2 { font-size: var(--text-3xl); font-weight: 700; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.ds-h3 { font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.ds-h4 { font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }

.ds-lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.ds-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
.ds-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-3);
}
.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-rust);
}