/* ===========================
   THEME: Creatief Warm Vriendelijk Speels
/* ===========================
   BRAND CORE (one source of truth)
   =========================== */
:root {
  /* Palet – basis (HSL voor makkelijk tweaken) */
  --brand-hue: 22;                    /* warm coral/oranje */
  --brand-sat: 78%;
  --brand-primary: hsl(var(--brand-hue) var(--brand-sat) 52%);
  --brand-primary-contrast: #ffffff;

  --brand-accent-hue: 332;            /* fuchsia/roze-paars */
  --brand-accent: hsl(var(--brand-accent-hue) 72% 58%);
  --brand-accent-contrast: #ffffff;

  /* Grijs-schaal (iets warmer) */
  --grey-0: #ffffff;
  --grey-1: #fff7f3;
  --grey-2: #fff1ea;
  --grey-3: #f3e2da;
  --grey-4: #e6d2c8;
  --grey-5: #bda79d;
  --grey-6: #8f7d74;
  --grey-7: #6c5d56;
  --grey-8: #3f3832;
  --grey-9: #2a2420;

  /* Semantic colors (afgeleid van palet) */
  --color-bg: var(--grey-0);
  --color-surface: #fff7f3;
  --color-elevated: #fffaf7;
  --color-border: #f3e2da;
  --color-text: #2f2a25;
  --color-text-muted: #7b6f67;
  --color-link: var(--brand-primary);
  --color-link-hover: hsl(var(--brand-hue) var(--brand-sat) 44%);
  --color-primary: var(--brand-primary);
  --color-primary-contrast: var(--brand-primary-contrast);
  --color-accent: var(--brand-accent);
  --color-accent-contrast: var(--brand-accent-contrast);

  /* Feedback */
  --color-info: hsl(205 88% 50%);
  --color-success: hsl(150 60% 36%);
  --color-warning: hsl(35 96% 46%);
  --color-danger: hsl(352 78% 50%);
  --color-info-contrast: #fff;
  --color-success-contrast: #0b281f;
  --color-warning-contrast: #281a00;
  --color-danger-contrast: #fff;

  /* Typografie */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --font-size-00: 0.75rem;   /* 12 */
  --font-size-0: 0.875rem;   /* 14 */
  --font-size-1: 1rem;       /* 16 | body */
  --font-size-2: 1.125rem;   /* 18 | lead */
  --font-size-3: 1.25rem;    /* 20 | subtitle */
  --font-size-4: 1.5rem;     /* 24 | h4 */
  --font-size-5: 1.875rem;   /* 30 | h3 */
  --font-size-6: 2.25rem;    /* 36 | h2 */
  --font-size-7: 3rem;       /* 48 | h1 */
  --font-size-8: 3.75rem;    /* 60 | hero */

  --line-compact: 1.2;
  --line-normal: 1.6;        /* iets losser, vriendelijk */
  --line-loose: 1.8;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing schaal (8px base) */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* Sizing & layout */
  --container-narrow: 48rem;   /* 768 */
  --container: 72rem;          /* 1152 */
  --container-wide: 90rem;     /* 1440 */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --border-thin: 1px;
  --border: 1px solid var(--color-border);

  /* Schaduw (zacht, diffuus) */
  --shadow-sm: 0 1px 2px rgba(22, 15, 10, 0.06);
  --shadow-md: 0 6px 16px rgba(22, 15, 10, 0.10);
  --shadow-lg: 0 14px 28px rgba(22, 15, 10, 0.16);

  /* Motion (expressiever) */
  --easing-standard: cubic-bezier(.25,.85,.2,1);
  --easing-emphasized: cubic-bezier(.2,1,.1,1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  /* Focus & states */
  --focus-ring: 0 0 0 3px hsl(var(--brand-hue) 90% 88%);
  --focus-outline: 2px solid hsl(var(--brand-hue) 75% 56%);
  --opacity-disabled: 0.5;

  /* Z-index schaal */
  --z-base: 0;
  --z-sticky: 10;
  --z-dropdown: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* Component tokens (bouwen op semantiek) */
  /* Buttons */
  --btn-bg: var(--color-primary);
  --btn-text: var(--color-primary-contrast);
  --btn-bg-hover: hsl(var(--brand-hue) var(--brand-sat) 44%);
  --btn-radius: var(--radius-lg);
  --btn-pad-y: 0.625rem;
  --btn-pad-x: 1rem;
  --btn-gap: 0.5rem;

  /* Extra button varianten */
  --btn-secondary-bg: #ffffff;
  --btn-secondary-text: var(--color-text);
  --btn-secondary-border: 1px solid hsl(var(--brand-hue) 40% 80%);
  --btn-secondary-hover: hsl(var(--brand-hue) 55% 96%);
  --btn-ghost-bg: transparent;
  --btn-ghost-text: hsl(var(--brand-hue) var(--brand-sat) 44%);
  --btn-ghost-hover: hsl(var(--brand-hue) 70% 96%);

  /* Links */
  --link-underline-offset: 2px;
  --link-underline-thickness: 1px;

  /* Cards */
  --card-bg: var(--color-elevated);
  --card-border: var(--border);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-sm);
  --card-pad: var(--space-5);

  /* Inputs */
  --input-bg: #ffffff;
  --input-text: var(--color-text);
  --input-border: 1px solid #efdfd6;
  --input-border-focus: 1px solid hsl(var(--brand-hue) 75% 56%);
  --input-radius: var(--radius-md);
  --input-pad-y: 0.5rem;
  --input-pad-x: 0.75rem;
  --input-height: 2.5rem;
  --input-placeholder: var(--color-text-muted);

  /* Surface/section */
  --section-pad-y: var(--space-7);
  --band-bg: #fff3ee;

  /* Hero / marketing typografie */
  --kicker-case: uppercase;
  --kicker-tracking: 0.1em;
  --kicker-weight: var(--weight-semibold);
  --hero-maxw: 44rem;
}

/* Optionele schaal voor primaire kleur (tints/shades) */
:root {
  --brand-50:  hsl(var(--brand-hue) 90% 97%);
  --brand-100: hsl(var(--brand-hue) 88% 93%);
  --brand-200: hsl(var(--brand-hue) 85% 86%);
  --brand-300: hsl(var(--brand-hue) 82% 76%);
  --brand-400: hsl(var(--brand-hue) 80% 64%);
  --brand-500: var(--brand-primary);
  --brand-600: hsl(var(--brand-hue) 78% 46%);
  --brand-700: hsl(var(--brand-hue) 76% 38%);
  --brand-800: hsl(var(--brand-hue) 74% 30%);
  --brand-900: hsl(var(--brand-hue) 72% 24%);
}

/* ===========================
   DARK THEME (warme nachttinten)
   =========================== */
[data-theme="dark"] {
  --color-bg: #140f13;
  --color-surface: #171215;
  --color-elevated: #1c1619;
  --color-border: #2a2024;
  --color-text: #f2e9e6;
  --color-text-muted: #c9b7b0;
  --color-link: hsl(var(--brand-hue) 85% 70%);
  --color-link-hover: hsl(var(--brand-hue) 88% 62%);

  --input-bg: #171215;
  --input-text: var(--color-text);
  --input-border: 1px solid #2a2024;
  --input-border-focus: 1px solid hsl(var(--brand-hue) 85% 66%);
  --card-bg: var(--color-elevated);
  --band-bg: #171215;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 14px 28px rgba(0,0,0,0.55);

  --focus-ring: 0 0 0 3px hsl(var(--brand-hue) 80% 26% / 0.75);
  --focus-outline: 2px solid hsl(var(--brand-hue) 85% 68%);
}

/* ===========================
   SIZE PRESETS
   =========================== */
:root {
  --size-sm-pad-y: 0.375rem;
  --size-sm-pad-x: 0.75rem;
  --size-sm-height: 2rem;

  --size-lg-pad-y: 0.75rem;
  --size-lg-pad-x: 1.25rem;
  --size-lg-height: 3rem;

  /* badges/tags */
  --tag-radius: var(--radius-pill);
  --tag-pad-y: 0.125rem;
  --tag-pad-x: 0.5rem;
}

/* ===========================
   STATE PALETTES (tints)
   =========================== */
:root {
  --tint-info-bg: hsl(205 90% 96%);
  --tint-info-border: hsl(205 85% 85%);
  --tint-success-bg: hsl(150 65% 95%);
  --tint-success-border: hsl(150 55% 78%);
  --tint-warning-bg: hsl(35 100% 96%);
  --tint-warning-border: hsl(35 90% 82%);
  --tint-danger-bg: hsl(352 90% 96%);
  --tint-danger-border: hsl(352 75% 82%);
}

/* ===========================
   IMAGES AND BACKGROUNDS
   =========================== */
:root {
  /* Image tokens */
  --image-radius: var(--radius-lg);
  --image-border: var(--border);
  --image-shadow: var(--shadow-md);
  --image-object-fit: cover;
  --image-object-position: center;
  --image-placeholder-bg: var(--color-surface);

  /* Common aspect ratios */
  --ratio-1-1: 1 / 1;
  --ratio-4-3: 4 / 3;
  --ratio-3-2: 3 / 2;
  --ratio-16-9: 16 / 9;
  --ratio-21-9: 21 / 9;

  /* Background images */
  --bg-image-size: cover;
  --bg-image-position: center;
  --bg-image-repeat: no-repeat;

  /* Overlays for readability on photos */
  --overlay-rgb: 0 0 0;
  --bg-overlay-opacity: 0.35;
  --bg-gradient-opacity: 0.65;

  /* Hero/min heights for image sections */
  --hero-image-min-h: 24rem;
  --section-image-min-h: 16rem;

  /* Optional image treatment */
  --image-saturation: 1;
  --image-contrast: 1;
}

[data-theme="dark"] {
  --image-placeholder-bg: #171215;
  --bg-overlay-opacity: 0.45;
  --bg-gradient-opacity: 0.75;
}