/* ==========================================================================
   pesuto :: design tokens
   Palet "Inkt en limoen". Licht is de standaard, donker via prefers-color-scheme
   of via [data-theme="dark"] op <html> als je een handmatige schakelaar wilt.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- vaste merkkleuren, veranderen niet per modus --- */
  --pesuto-ink:    #0F0F0E;
  --pesuto-paper:  #F4F2EA;
  --pesuto-lime:   #C6F24E;
  --pesuto-olive:  #4F6B08;

  /* --- semantische kleuren, lichte modus --- */
  --bg:            #F4F2EA;
  --bg-subtle:     #EAE7DB;
  --surface:       #FBFAF5;
  --surface-raise: #FFFFFF;
  --border:        #DFDBCE;
  --border-strong: #C4BFAE;
  --text:          #17171A;
  --text-muted:    #63615A;
  --accent:        #C6F24E;  /* vlakken en knoppen */
  --accent-ink:    #14170A;  /* tekst op --accent */
  --accent-text:   #4F6B08;  /* links en accenttekst, 5.45:1 op --bg */
  --accent-soft:   #EAF7C4;
  --focus:         #4F6B08;

  /* semantische statuskleuren */
  --ok:      #2F7A46;
  --warn:    #8A5A00;
  --danger:  #A32C1D;

  /* --- typografie --- */
  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   clamp(1.25rem, 0.4vw + 1.15rem, 1.375rem);
  --text-2xl:  clamp(1.5rem,  0.8vw + 1.3rem,  1.875rem);
  --text-3xl:  clamp(2rem,    1.8vw + 1.55rem, 2.75rem);
  --text-4xl:  clamp(2.5rem,  3.2vw + 1.8rem,  4rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal:1.6;

  --tracking-tight: -0.03em;
  --tracking-logo:  -0.045em;
  --tracking-wide:   0.06em;

  /* --- ruimte, schaal van 4px --- */
  --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;

  /* --- vormen --- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(15 15 14 / 0.06);
  --shadow:    0 2px 8px rgb(15 15 14 / 0.08);
  --shadow-lg: 0 12px 32px rgb(15 15 14 / 0.12);

  --ring: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent);

  --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --- layout --- */
  --content: 68rem;
  --prose:   38rem;
}

/* --- donkere modus --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0F0F0E;
    --bg-subtle:     #161614;
    --surface:       #191917;
    --surface-raise: #21211E;
    --border:        #2E2E29;
    --border-strong: #45443D;
    --text:          #EDEBE3;
    --text-muted:    #9B998F;
    --accent:        #C6F24E;
    --accent-ink:    #14170A;
    --accent-text:   #C6F24E;  /* 14.81:1 op --bg */
    --accent-soft:   #232B10;
    --focus:         #C6F24E;

    --ok:     #6FCB8B;
    --warn:   #E0B252;
    --danger: #F08B7A;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow:    0 2px 10px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 14px 36px rgb(0 0 0 / 0.55);
  }
}

/* --- handmatige schakelaar --- */
[data-theme="dark"] {
  --bg:            #0F0F0E;
  --bg-subtle:     #161614;
  --surface:       #191917;
  --surface-raise: #21211E;
  --border:        #2E2E29;
  --border-strong: #45443D;
  --text:          #EDEBE3;
  --text-muted:    #9B998F;
  --accent:        #C6F24E;
  --accent-ink:    #14170A;
  --accent-text:   #C6F24E;
  --accent-soft:   #232B10;
  --focus:         #C6F24E;
  --ok:     #6FCB8B;
  --warn:   #E0B252;
  --danger: #F08B7A;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow:    0 2px 10px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 14px 36px rgb(0 0 0 / 0.55);
}