/* ==========================================================================
   ProtonX – design tokens
   Brand: Dunkelblau, Grün/Lime, Weiß (per brand guideline). The orange from
   the logo is used only for the sun motif in illustrations.
   Themes: light is the default. [data-theme="dark"] is set before first
   paint by an inline script when the visitor chose dark mode
   (see router.php → theme_boot_script).
   ========================================================================== */

:root {
  /* Type – system stacks: fast, no third-party font requests (GDPR friendly) */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Segoe UI Variable Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lead: clamp(1.125rem, 1.03rem + .42vw, 1.34rem);
  --fs-h3: clamp(1.14rem, 1.06rem + .38vw, 1.38rem);
  --fs-h2: clamp(1.9rem, 1.32rem + 2.35vw, 3.25rem);
  --fs-h1: clamp(2.2rem, 1.45rem + 3.3vw, 4.25rem);
  --fs-display: clamp(3rem, 1.55rem + 6vw, 6.6rem);

  /* Brand palette */
  --navy-950: #030f1d;
  --navy-900: #061a31;
  --navy-850: #0a2241;
  --navy-800: #0c2b50;
  --navy-700: #123c6a;
  --navy-600: #1b518b;
  --lime-200: #f0fbc6;
  --lime-300: #dcf48b;
  --lime-400: #c7ec50;
  --lime-500: #b3de2c;
  --lime-600: #90bb15;
  --lime-700: #50710a;
  --sun: #ff9422;

  /* Shape & motion */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 160ms;
  --dur-2: 260ms;
  --dur-3: 480ms;

  /* Layout */
  --container: 1240px;
  --container-narrow: 860px;
  --gutter: clamp(16px, 4.2vw, 40px);
  --section-y: clamp(4.25rem, 2.8rem + 5.2vw, 8rem);
  --header-h: 76px;

  /* ---- Light theme (default) ---- */
  color-scheme: light;
  --bg: #f4f7fa;
  --bg-sunken: #eaf0f5;
  --surface: #ffffff;
  --surface-2: #f3f6f9;
  --surface-glass: rgb(255 255 255 / .78);
  --text: #0a1a2c;
  --text-2: #3a4c62;
  --text-3: #5f7086;
  --border: #dae2eb;
  --border-strong: #bfccda;
  --accent: var(--lime-500);
  --accent-hover: var(--lime-400);
  --accent-ink: #0a1a2c;
  --accent-soft: rgb(179 222 44 / .18);
  --accent-text: var(--lime-700);
  --link: var(--navy-700);
  --focus: #1c62d8;
  --danger: #c0281b;
  --danger-soft: rgb(192 40 27 / .08);
  --success: #2f7d12;
  --grid-dot: rgb(12 43 80 / .14);
  --header-bg: rgb(244 247 250 / .8);
  --navy-bg: var(--navy-900);
  --shadow-color: 212 45% 18%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .06), 0 1px 1px hsl(var(--shadow-color) / .04);
  --shadow: 0 2px 6px hsl(var(--shadow-color) / .05), 0 12px 28px -8px hsl(var(--shadow-color) / .14);
  --shadow-lg: 0 6px 12px hsl(var(--shadow-color) / .05), 0 30px 70px -18px hsl(var(--shadow-color) / .3);

  /* Illustrations */
  --ill-line: #15345a;
  --ill-surface: #ffffff;
  --ill-wall: #e4ecf4;
  --ill-glass: #cfe2f4;
  --ill-pv: #0e2d52;
  --ill-pv-line: #6a92c2;
  --ill-tire: #17222e;
  --ill-rim: #c8d3de;
  --ill-body: #ffffff;
  --ill-lamp: #ffc24a;
  --ill-energy: var(--lime-600);

  /* Text underline accents (drawn below the glyphs, see sections.css) */
  --mark: var(--lime-500);

  /* Energy-flow diagram */
  --ef-energy: var(--lime-600);
  --ef-shell: var(--surface);
  --ef-stage: #f7f9fc;
  --ef-node: #ffffff;
  --ef-node-inner: rgb(12 43 80 / .035);
  --ef-panel: var(--surface-2);
  --ef-moon: #8ea3bd;
}

/* ---- Dark theme ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050d18;
  --bg-sunken: #081322;
  --surface: #0c1a2c;
  --surface-2: #10223a;
  --surface-glass: rgb(12 26 44 / .78);
  --text: #e8eef6;
  --text-2: #a9b9cc;
  --text-3: #8093aa;
  --border: #1a2d46;
  --border-strong: #294263;
  --accent: var(--lime-400);
  --accent-hover: var(--lime-300);
  --accent-ink: #06131f;
  --accent-soft: rgb(199 236 80 / .14);
  --accent-text: var(--lime-400);
  --link: var(--lime-300);
  --focus: var(--lime-300);
  --danger: #ff8b7e;
  --danger-soft: rgb(255 139 126 / .1);
  --success: var(--lime-400);
  --grid-dot: rgb(160 192 228 / .11);
  --header-bg: rgb(5 13 24 / .76);
  --navy-bg: #0a1a30;
  --shadow-color: 215 70% 2%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / .4);
  --shadow: 0 2px 6px hsl(var(--shadow-color) / .3), 0 14px 30px -8px hsl(var(--shadow-color) / .5);
  --shadow-lg: 0 6px 12px hsl(var(--shadow-color) / .3), 0 30px 70px -18px hsl(var(--shadow-color) / .7);

  --ill-line: #b9cadd;
  --ill-surface: #132840;
  --ill-wall: #0f2036;
  --ill-glass: #1d3b60;
  --ill-pv: #06142a;
  --ill-pv-line: #4677b3;
  --ill-tire: #01060c;
  --ill-rim: #5a6f88;
  --ill-body: #1a3150;
  --ill-lamp: #ffc24a;
  --ill-energy: var(--lime-400);

  --mark: var(--lime-600);

  --ef-energy: var(--lime-400);
  --ef-shell: rgb(255 255 255 / .03);
  --ef-stage: rgb(3 15 29 / .35);
  --ef-node: #0b2140;
  --ef-node-inner: rgb(255 255 255 / .04);
  --ef-panel: var(--surface);
  --ef-moon: #dfe7f2;
}

/* ---- Inverse surfaces: CTA band, footer, contact card ----
   They re-map the semantic tokens so nested components adapt automatically. */
.cta-band,
.site-footer,
.contact-card--navy {
  color-scheme: dark;
  --surface: rgb(255 255 255 / .045);
  --surface-2: rgb(255 255 255 / .08);
  --surface-glass: rgb(10 30 55 / .7);
  --text: #eef3f9;
  --text-2: #b6c5d7;
  --text-3: #8ea1b8;
  --border: rgb(255 255 255 / .12);
  --border-strong: rgb(255 255 255 / .22);
  --accent: var(--lime-400);
  --accent-hover: var(--lime-300);
  --accent-soft: rgb(199 236 80 / .14);
  --accent-text: var(--lime-400);
  --link: var(--lime-300);
  --focus: var(--lime-300);
  --grid-dot: rgb(255 255 255 / .09);
  --ill-line: #c3d2e3;
  color: var(--text);
}