/* Kiki Mae design tokens — ported from resources/claude design handoff (canonical source).
   TODO before launch: self-host the fonts (Google Fonts remote loading leaks visitor IPs — AVG). */
@import url('https://fonts.googleapis.com/css2?family=Young+Serif&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Fragment+Mono&display=swap');

:root {
  /* Kernkleuren */
  --km-aubergine: #45303F;
  --km-aubergine-deep: #32222E;
  --km-aubergine-soft: #6B5A63;
  --km-klei: #A9603F;
  --km-klei-deep: #8A4C30;
  --km-klei-soft: #F7E8DE;
  --km-huid: #D9A88C;
  --km-huid-soft: #EDD3C2;
  --km-zand: #E9DFCE;
  --km-creme: #F5EFE6;
  --km-wit: #FFFFFF;
  --km-grijsroze: #8A7580;
  --km-lila: #D2BED9;       /* achtergrond van het beeldmerk */
  --km-lila-soft: #E8DCEC;

  /* Semantisch — oppervlakken */
  --surface-page: var(--km-creme);
  --surface-card: var(--km-wit);
  --surface-raised: var(--km-zand);
  --surface-accent-soft: var(--km-klei-soft);
  --surface-inverse: var(--km-aubergine);

  /* Semantisch — tekst */
  --text-heading: var(--km-aubergine);
  --text-body: #5F4E58;
  --text-muted: var(--km-grijsroze);
  --text-inverse: var(--km-creme);
  --text-accent: var(--km-klei);

  /* Semantisch — interactie */
  --accent: var(--km-klei);
  --accent-hover: var(--km-klei-deep);
  --primary: var(--km-aubergine);
  --primary-hover: var(--km-aubergine-deep);
  --focus-ring: rgba(169, 96, 63, 0.45);

  /* Lijnen */
  --border-subtle: #E3D9CB;
  --border-strong: #CDBFA9;

  /* Feedback */
  --positive: #5F7A5A;
  --positive-soft: #E4EBDF;
  --warning: #C08A2E;
  --warning-soft: #F3E7CE;
  --negative: #A93F3F;
  --negative-soft: #F3DDDA;

  /* Typografie */
  --font-display: 'Young Serif', 'Georgia', serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
  --font-mono: 'Fragment Mono', 'Courier New', monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 44px;
  --text-hero: 56px;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --tracking-label: 0.12em;

  /* Schaduwen & motion */
  --shadow-card: 0 1px 4px rgba(69, 48, 63, 0.08);
  --shadow-raised: 0 2px 16px rgba(69, 48, 63, 0.10);
  --shadow-modal: 0 12px 40px rgba(69, 48, 63, 0.18);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;

  /* Radii */
  --radius-card: 16px;
  --radius-inner: 12px;
  --radius-pill: 999px;
}