/* ============================================================
   Shootique app, design tokens
   Huisstijl mei 2026, één bron van waarheid
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap');

:root {
  /* Achtergronden */
  --color-bg-page: #F4F6F3;
  --color-bg-surface: #FFFFFF;
  --color-bg-soft: #ECF0EA;

  /* Tekst */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #5F5C56;
  --color-text-tertiary: #A39E94;

  /* Randen */
  --color-border-subtle: #C4BFB5;
  --color-border-soft: #E5DFD3;

  /* Accent (enige knal kleur) */
  --color-accent: #DC335A;
  --color-accent-hover: #B92C4D;
  --color-accent-soft: #FBE5EC;

  /* Semantisch */
  --color-success: #678E8D;
  --color-success-soft: rgba(103, 142, 141, 0.12);
  --color-warning: #DDB671;
  --color-error: #EAB39F;
  --color-error-soft: rgba(234, 179, 159, 0.18);
  --color-error-text: #7A3520;

  /* Categorie kleuren (4 hoofd + 4 soft) */
  --color-cat-blush: #E5C9BE;
  --color-cat-blush-soft: #F0DDD3;
  --color-cat-butterscotch: #DDB671;
  --color-cat-butterscotch-soft: #EFD6A0;
  --color-cat-duckegg: #BECDC8;
  --color-cat-duckegg-soft: #D8E0DC;
  --color-cat-smoke: #A5B0B2;
  --color-cat-smoke-soft: #C9D1D2;

  /* Tekst op pills */
  --color-cat-blush-text: #7A4A38;
  --color-cat-butterscotch-text: #5C3F18;
  --color-cat-duckegg-text: #2F4A44;
  --color-cat-smoke-text: #3A4A4D;

  /* Typografie */
  --font-display: 'Amatic SC', cursive;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Tekstgroottes */
  --fs-tiny: 11px;
  --fs-small: 12px;
  --fs-body: 14px;
  --fs-h3: 18px;
  --fs-h2: 24px;
  --fs-h1: 44px;
  --fs-hero: 72px;

  /* Gewichten */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-display: 700;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Hoeken */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Schaduwen, subtiel */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);

  /* Sidebar */
  --sidebar-width: 240px;

  /* Transition */
  --t-fast: 120ms ease;
  --t-med: 200ms ease;
}

/* Reset basics */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }