/* ============================================================
   STAKEHOLDER360 — DESIGN TOKENS  (Apple-idioom)
   Monochroom · SF Pro · één functioneel petrol-teal accent.
   Single source of truth. Importeer één keer globaal.
   ============================================================ */

:root {
  /* ---------- TYPOGRAFIE ---------------------------------
     System-stack = échte SF Pro op Mac/iOS, nette val elders.
     Apple licenseert SF niet voor web-embed; dit is de juiste weg. */
  --s360-font: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* fluid type-scale — Apple: groot, strak, semibold koppen */
  --s360-text-hero:  clamp(2.8rem, 6.5vw, 5.5rem);
  --s360-text-h1:    clamp(2.2rem, 4.5vw, 3.5rem);
  --s360-text-h2:    clamp(1.75rem, 3vw, 2.5rem);
  --s360-text-h3:    clamp(1.3rem, 2vw, 1.6rem);
  --s360-text-lead:  clamp(1.18rem, 1.6vw, 1.45rem);  /* subkop */
  --s360-text-body:  1.0625rem;   /* 17px — Apple body */
  --s360-text-small: 0.875rem;    /* 14px */
  --s360-text-eyebrow: 0.92rem;   /* overline */

  --s360-weight-reg:  400;
  --s360-weight-med:  500;
  --s360-weight-semi: 600;   /* Apple-koppen: semibold, niet bold */
  --s360-weight-bold: 700;

  /* Apple-tracking: subtiel negatief op grote koppen */
  --s360-track-hero: -0.015em;
  --s360-track-head: -0.012em;
  --s360-track-body:  0;

  --s360-leading-tight: 1.05;
  --s360-leading-snug:  1.18;
  --s360-leading-body:  1.5;

  /* ---------- KLEUR · MONOCHROOM (light) ----------------- */
  --s360-ink:      #1d1d1f;   /* primaire tekst (Apple near-black) */
  --s360-ink-2:    #86868b;   /* secundaire tekst (Apple grey)     */
  --s360-bg:       #ffffff;   /* wit vlak                          */
  --s360-bg-2:     #f5f5f7;   /* grijs vlak (Apple)                */
  --s360-bg-3:     #fbfbfd;   /* zeer licht                        */
  --s360-black:    #000000;   /* zwarte secties                    */
  --s360-line:     #d2d2d7;   /* randen (Apple)                    */
  --s360-line-soft:rgba(0,0,0,.08);

  /* ---------- KLEUR · MERK (één eigen accent: petrol-teal) -
     Eigen identiteit; wijkt af van Apple-blauw. Contrast 6.1 op wit. */
  --s360-brand:        #0C6E62;  /* mark, knoppen, links            */
  --s360-brand-strong: #08534A;  /* hover / diep / centrale punt    */
  --s360-brand-bright: #15A18C;  /* op zwarte secties / dark-mode   */
  --s360-brand-soft:   #E7F1EF;  /* tint-vlakken                    */
  --s360-brand-ring:   rgba(12,110,98,.35); /* focus                */

  /* ---------- RADIUS (Apple: groot & zacht) -------------- */
  --s360-radius-sm:  10px;
  --s360-radius-md:  18px;   /* app-vensters, inputs */
  --s360-radius-lg:  28px;   /* bento-cards          */
  --s360-radius-pill: 980px; /* knoppen              */

  /* ---------- ELEVATIE (zacht, diffuus) ------------------ */
  --s360-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --s360-shadow-md: 0 8px 30px rgba(0,0,0,.10);
  --s360-shadow-lg: 0 30px 80px rgba(0,0,0,.14);

  /* ---------- RUIMTE (8pt) ------------------------------- */
  --s360-space-1:.25rem; --s360-space-2:.5rem; --s360-space-3:.75rem;
  --s360-space-4:1rem;   --s360-space-5:1.5rem; --s360-space-6:2rem;
  --s360-space-7:3rem;   --s360-space-8:4rem;  --s360-space-9:6rem;
  --s360-space-10:8rem;

  /* ---------- MOTION (Apple: rustig, fade + lichte schaal) */
  --s360-ease:     cubic-bezier(0.28, 0.11, 0.32, 1);
  --s360-dur-fast: 200ms;
  --s360-dur-base: 600ms;

  /* ---------- GLASS (frosted nav) ------------------------ */
  --s360-nav-bg:   rgba(255,255,255,.72);
  --s360-nav-blur: saturate(180%) blur(20px);

  /* ---------- LAYOUT ------------------------------------- */
  --s360-container: 1024px;   /* Apple gebruikt smal & gecentreerd */
  --s360-container-wide: 1280px;
}

/* ============================================================
   DARK  ·  voor app-UI / zwarte secties.  data-theme="dark"
   ============================================================ */
[data-theme="dark"] {
  --s360-ink:      #f5f5f7;
  --s360-ink-2:    #a1a1a6;   /* Apple dark secondary */
  --s360-bg:       #000000;
  --s360-bg-2:     #1d1d1f;
  --s360-bg-3:     #161617;
  --s360-line:     #424245;
  --s360-line-soft:rgba(255,255,255,.12);

  --s360-brand:        #15A18C;  /* helder petrol op zwart */
  --s360-brand-strong: #0C6E62;
  --s360-brand-bright: #2BBFA8;
  --s360-brand-soft:   rgba(21,161,140,.12);
  --s360-brand-ring:   rgba(21,161,140,.45);

  --s360-nav-bg:   rgba(0,0,0,.72);
  --s360-shadow-md: 0 8px 30px rgba(0,0,0,.5);
  --s360-shadow-lg: 0 30px 80px rgba(0,0,0,.6);
}