/* Springcast Design System 1.0.0 tokens, scoped to the approved homepage sections. */
.audience,
.stories {
  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;
}

@media(min-width:48rem){.audience,.stories{--sc-layout-gutter:var(--sc-space-5);--sc-layout-section:var(--sc-space-8)}}
@media(min-width:64rem){.audience,.stories{--sc-layout-gutter:var(--sc-space-7);--sc-layout-section:var(--sc-space-9)}}
@media(prefers-reduced-motion:reduce){.audience,.stories{--sc-duration-fast:0ms;--sc-duration-normal:0ms;--sc-duration-slow:0ms}}
.audience { background:var(--sc-bg-subtle); padding:var(--sc-layout-section) 0; color:var(--sc-fg); font-family:var(--sc-font-body); }
.audience-wrap {max-width:calc(var(--sc-layout-marketing-max) + var(--sc-layout-gutter)*2);padding:0 var(--sc-layout-gutter);margin:auto;}
.audience-heading {margin-bottom:var(--sc-space-7);}
.audience-eyebrow {font:500 var(--sc-text-label)/1.4 var(--sc-font-mono);letter-spacing:var(--sc-tracking-label);color:var(--sc-fg-link);margin:0 0 var(--sc-space-4);}
.audience h2 {font:700 var(--sc-text-h2)/var(--sc-lh-heading) var(--sc-font-display);letter-spacing:var(--sc-tracking-display);color:var(--sc-fg-heading);margin:0 0 var(--sc-space-4);}
.audience-heading>p:last-child {font-size:var(--sc-text-body);margin:0;color:var(--sc-fg-muted);}
.audience-grid {display:grid;grid-template-columns:1fr 1fr;gap:var(--sc-space-5);}
.audience-card {padding:var(--sc-space-7);border-radius:var(--sc-radius-lg);display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--sc-border);}
.audience-creator {background:var(--sc-bg-canvas);}
.audience-org {background:var(--sc-bg-brand);color:var(--sc-fg-on-brand);border-color:var(--sc-bg-brand);}
.audience-top {display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:var(--sc-space-6);}
.audience-label {font:600 var(--sc-text-body)/1.4 var(--sc-font-body);color:var(--sc-fg-link);}
.audience-org .audience-label {color:var(--sc-palette-ember-300);}
.audience-top svg {width:48px;height:48px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;color:var(--sc-fg-link);}
.audience-org svg {color:var(--sc-palette-ember-300);}
.audience h3 {font:700 var(--sc-text-h2)/var(--sc-lh-heading) var(--sc-font-display);letter-spacing:var(--sc-tracking-display);margin:0 0 var(--sc-space-5);color:var(--sc-fg-heading);}
.audience-org h3 {color:var(--sc-fg-on-brand);}
.audience-desc {font-size:var(--sc-text-body);line-height:var(--sc-lh-body);max-width:44ch;margin:0 0 var(--sc-space-6);}
.audience-org .audience-desc {color:var(--sc-fg-on-brand-muted);}
.audience a {text-decoration:none;}
.audience-cta {display:flex;align-items:center;justify-content:space-between;gap:var(--sc-space-6);padding:var(--sc-space-4) var(--sc-space-5);background:var(--sc-action-primary-bg);color:var(--sc-action-primary-fg);border-radius:var(--sc-radius-md);font-weight:600;min-height:48px;margin-bottom:var(--sc-space-5);}
.audience-cta:hover {background:var(--sc-action-primary-hover-bg);color:var(--sc-action-primary-hover-fg);}
.audience-cta:active {background:var(--sc-action-primary-active-bg);color:var(--sc-action-primary-active-fg);}
.audience-foot {margin-top:auto;padding-top:var(--sc-space-5);display:inline-flex;align-items:center;gap:var(--sc-space-3);min-height:44px;font-size:var(--sc-text-body-sm);color:var(--sc-fg-muted);text-underline-offset:4px;}
.audience .audience-foot:hover {text-decoration:underline;color:var(--sc-fg-link);}
.audience-org .audience-foot,.audience-org .audience-foot:hover {color:var(--sc-fg-on-brand-muted);}
.audience-options {width:100%;margin-bottom:var(--sc-space-2);}
.audience-options a {display:flex;align-items:center;justify-content:space-between;gap:var(--sc-space-4);padding:var(--sc-space-4) 0;border-top:1px solid var(--sc-palette-iris-300);color:var(--sc-fg-on-brand);transition:color var(--sc-duration-fast);}
.audience-options a:hover {color:var(--sc-palette-ember-300);}
.audience-options strong {font-size:var(--sc-text-body);font-weight:600;}
.audience-options small {display:block;font-size:var(--sc-text-body-sm);color:var(--sc-fg-on-brand-muted);margin-top:var(--sc-space-1);}
.audience a:focus-visible {outline:var(--sc-focus-width) solid var(--sc-focus-ring);outline-offset:var(--sc-focus-offset);}
.audience-org a:focus-visible {outline-color:var(--sc-focus-ring-inverse);}
@media(max-width:1023px) {.audience-card{padding:var(--sc-space-6)}.audience h3{font-size:var(--sc-text-h3)}}
@media(max-width:767px) {.audience-grid{grid-template-columns:1fr}.audience-heading{margin-bottom:var(--sc-space-6)}.audience-card{padding:var(--sc-space-5)}.audience-top{margin-bottom:var(--sc-space-5)}.audience h3{font-size:var(--sc-text-h2)}.audience h3 br{display:none}.audience-cta{width:100%;gap:var(--sc-space-4)}}

.stories {background:var(--sc-bg-canvas);padding:var(--sc-layout-section) 0;color:var(--sc-fg);font-family:var(--sc-font-body);scroll-margin-top:80px;}
.stories-wrap {max-width:calc(var(--sc-layout-marketing-max) + var(--sc-layout-gutter)*2);padding:0 var(--sc-layout-gutter);margin:auto;}
.stories-eyebrow {font:500 var(--sc-text-label)/1.4 var(--sc-font-mono);letter-spacing:var(--sc-tracking-label);color:var(--sc-fg-link);margin:0 0 var(--sc-space-4);}
.stories-header {display:flex;align-items:baseline;justify-content:space-between;gap:var(--sc-space-5);}
.stories h2 {font:700 var(--sc-text-h2)/var(--sc-lh-heading) var(--sc-font-display);letter-spacing:var(--sc-tracking-display);color:var(--sc-fg-heading);margin:0;}
.stories-all {flex-shrink:0;display:inline-flex;align-items:center;gap:var(--sc-space-3);min-height:44px;font-weight:600;color:var(--sc-fg-link);}
.stories-intro {margin:var(--sc-space-4) 0 var(--sc-space-7);color:var(--sc-fg-muted);font-size:var(--sc-text-body);line-height:var(--sc-lh-body);}
.stories-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sc-space-5);}
.stories-card {display:flex;flex-direction:column;border:1px solid var(--sc-border);border-radius:var(--sc-radius-lg);color:var(--sc-fg);text-decoration:none;transition:border-color var(--sc-duration-fast);min-width:0;}
.stories-art {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sc-space-5);align-items:center;background:var(--sc-bg-subtle);padding:var(--sc-space-6);border-radius:var(--sc-radius-lg) var(--sc-radius-lg) 0 0;}
.stories-art img {display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:var(--sc-radius-sm);}
.stories-category {display:block;font:500 var(--sc-text-label)/1.6 var(--sc-font-mono);color:var(--sc-fg-muted);margin-bottom:var(--sc-space-4);}
.stories-name {font:700 var(--sc-text-h3)/1.12 var(--sc-font-display);letter-spacing:var(--sc-tracking-display);color:var(--sc-fg-heading);margin:0 0 var(--sc-space-3);}
.stories-owner {font-size:var(--sc-text-body-sm);line-height:1.5;color:var(--sc-fg-muted);margin:0;}
.stories-body {display:flex;flex-direction:column;flex:1;padding:var(--sc-space-6);}
.stories h3 {font:700 var(--sc-text-h3)/1.2 var(--sc-font-display);letter-spacing:var(--sc-tracking-display);color:var(--sc-fg-heading);margin:0 0 var(--sc-space-4);}
.stories-desc {font-size:var(--sc-text-body);line-height:var(--sc-lh-body);margin:0 0 var(--sc-space-6);max-width:52ch;}
.stories-result {display:flex;align-items:center;gap:var(--sc-space-4);margin-top:auto;padding:var(--sc-space-5) 0;border-top:1px solid var(--sc-border);}
.stories-result strong {font:700 var(--sc-text-h2)/1 var(--sc-font-display);letter-spacing:var(--sc-tracking-display);color:var(--sc-fg-link);}
.stories-result>span {font-size:var(--sc-text-body-sm);line-height:1.5;max-width:19ch;}
.stories-cta {display:flex;align-items:center;justify-content:space-between;font-size:var(--sc-text-body);font-weight:600;color:var(--sc-fg-link);min-height:44px;gap:var(--sc-space-4);}
.stories-card:hover {border-color:var(--sc-border-selected);}
.stories-card:hover .stories-cta,.stories-all:hover {text-decoration:underline;text-underline-offset:4px;}
.stories a:focus-visible {outline:var(--sc-focus-width) solid var(--sc-focus-ring);outline-offset:var(--sc-focus-offset);}
@media(max-width:1100px) {.stories-art{grid-template-columns:1fr}.stories-art img{max-width:240px}.stories-name{font-size:var(--sc-text-h3)}}
@media(max-width:767px) {.stories-grid{grid-template-columns:1fr}.stories-header{align-items:flex-start;flex-direction:column;gap:var(--sc-space-3)}.stories-intro{margin-top:var(--sc-space-2);margin-bottom:var(--sc-space-6)}.stories-art,.stories-body{padding:var(--sc-space-5)}.stories-art{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sc-space-4)}.stories-name{font-size:var(--sc-text-h4)}.stories-category{margin-bottom:var(--sc-space-2);font-size:11px}.stories-owner{font-size:var(--sc-text-label)}.stories h3{font-size:var(--sc-text-h3)}}