/* Design tokens — Organic design system (zie design_handoff_portfolio/README.md).
   Voeg geen extra kleuren toe. */

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  --color-neutral-900: #2e2b25;
  --color-on-accent-hover: #fff;

  /* Accent (terracotta) */
  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  /* Accent 2 (salie) */
  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  /* Aptos is een systeemfont (Microsoft 365 / Windows 11). */
  --font-heading: Aptos, "Segoe UI", Calibri, system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-body: Aptos, "Segoe UI", Calibri, system-ui, sans-serif;
  --font-display: Caprasimo, system-ui, sans-serif;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

/* Donker thema (knop in de navigatiebalk). Dezelfde tinten als het lichte thema:
   de schalen 100-900 zijn omgekeerd, zodat alle componenten vanzelf meegaan. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #1d1a16;
  --color-surface: #2a251e;
  --color-text: #f1e6d3;
  --color-accent: #f39a62;
  --color-accent-2: #a3b384;
  --color-divider: color-mix(in srgb, #f1e6d3 20%, transparent);

  --color-neutral-900: #000000;
  --color-on-accent-hover: #3a2112;

  --color-accent-100: #3a2112;
  --color-accent-200: #53301a;
  --color-accent-300: #733f1f;
  --color-accent-400: #965228;
  --color-accent-500: #c06a35;
  --color-accent-600: #e08a50;
  --color-accent-700: #f39a62;
  --color-accent-800: #ffc6a5;
  --color-accent-900: #ffe1d0;

  --color-accent-2-100: #232a19;
  --color-accent-2-200: #2f3a22;
  --color-accent-2-300: #435230;
  --color-accent-2-400: #5b6d42;
  --color-accent-2-500: #7a8a5e;
  --color-accent-2-600: #96a877;
  --color-accent-2-700: #b4c593;
  --color-accent-2-800: #d3e3b8;
  --color-accent-2-900: #ecf6d9;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #000 40%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #000 45%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #000 55%, transparent);
}