/* Generated from tokens/tokens.json. Do not edit this file directly.
 * Springcast Design System 1.0.0
 * Regenerate: node scripts/build-tokens.mjs
 * Verify: node scripts/build-tokens.mjs --check
 * Light foundation; brand palette values never change by application. */
:root,
.sc-system {
  color-scheme: light;

  /* Merkpalet — bestaande bronwaarden, stabiel in alle toepassingen */
  --sc-palette-iris-50: #F4F1FB;
  --sc-palette-iris-100: #E6DEF6;
  --sc-palette-iris-300: #A48CDC;
  --sc-palette-iris-500: #5B3BD1;
  --sc-palette-iris-600: #4A2BB8;
  --sc-palette-iris-700: #371F8E;
  --sc-palette-iris-900: #1E1153;
  --sc-palette-ember-100: #FCE8C3;
  --sc-palette-ember-300: #F4BE5E;
  --sc-palette-ember-500: #F2A52E;
  --sc-palette-ember-700: #A36514;
  --sc-palette-petrol-50: #EAF7F3;
  --sc-palette-petrol-100: #CDEBE3;
  --sc-palette-petrol-300: #4FBEA8;
  --sc-palette-petrol-500: #0E8C76;
  --sc-palette-petrol-600: #0B6F5E;
  --sc-palette-petrol-700: #13524A;
  --sc-palette-paper: #FBF9F5;
  --sc-palette-bone: #F3EFE7;
  --sc-palette-mist: #E2DCD0;
  --sc-palette-slate-500: #6B6457;
  --sc-palette-slate-700: #2F2A22;
  --sc-palette-ink: #15120D;
  --sc-palette-on-ink-body: #CFC8BC;

  /* Functioneel rood — 500 behouden als bronwaarde; 50, 100, 600, 700 zijn v1-voorstel */
  --sc-palette-error-50: #FBEDEC;
  --sc-palette-error-100: #F4D5D2;
  --sc-palette-error-500: #B85959;
  --sc-palette-error-600: #A33D40;
  --sc-palette-error-700: #862C30;

  /* Semantische kleuren — gebruik deze rollen in componenten */
  --sc-bg-canvas: var(--sc-palette-paper);
  --sc-bg-subtle: var(--sc-palette-bone);
  --sc-bg-brand: var(--sc-palette-iris-600);
  --sc-bg-inverse: var(--sc-palette-ink);
  --sc-bg-selected: var(--sc-palette-iris-50);
  --sc-bg-disabled: var(--sc-palette-bone);
  --sc-bg-overlay: rgba(21, 18, 13, 0.42);
  --sc-fg: var(--sc-palette-slate-700);
  --sc-fg-heading: var(--sc-palette-ink);
  --sc-fg-muted: var(--sc-palette-slate-500);
  --sc-fg-link: var(--sc-palette-iris-600);
  --sc-fg-link-hover: var(--sc-palette-iris-700);
  --sc-fg-selected: var(--sc-palette-iris-700);
  --sc-fg-disabled: var(--sc-palette-slate-500);
  --sc-fg-on-brand: var(--sc-palette-paper);
  --sc-fg-on-brand-muted: var(--sc-palette-on-ink-body);
  --sc-fg-on-inverse: var(--sc-palette-paper);
  --sc-fg-on-inverse-muted: var(--sc-palette-on-ink-body);
  --sc-fg-accent: var(--sc-palette-petrol-600);
  --sc-border: var(--sc-palette-mist);
  --sc-border-control: var(--sc-palette-slate-500);
  --sc-border-selected: var(--sc-palette-iris-600);
  --sc-border-inverse: var(--sc-palette-on-ink-body);
  --sc-focus-ring: var(--sc-palette-iris-600);
  --sc-focus-ring-inverse: var(--sc-palette-ember-300);

  /* Acties — tekst en achtergrond altijd als paar toepassen */
  --sc-action-primary-bg: var(--sc-palette-ember-500);
  --sc-action-primary-fg: var(--sc-palette-ink);
  --sc-action-primary-hover-bg: var(--sc-palette-ember-300);
  --sc-action-primary-hover-fg: var(--sc-palette-ink);
  --sc-action-primary-active-bg: var(--sc-palette-ember-700);
  --sc-action-primary-active-fg: var(--sc-palette-paper);
  --sc-action-secondary-bg: var(--sc-palette-paper);
  --sc-action-secondary-fg: var(--sc-palette-iris-600);
  --sc-action-secondary-hover-bg: var(--sc-palette-iris-50);
  --sc-action-secondary-hover-fg: var(--sc-palette-iris-600);
  --sc-action-secondary-active-bg: var(--sc-palette-iris-100);
  --sc-action-secondary-active-fg: var(--sc-palette-iris-700);
  --sc-action-danger-bg: var(--sc-palette-error-600);
  --sc-action-danger-fg: var(--sc-palette-paper);
  --sc-action-danger-hover-bg: var(--sc-palette-error-700);
  --sc-action-danger-hover-fg: var(--sc-palette-paper);
  --sc-action-danger-active-bg: var(--sc-palette-error-700);
  --sc-action-danger-active-fg: var(--sc-palette-paper);

  /* Status — altijd met tekstlabel of herkenbaar icoon */
  --sc-status-success-bg: var(--sc-palette-petrol-50);
  --sc-status-success-fg: var(--sc-palette-petrol-700);
  --sc-status-success-border: var(--sc-palette-petrol-600);
  --sc-status-warning-bg: var(--sc-palette-ember-100);
  --sc-status-warning-fg: var(--sc-palette-slate-700);
  --sc-status-warning-border: var(--sc-palette-ember-700);
  --sc-status-error-bg: var(--sc-palette-error-50);
  --sc-status-error-fg: var(--sc-palette-error-600);
  --sc-status-error-border: var(--sc-palette-error-600);
  --sc-status-info-bg: var(--sc-palette-iris-50);
  --sc-status-info-fg: var(--sc-palette-iris-700);
  --sc-status-info-border: var(--sc-palette-iris-600);
  --sc-status-neutral-bg: var(--sc-palette-bone);
  --sc-status-neutral-fg: var(--sc-palette-slate-700);
  --sc-status-neutral-border: var(--sc-palette-slate-500);
  --sc-chart-primary: var(--sc-palette-iris-600);
  --sc-chart-secondary: var(--sc-palette-petrol-600);
  --sc-chart-highlight: var(--sc-palette-ember-700);
  --sc-chart-neutral: var(--sc-palette-slate-500);

  /* Typografie — Geist headings, Inter body, JetBrains Mono labels en cijfers */
  --sc-font-display: 'Geist', system-ui, sans-serif;
  --sc-font-body: 'Inter', system-ui, sans-serif;
  --sc-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --sc-font-weight-regular: 400;
  --sc-font-weight-medium: 500;
  --sc-font-weight-semibold: 600;
  --sc-font-weight-display: 700;
  --sc-font-weight-display-lg: 800;
  --sc-text-display: clamp(2.5rem, 1.75rem + 2vw, 3rem);
  --sc-text-display-sm: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
  --sc-text-h2: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
  --sc-text-h3: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
  --sc-text-h4: 1.25rem;
  --sc-text-body-lg: 1.1875rem;
  --sc-text-body: 1rem;
  --sc-text-body-sm: 0.875rem;
  --sc-text-label: 0.75rem;
  --sc-text-caption: 0.75rem;
  --sc-lh-display: 1.06;
  --sc-lh-heading: 1.12;
  --sc-lh-body: 1.6;
  --sc-lh-ui: 1.4;
  --sc-lh-mono: 1.4;
  --sc-tracking-display: -0.02em;
  --sc-tracking-label: 0.12em;
  --sc-tracking-body: 0em;

  /* Afstanden — bestaande reeks, index is geen pixelvermenigvuldiger */
  --sc-space-0: 0px;
  --sc-space-1: 4px;
  --sc-space-2: 8px;
  --sc-space-3: 12px;
  --sc-space-4: 16px;
  --sc-space-5: 24px;
  --sc-space-6: 32px;
  --sc-space-7: 48px;
  --sc-space-8: 64px;
  --sc-space-9: 80px;
  --sc-space-10: 120px;

  /* Vorm en beweging — terughoudend; reduced motion wordt automatisch verwerkt */
  --sc-radius-sm: 6px;
  --sc-radius-md: 10px;
  --sc-radius-lg: 14px;
  --sc-radius-full: 999px;
  --sc-border-width: 1px;
  --sc-focus-width: 3px;
  --sc-focus-offset: 3px;
  --sc-shadow-elevated: 0 12px 32px rgba(21, 18, 13, 0.08);
  --sc-duration-fast: 120ms;
  --sc-duration-normal: 200ms;
  --sc-duration-slow: 300ms;
  --sc-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sc-ease-enter: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layout — maxima meten alleen content, gutters komen erbuiten */
  --sc-layout-marketing-max: 80rem;
  --sc-layout-platform-max: 73.75rem;
  --sc-layout-platform-wide: 82.5rem;
  --sc-layout-reading: 68ch;
  --sc-layout-sidebar: 16.5rem;
  --sc-layout-sidebar-compact: 14.5rem;
  --sc-layout-max: var(--sc-layout-marketing-max);
  --sc-layout-wide: var(--sc-layout-platform-wide);
  --sc-layout-gutter: 1.25rem;
  --sc-layout-section: var(--sc-space-7);
  --sc-layout-grid-gap: var(--sc-space-5);
  --sc-layout-card-padding: var(--sc-space-6);
  --sc-page-title-size: var(--sc-text-display);
  --sc-control-height: 3rem;
  --sc-control-height-sm: 2.25rem;
  --sc-control-height-lg: 3.25rem;
  --sc-table-row-height: 3.5rem;
  --sc-table-row-height-compact: 2.75rem;
}

[data-sc-application="marketing"] {
  --sc-layout-max: var(--sc-layout-marketing-max);
  --sc-layout-gutter: 1.25rem;
  --sc-layout-section: var(--sc-space-7);
  --sc-layout-grid-gap: var(--sc-space-5);
  --sc-layout-card-padding: var(--sc-space-6);
  --sc-page-title-size: var(--sc-text-display);
  --sc-control-height: 3rem;
}

[data-sc-application="platform"] {
  --sc-layout-max: var(--sc-layout-platform-max);
  --sc-layout-gutter: var(--sc-space-4);
  --sc-layout-section: var(--sc-space-6);
  --sc-layout-grid-gap: var(--sc-space-4);
  --sc-layout-card-padding: var(--sc-space-5);
  --sc-page-title-size: var(--sc-text-h3);
  --sc-control-height: 2.75rem;
}

@media (min-width: 48rem) {
  :root:not([data-sc-application]),
  .sc-system:not([data-sc-application]),
  [data-sc-application="marketing"] {
    --sc-layout-gutter: var(--sc-space-5);
    --sc-layout-section: var(--sc-space-8);
  }
  [data-sc-application="platform"] {
    --sc-layout-gutter: var(--sc-space-5);
  }
}

@media (min-width: 64rem) {
  :root:not([data-sc-application]),
  .sc-system:not([data-sc-application]),
  [data-sc-application="marketing"] {
    --sc-layout-gutter: var(--sc-space-7);
    --sc-layout-section: var(--sc-space-9);
  }
  [data-sc-application="platform"] {
    --sc-layout-gutter: var(--sc-space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root,
  .sc-system,
  [data-sc-application] {
    --sc-duration-fast: 0ms;
    --sc-duration-normal: 0ms;
    --sc-duration-slow: 0ms;
  }
}