/* ==========================================================================
   Sendsteps — Design Tokens
   Source: SENDSTEPS_EDITOR_BRAND_BOOK.md v1.0 (June 2026)
   --------------------------------------------------------------------------
   This is the single source of truth for the brand on the marketing site.
   The names intentionally mirror the product's --editor-* token system,
   so the dev team can map everything 1:1 during migration.
   Change something here and it propagates across every template.
   ========================================================================== */

:root {
  /* --- Brand violet --- */
  --brand-violet:        #6D28D9;  /* primair: AI-accenten, labels, badges */
  --brand-violet-mid:    #7C3AED;  /* gradients, secundaire nadruk */
  --brand-plum:          #4C1D95;  /* hover states, einde van gradients */
  --lavender:            #A78BFA;  /* ribbon mid-tone, zachte highlights */

  /* --- Accent goud --- */
  --accent-gold:         #F8B24F;  /* warme highlight, actieve states */
  --accent-gold-strong:  #F29B2A;  /* einde CTA-gradient, focus rings */
  --amber:               #F59E0B;  /* ribbon-overgang, quiz-accent */

  /* --- Functioneel --- */
  --present-green:        #1BB279; /* UITSLUITEND 'Present' / live sessie */
  --present-green-strong: #159968;

  /* --- Tekst --- */
  --text:        #0D1216;
  --text-muted:  rgba(13, 18, 22, 0.62);
  --text-faint:  rgba(13, 18, 22, 0.42);
  --text-on-dark: #FFFFFF;

  /* --- Oppervlakken (light mode) --- */
  --bg:            #EBECF0;  /* page shell */
  --panel-bg:      #FFFFFF;  /* cards, content, inputs */
  --panel-bg-2:    #F5F5F5;  /* recap blocks, code preview */
  --border:        rgba(57, 76, 96, 0.15);
  --border-strong: rgba(57, 76, 96, 0.28);

  /* --- Path-accenten (alleen path-specifieke secties) --- */
  --path-presentation: #7C3AED;
  --path-lesson:       #3B82F6;
  --path-quiz:         #F59E0B;
  --grad-presentation: linear-gradient(135deg, #6D28D9, #7C3AED, #A78BFA);
  --grad-lesson:       linear-gradient(135deg, #0EA5E9, #3B82F6, #8B5CF6);
  --grad-quiz:         linear-gradient(135deg, #F59E0B, #F8B24F, #EF4444);

  /* --- Signature gradients --- */
  --brand-ribbon: linear-gradient(90deg,
      #5B21B6, #6D28D9, #7C3AED, #A78BFA, #F59E0B, #F8B24F);

  --cta-gradient: linear-gradient(90deg, #7C3AED, #6D28D9, #F29B2A);
  --cta-gradient-hover: linear-gradient(90deg, #4C1D95, #7C3AED, #F8B24F);

  --icon-gradient: linear-gradient(135deg, #6D28D9, #F29B2A);

  /* --- Semantic CTA layer — reference by ROLE, never by color ---
     Pick the button's job, not its hue. Swapping the value here re-themes every
     button of that role across all pages at once. */
  --cta-primary:        var(--cta-gradient);        /* main forward action (gradient) */
  --cta-primary-hover:  var(--cta-gradient-hover);
  --cta-secondary:      var(--accent-gold);          /* secondary action (orange/amber) */
  --cta-secondary-strong: var(--accent-gold-strong);
  --cta-present:        linear-gradient(180deg, var(--present-green), var(--present-green-strong)); /* live only */
  --cta-share:          var(--brand-violet);         /* share / account */

  /* Header wash: lavendel verticale wash + violet/goud corner glows */
  --header-wash:
      radial-gradient(120% 120% at 0% 0%,   rgba(109, 40, 217, 0.18), transparent 45%),
      radial-gradient(120% 120% at 100% 0%, rgba(248, 178, 79, 0.14), transparent 45%),
      linear-gradient(160deg, #EBE7F7, #F3F0FF, #FAF8FF, #EEEAF5);

  /* Page-level ambient radial (achter hero's) */
  --ambient-radial:
      radial-gradient(60% 50% at 50% 0%, rgba(109, 40, 217, 0.14), transparent 70%);

  /* --- Typografie --- */
  --font-sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-body:    400;
  --fw-label:   600;
  --fw-bold:    700;
  --fw-heading: 800;

  /* Type scale (marketing, iets ruimer dan in-product) */
  --fs-display: clamp(2.5rem, 1.2rem + 4vw, 4rem);   /* hero H1 */
  --fs-h2:      clamp(1.75rem, 1.1rem + 2vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --fs-h4:      1.75rem;  /* 28px */
  --fs-h5:      1.5rem;   /* 24px */
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-overline: 0.75rem; /* 12px, 800, tracking 0.12em */

  --tracking-overline: 0.12em;
  --tracking-badge:    0.2em;
  --tracking-cta:      0.02em;

  /* --- Radius --- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* --- Spacing (strict 8-point grid) ---
     Numeric scale (legacy, still valid). Only --space-3 (12px) is a deliberate
     half-step for tight inline gaps; everything else is a multiple of 8. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;   /* half-step, inline gaps only */
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Semantic spacing tokens — prefer these in new work (UX spacing system).
     All are multiples of 8. Map: xs=8, sm=16, md=24, lg=48, xl=64, xxl=96. */
  --spacing-xs:  8px;
  --spacing-sm:  16px;
  --spacing-md:  24px;
  --spacing-lg:  48px;
  --spacing-xl:  64px;
  --spacing-xxl: 96px;
  --spacing-3xl: 128px;

  /* Layout rhythm — section padding is applied on BOTH sides, so two
     adjacent sections stack. Keep this modest: large pauses make the page
     feel finished and bury the next CTA (CRO). Visual gap ≈ 2× this value. */
  --section-gap: clamp(32px, 4vw, 48px);
  --cta-isolation: clamp(48px, 5.5vw, 72px);
  --page-margin: clamp(24px, 5vw, 64px);
  --content-max: 1280px;

  /* Vertical rhythm — body line-heights land on the 8px grid */
  --leading-body: 1.6;   /* 16px text -> ~25.6px; blocks spaced on 8-grid via margins */
  --leading-tight: 1.12; /* headings */

  /* Ergonomic interactive sizing */
  --touch-target: 48px;     /* design target for buttons/inputs (min hit area) */
  --touch-target-min: 24px; /* absolute WCAG 2.2 floor — never go below this */
  --touch-gap: 8px;         /* min space between adjacent interactive elements */

  /* --- Shadows --- */
  --shadow-card:       0 1px 2px rgba(16, 20, 35, 0.04);
  --shadow-card-hover: 0 10px 24px rgba(109, 40, 217, 0.20);
  --shadow-panel:      0 30px 80px rgba(20, 15, 40, 0.08);
  --shadow-sidebar:    0 18px 40px rgba(109, 40, 217, 0.14);
  --shadow-cta:        0 14px 34px rgba(109, 40, 217, 0.34);
  --shadow-cta-hover:  0 18px 40px rgba(109, 40, 217, 0.42);

  /* --- Motion --- */
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
  --t-hover: 180ms ease;
  --t-card:  260ms var(--ease-premium);
}

/* --------------------------------------------------------------------------
   Dark mode — surfaces and text invert; brand colors stay recognizable.
   Activate with <html data-theme="dark">.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg:           #0F1419;
  --panel-bg:     #121820;
  --panel-bg-2:   #1A222C;
  --text:         rgba(255, 255, 255, 0.92);
  --text-muted:   rgba(255, 255, 255, 0.64);
  --text-faint:   rgba(255, 255, 255, 0.42);
  --border:       rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);

  --header-wash:
      radial-gradient(120% 120% at 0% 0%,   rgba(124, 58, 237, 0.30), transparent 45%),
      radial-gradient(120% 120% at 100% 0%, rgba(248, 178, 79, 0.16), transparent 45%),
      linear-gradient(160deg, #1A1430, #15122A, #0F1419);
  --ambient-radial:
      radial-gradient(60% 50% at 50% 0%, rgba(124, 58, 237, 0.22), transparent 70%);
}