/* ThuisSaldo semantic tokens, light + dark (mobile/lib/core/theme/brand_colors.dart) */

:root {
  color-scheme: light dark;

  --gold: #f5b731;
  --gold-light: #ffe566;
  --orange: #f97316;
  --green: #22c55e;
  --green-dark: #16a34a;
  --green-deep: #15803d;
  --teal: #2dd4a7;
  --blue: #3b82f6;
  --red: #dc2626;

  /* ThuisSaldo-merkidentiteit: vlak, zonder gradients of schaduwen. */
  --brand-petrol: #123f3a;
  --brand-solar: #f2b84b;
  --brand-ink: #17211f;
  --brand-cream: #f7f5ef;

  /* Semantische knop- en focustokens - één primaire actiekleur site-breed */
  --btn-primary-bg: var(--green-deep);
  --btn-primary-bg-hover: var(--green-dark);
  --btn-primary-text: #ffffff;
  --focus-ring: 2px solid var(--green-dark);

  /* Typografieschaal (marketing) */
  --fs-h1: clamp(2.125rem, 5vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 4vw, 2.5rem);
  --fs-h3: 1.0625rem;
  --fs-lead: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --font: Inter, Manrope, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);
  --radius: 1rem;
  --radius-sm: 0.5rem;
  --radius-xs: 0.25rem;
  --radius-pill: 999px;
  --radius-full: 50%;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --radius-input: 0.625rem;
  --radius-phone: 2.25rem;
  --radius-phone-screen: 1.75rem;
  --max: 72rem;
  --content-max: 44rem;
  --prose-max: 47.5rem;
  --section-pad-y: 5rem;
  --section-pad-y-mobile: 3.5rem;
  --page-pad-x-mobile: 1.25rem;
  --panel-padding-mobile: 1.125rem 1.25rem;
  --touch-target-min: 3rem;
  --header-h: 4rem;

  /* Light (default + prefers-color-scheme: light) */
  --bg-canvas: #fafaf8;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-muted: #e8f5f0;
  --bg-header: rgba(250, 250, 248, 0.94);
  --border: #d4e4dc;
  --border-strong: #b8d4c8;

  --text-primary: #1a1f24;
  --text-secondary: #5c6670;
  --text-dim: #64748b;
  --link: #15803d;

  --hero-gradient: linear-gradient(165deg, #fef3c7 0%, #fff7ed 42%, #e8f5f0 100%);
  --hero-glow-gold: rgba(245, 183, 49, 0.2);
  --hero-glow-green: rgba(34, 197, 94, 0.12);
  --hero-text: #1a1f24;
  --hero-text-muted: #5c6670;
  --hero-eyebrow: #b45309;

  --shadow-card: 0 4px 24px rgba(15, 20, 25, 0.08);
  --shadow-glow: 0 0 0 1px rgba(34, 197, 94, 0.15), 0 24px 48px rgba(15, 20, 25, 0.12);

  --btn-secondary-bg: rgba(255, 255, 255, 0.85);
  --btn-secondary-border: var(--border);
  --label-bg: rgba(34, 197, 94, 0.1);
  --label-border: rgba(34, 197, 94, 0.22);
  --label-text: var(--green-deep);
  --accent-title: var(--green-deep);
  --accent-gold: var(--gold);
  --accent-green: var(--green);
  --text-muted: var(--text-dim);
  --panel-bg: var(--bg-surface);
  --panel-padding: 1.25rem 1.5rem;
  --panel-title-size: 1.0625rem;
  --panel-body-size: 0.9375rem;
  --footer-bg: #f4f6f5;
  --cta-band-bg: linear-gradient(180deg, #e8f5f0 0%, #fafaf8 100%);
}

/* Compactere header op mobiel: meer ruimte voor content in het eerste scherm. */
@media (max-width: 48rem) {
  :root {
    --header-h: 3.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas: #0f1419;
    --bg-surface: #1a1f26;
    --bg-elevated: #1e252d;
    --bg-muted: #252b33;
    --bg-header: rgba(15, 20, 25, 0.94);
    --border: #2e3640;
    --border-strong: #3d4654;

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-dim: #64748b;
    --link: #2dd4a7;

    --hero-gradient: linear-gradient(165deg, #3d2e0a 0%, #1a2e1f 38%, #0f1419 100%);
    --hero-glow-gold: rgba(245, 183, 49, 0.14);
    --hero-glow-green: rgba(34, 197, 94, 0.1);
    --hero-text: #f8fafc;
    --hero-text-muted: #94a3b8;
    --hero-eyebrow: #f5b731;

    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
    --shadow-glow: 0 0 0 1px rgba(245, 183, 49, 0.12), 0 24px 64px rgba(0, 0, 0, 0.45);

    --btn-secondary-bg: rgba(255, 255, 255, 0.06);
    --btn-secondary-border: var(--border);
    --label-bg: rgba(245, 183, 49, 0.1);
    --label-border: rgba(245, 183, 49, 0.2);
    --label-text: var(--gold);
    --accent-title: var(--gold-light);
    --accent-gold: var(--gold);
    --accent-green: var(--green);
    --text-muted: var(--text-dim);
    --panel-bg: var(--bg-elevated);
    --panel-padding: 1.25rem 1.5rem;
    --panel-title-size: 1.0625rem;
    --panel-body-size: 0.9375rem;
    --footer-bg: #080b0e;
    --cta-band-bg: linear-gradient(180deg, #252b33 0%, #0f1419 100%);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: #0f1419;
  --bg-surface: #1a1f26;
  --bg-elevated: #1e252d;
  --bg-muted: #252b33;
  --bg-header: rgba(15, 20, 25, 0.94);
  --border: #2e3640;
  --border-strong: #3d4654;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-dim: #64748b;
  --link: #2dd4a7;
  --hero-gradient: linear-gradient(165deg, #3d2e0a 0%, #1a2e1f 38%, #0f1419 100%);
  --hero-glow-gold: rgba(245, 183, 49, 0.14);
  --hero-glow-green: rgba(34, 197, 94, 0.1);
  --hero-text: #f8fafc;
  --hero-text-muted: #94a3b8;
  --hero-eyebrow: #f5b731;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-glow: 0 0 0 1px rgba(245, 183, 49, 0.12), 0 24px 64px rgba(0, 0, 0, 0.45);
  --btn-secondary-bg: rgba(255, 255, 255, 0.06);
  --btn-secondary-border: var(--border);
  --label-bg: rgba(245, 183, 49, 0.1);
  --label-border: rgba(245, 183, 49, 0.2);
  --label-text: var(--gold);
  --accent-title: var(--gold-light);
  --accent-gold: var(--gold);
  --accent-green: var(--green);
  --text-muted: var(--text-dim);
  --panel-bg: var(--bg-elevated);
  --panel-padding: 1.25rem 1.5rem;
  --panel-title-size: 1.0625rem;
  --panel-body-size: 0.9375rem;
  --footer-bg: #080b0e;
  --cta-band-bg: linear-gradient(180deg, #252b33 0%, #0f1419 100%);
}

[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #fafaf8;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-muted: #e8f5f0;
  --bg-header: rgba(250, 250, 248, 0.94);
  --border: #d4e4dc;
  --border-strong: #b8d4c8;
  --text-primary: #1a1f24;
  --text-secondary: #5c6670;
  --text-dim: #64748b;
  --link: #15803d;
  --hero-gradient: linear-gradient(165deg, #fef3c7 0%, #fff7ed 42%, #e8f5f0 100%);
  --hero-glow-gold: rgba(245, 183, 49, 0.2);
  --hero-glow-green: rgba(34, 197, 94, 0.12);
  --hero-text: #1a1f24;
  --hero-text-muted: #5c6670;
  --hero-eyebrow: #b45309;
  --shadow-card: 0 4px 24px rgba(15, 20, 25, 0.08);
  --shadow-glow: 0 0 0 1px rgba(34, 197, 94, 0.15), 0 24px 48px rgba(15, 20, 25, 0.12);
  --btn-secondary-bg: rgba(255, 255, 255, 0.85);
  --btn-secondary-border: var(--border);
  --label-bg: rgba(34, 197, 94, 0.1);
  --label-border: rgba(34, 197, 94, 0.22);
  --label-text: var(--green-deep);
  --accent-title: var(--green-deep);
  --accent-gold: var(--gold);
  --accent-green: var(--green);
  --text-muted: var(--text-dim);
  --panel-bg: var(--bg-surface);
  --panel-padding: 1.25rem 1.5rem;
  --panel-title-size: 1.0625rem;
  --panel-body-size: 0.9375rem;
  --footer-bg: #f4f6f5;
  --cta-band-bg: linear-gradient(180deg, #e8f5f0 0%, #fafaf8 100%);
}