/* ============================================================================
   STEWERA × NIU — Design Tokens
   Colors & Type foundation for the STEWERA umbrella brand and its two sparten:
     • NIU E-Scooter     (niu.stewera.de)          → modern, electric, urban
     • Seniorenmobile    (seniorenmobile.stewera.de) → warm, reassuring, legible
   ----------------------------------------------------------------------------
   Theming model:
   - :root holds the shared scaffold (type scale, spacing, radii, shadows) and
     a neutral STEWERA umbrella palette used by the splitscreen entry page.
   - [data-theme="niu"]    overrides palette + base sizing for the NIU sparte.
   - [data-theme="senior"] overrides palette + base sizing for the Senior sparte
     (larger base font + heavier weights for accessibility).
   ⚠️ Colors are grounded in NIU's public identity (electric teal on charcoal)
      and senior-mobility best practice (warm, high-contrast, calm). They are a
      STARTING POINT — confirm against the real Senior template once supplied.
   ============================================================================ */

/* ---- Webfonts (Google Fonts substitution — flagged to user) -------------- */
/* Sora      → geometric grotesque for headings / NIU UI (mobility-tech feel)  */
/* Mulish    → humanist sans for body copy; highly legible at large sizes      */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ===== Type families ===== */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ===== STEWERA umbrella palette (neutral / splitscreen) ===== */
  --ink: #14171A;          /* near-black text */
  --ink-2: #3A4047;        /* secondary text */
  --ink-3: #6B7480;        /* muted / captions */
  --paper: #FFFFFF;
  --paper-2: #F4F6F7;      /* light surface */
  --line: #E2E6E9;         /* hairline borders */
  --stewera-accent: #00B3A6; /* unifying teal that bridges both sparten */

  /* ===== Type scale (fluid-ready, rem) ===== */
  --fs-display: 4.5rem;    /* 72 — hero */
  --fs-h1: 3rem;           /* 48 */
  --fs-h2: 2.125rem;       /* 34 */
  --fs-h3: 1.5rem;         /* 24 */
  --fs-h4: 1.1875rem;      /* 19 */
  --fs-lead: 1.375rem;     /* 22 — intro paragraph */
  --fs-body: 1.0625rem;    /* 17 */
  --fs-sm: 0.9375rem;      /* 15 */
  --fs-xs: 0.8125rem;      /* 13 — labels / eyebrows */

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.6;

  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.02em;

  /* weights */
  --w-regular: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-x: 800;

  /* ===== Spacing scale (8pt base) ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ===== Radii ===== */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ===== Shadows (soft, product-photo friendly) ===== */
  --shadow-sm: 0 1px 2px rgba(20,23,26,.06), 0 1px 3px rgba(20,23,26,.08);
  --shadow-md: 0 4px 12px rgba(20,23,26,.08), 0 2px 4px rgba(20,23,26,.05);
  --shadow-lg: 0 18px 40px rgba(20,23,26,.12), 0 6px 14px rgba(20,23,26,.07);
  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--accent, var(--stewera-accent)) 35%, transparent);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;

  /* default container */
  --maxw: 1200px;
}

/* ===================== NIU SPARTE — electric / urban ====================== */
[data-theme="niu"] {
  --bg: #FFFFFF;            /* white canvas — Hauptfarbe */
  --bg-2: #F4F6F7;          /* raised light surface */
  --surface: #FFFFFF;       /* cards */
  --fg: #14171A;            /* primary ink text */
  --fg-2: #51585F;          /* secondary */
  --fg-3: #8A929B;          /* muted */
  --line: #E2E6E9;          /* hairline borders */
  --accent: #CE2825;        /* NIU red accent */
  --accent-press: #A81E1C;
  --accent-ink: #FFFFFF;    /* text on accent */
  --on-photo: #FFFFFF;
}

/* ================= SENIOR SPARTE — warm / calm / legible ================== */
[data-theme="senior"] {
  --bg: #FBF7F0;            /* warm cream canvas */
  --bg-2: #F3ECE0;          /* raised warm surface */
  --surface: #FFFFFF;       /* cards */
  --fg: #20312F;            /* deep ink-green text */
  --fg-2: #4C5A57;          /* secondary */
  --fg-3: #7A8682;          /* muted */
  --line: #E6DDCE;          /* warm hairline */
  --accent: #0E6E63;        /* deep, trustworthy petrol-green (primary CTA) */
  --accent-press: #0A574E;
  --accent-ink: #FFFFFF;    /* text on accent */
  --warm: #E07A28;          /* warm amber — secondary highlight */
  --on-photo: #FFFFFF;

  /* Accessibility: bump base sizing + weight */
  --fs-body: 1.1875rem;     /* 19 */
  --fs-lead: 1.5rem;        /* 24 */
  --fs-sm: 1.0625rem;       /* 17 */
  --lh-body: 1.7;
  --w-body-min: 500;        /* never go below medium for senior body */
}

/* ============================ Base elements =============================== */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg, var(--ink));
  background: var(--bg, var(--paper));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--w-bold);
  color: var(--fg, var(--ink));
  margin: 0;
  text-wrap: balance;
}

.display { font-size: var(--fs-display); font-weight: var(--w-x); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--w-semi); }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--w-semi);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent, var(--stewera-accent));
}

.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--fg-2, var(--ink-2)); }
p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
small, .caption { font-size: var(--fs-sm); color: var(--fg-3, var(--ink-3)); }

a { color: var(--accent, var(--stewera-accent)); text-decoration: none; }