/* Erzeugt von wordpress/bauen.py aus redesign/system/tokens/ — NICHT VON HAND ÄNDERN.
   Nur Variablen. Nicht übernommen: fonts.css (Schriften kommen aus theme.json) und base.css
   (Elementstile regelt theme.json). [data-theme="dark"] ist hier :root — die Seite ist dunkel. */

/* ---- tokens/colors.css ---- */
:root{
/* ---- Brand primitives (Corporate Design, SportPort_Farbcodierung.pdf) ---- */
--sp-green:#cad400;            /* Pantone 390 C — the brand green, print and screen (RGB 202-212-0) */
--sp-green-deep:#748400;       /* CD secondary green — accent green where #cad400 lacks contrast */
--sp-olive:#748400;            /* CD secondary / secondary text colour */
--sp-navy:#003b79;             /* CD primary blue (RGB 0-59-121) */
--sp-black:#1a171b;            /* CD primary text colour (RGB 26-23-27) */
--sp-white:#ffffff;

/* ---- Green scale ---- */
--green-50:#fbfce6;--green-100:#f5f8c4;--green-200:#e7ef86;--green-300:#d9e64a;
--green-400:#cad400;--green-500:#b2ba00;--green-600:#949c00;--green-700:#748400;--green-800:#4f5a00;

/* ---- Navy scale ---- */
--navy-50:#eef3f9;--navy-100:#d6e2ef;--navy-200:#a8c1dc;--navy-300:#6b93bf;
--navy-400:#2f66a0;--navy-500:#003b79;--navy-600:#003367;--navy-700:#002950;--navy-800:#001c37;

/* ---- Neutrals (cool, navy-tinted) ---- */
--neutral-0:#ffffff;--neutral-25:#fafbfc;--neutral-50:#f4f6f8;--neutral-100:#e8ebef;
--neutral-200:#d5dae1;--neutral-300:#b3bac4;--neutral-400:#8a929e;--neutral-500:#666d78;
--neutral-600:#4a5059;--neutral-700:#33383f;--neutral-800:#232629;--neutral-900:#1a171b;

/* ---- Status ---- */
--status-success:#2e7d4f;--status-success-bg:#eaf5ee;
--status-warning:#b8860b;--status-warning-bg:#fdf5e3;
--status-danger:#b3261e;--status-danger-bg:#fbeceb;
--status-info:var(--navy-500);--status-info-bg:var(--navy-50);

/* ---- Semantic: text ---- */
--text-strong:var(--sp-black);
--text-body:var(--neutral-700);
--text-muted:var(--neutral-500);
--text-invert:var(--sp-white);
--text-invert-muted:rgba(255,255,255,.72);
--text-accent:var(--green-800);
--text-on-accent:var(--sp-black);

/* ---- Semantic: surface ---- */
--surface-page:var(--sp-white);
--surface-sunken:var(--neutral-50);
--surface-card:var(--sp-white);
--surface-navy:var(--navy-500);
--surface-navy-deep:var(--navy-800);
--surface-dark:var(--sp-black);
--surface-accent:var(--sp-green);
--surface-accent-soft:var(--green-50);
--surface-overlay:rgba(26,23,27,.64);
--surface-glass:rgba(255,255,255,.08);

/* ---- Semantic: border ---- */
--border-subtle:var(--neutral-100);
--border-default:var(--neutral-200);
--border-strong:var(--neutral-400);
--border-invert:rgba(255,255,255,.18);
--border-accent:var(--sp-green);

/* ---- Semantic: interaction ---- */
--accent:var(--sp-green);
--accent-hover:var(--green-500);
--accent-press:var(--green-600);
--accent-deep:var(--green-700);
--action:var(--navy-500);
--action-hover:var(--navy-600);
--action-press:var(--navy-700);
--link:var(--navy-500);
--link-hover:var(--green-800);
--focus-ring:var(--navy-500);
--disabled-fg:var(--neutral-400);
--disabled-bg:var(--neutral-100);
}

/* ---- tokens/typography.css ---- */
:root{
--font-display:'Archivo','Archivo Fallback',system-ui,sans-serif;
--font-body:'IBM Plex Sans','IBM Plex Sans Fallback',system-ui,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* @kind font */

--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;

/* Display / headline sizes — Archivo, tight tracking */
--text-hero:clamp(2.75rem,6vw,4.5rem);   /* 44 → 72 */
--text-display:3rem;                      /* 48 */
--text-h1:2.5rem;                         /* 40 */
--text-h2:2rem;                           /* 32 */
--text-h3:1.5rem;                         /* 24 */
--text-h4:1.25rem;                        /* 20 */
--text-lead:1.125rem;                     /* 18 */
--text-body-size:1rem;                    /* 16 */
--text-sm:0.875rem;                       /* 14 */
--text-xs:0.75rem;                        /* 12 */

--leading-tight:1.04;--leading-snug:1.18;--leading-normal:1.5;--leading-relaxed:1.65;

--tracking-hero:-0.02em;--tracking-heading:-0.01em;--tracking-normal:0;
--tracking-eyebrow:0.14em;   /* uppercase eyebrows / labels */
--tracking-button:0.06em;

/* Ready-made text roles */
--role-eyebrow:var(--weight-bold) var(--text-xs)/1.2 var(--font-display);
--role-h2:var(--weight-extrabold) var(--text-h2)/var(--leading-snug) var(--font-display);
--role-body:var(--weight-regular) var(--text-body-size)/var(--leading-relaxed) var(--font-body);
--role-button:var(--weight-semibold) var(--text-sm)/1 var(--font-display);
}

/* ---- tokens/spacing.css ---- */
:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;
--space-6:24px;--space-7:32px;--space-8:48px;--space-9:64px;--space-10:96px;--space-11:128px;
/* rhythm */
--gap-inline:var(--space-3);--gap-stack:var(--space-5);
--section-y:var(--space-10);--section-y-tight:var(--space-8);
--card-pad:var(--space-6);--card-pad-tight:var(--space-5);
--control-pad-x:var(--space-5);--control-pad-y:var(--space-4);
--control-h-sm:34px;--control-h-md:42px;--control-h-lg:52px;
}

/* ---- tokens/radius.css ---- */
:root{
/* SportPort geometry is angular: radii stay small and deliberate. */
--radius-none:0;--radius-xs:2px;--radius-sm:3px;--radius-md:4px;--radius-lg:8px;--radius-pill:999px;
--radius-card:var(--radius-md);
--radius-control:var(--radius-sm);
--radius-image:var(--radius-none);
/* the brand's diagonal motif (logo terminals, forward lean) */
--angle:-4deg; /* @kind other */
--angle-clip:polygon(0 0,100% 0,100% calc(100% - 40px),0 100%); /* @kind other */
}

/* ---- tokens/elevation.css ---- */
:root{
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(0,28,55,.06);
--shadow-sm:0 1px 3px rgba(0,28,55,.08),0 1px 2px rgba(0,28,55,.04);
--shadow-md:0 4px 14px rgba(0,28,55,.09);
--shadow-lg:0 14px 40px rgba(0,28,55,.14);
--shadow-inset-hairline:inset 0 -1px 0 var(--border-subtle);
--ring-focus:0 0 0 3px rgba(0,59,121,.28);
--ring-accent:0 0 0 3px rgba(202,212,0,.45);
/* protection gradient for text over photography */
--scrim-bottom:linear-gradient(to top,rgba(26,23,27,.85) 0%,rgba(26,23,27,.55) 40%,rgba(26,23,27,0) 100%); /* @kind color */
--scrim-navy:linear-gradient(105deg,rgba(0,41,80,.92) 0%,rgba(0,41,80,.55) 55%,rgba(0,41,80,.1) 100%); /* @kind color */
}

/* ---- tokens/motion.css ---- */
:root{
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:280ms; /* @kind other */
--dur-slower:520ms; /* @kind other */
--ease-out:cubic-bezier(.2,.8,.2,1); /* @kind other */
--ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-entrance:cubic-bezier(0,.6,.2,1); /* @kind other */
--transition-control:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){:root{--dur-fast:0ms; /* @kind other */--dur-base:0ms; /* @kind other */--dur-slow:0ms; /* @kind other */--dur-slower:0ms /* @kind other */}}

/* ---- tokens/layout.css ---- */
:root{
--container-max:1200px;--container-wide:1440px;--container-narrow:720px;
--gutter:24px;--gutter-lg:48px;
--header-h:76px;--header-h-compact:60px;
--grid-cols:12; /* @kind other */--grid-gap:24px;
--hairline:1px;
}

/* ---- tokens/patterns.css ---- */
:root{
/* ---- Brand graphics: geometry taken from the logo's cut terminals (≈14° forward lean) ---- */
--motif-angle:-14deg; /* @kind other */
--motif-angle-css:104deg; /* @kind other */

/* Speedlines — fine diagonal hairlines, the brand's texture for large empty surfaces */
--pattern-speedlines-green:repeating-linear-gradient(104deg,rgba(202,212,0,.55) 0 2px,transparent 2px 16px); /* @kind color */
--pattern-speedlines-light:repeating-linear-gradient(104deg,rgba(255,255,255,.16) 0 2px,transparent 2px 16px); /* @kind color */
--pattern-speedlines-navy:repeating-linear-gradient(104deg,rgba(0,59,121,.1) 0 2px,transparent 2px 16px); /* @kind color */

/* Ticks — regular vertical marks, for rails, timelines and stationery edges */
--pattern-ticks-green:repeating-linear-gradient(90deg,var(--sp-green) 0 3px,transparent 3px 12px); /* @kind color */
--pattern-ticks-navy:repeating-linear-gradient(90deg,var(--navy-500) 0 3px,transparent 3px 12px); /* @kind color */

/* Grid — 24px measuring grid, only behind data and diagrams */
--pattern-grid-navy:repeating-linear-gradient(0deg,rgba(0,59,121,.07) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(0,59,121,.07) 0 1px,transparent 1px 24px); /* @kind color */

/* Diagonal cuts — one per page, on photo or colour blocks only */
--clip-diagonal-bottom:polygon(0 0,100% 0,100% calc(100% - 56px),0 100%); /* @kind other */
--clip-diagonal-top:polygon(0 56px,100% 0,100% 100%,0 100%); /* @kind other */

/* Green rule sizes (the primary motif) */
--rule-sm:28px 3px; /* @kind other */
--rule-md:56px 4px; /* @kind other */
--rule-lg:120px 6px; /* @kind other */
}

/* ---- tokens/theme-dark.css ---- */
/* Dark theme — one continuous NAVY ground, derived from the CD blue #003b79.
   No black: black is logo ink on light grounds only. Apply with data-theme="dark". */
:root{
/* Navy ink ramp (hue 210, the CD blue darkened) */
--ink-900:#071b2e; /* @kind color */
--ink-850:#0a2134; /* @kind color */
--ink-800:#0b2438; /* @kind color */
--ink-700:#0e2a43; /* @kind color */
--ink-600:#123553; /* @kind color */
--ink-500:#1a4468; /* @kind color */

--surface-page:var(--ink-900);
--surface-sunken:var(--ink-850);
--surface-card:var(--ink-700);
--surface-raised:var(--ink-600);
--surface-navy:#003b79;
--surface-navy-deep:var(--ink-800);
--surface-dark:var(--ink-900);
--surface-accent:var(--sp-green);
--surface-accent-soft:rgba(202,212,0,.12);
--surface-overlay:rgba(7,27,46,.82);
--surface-glass:rgba(255,255,255,.06);

--text-strong:#eef3f8;
--text-body:rgba(238,243,248,.78);
--text-muted:rgba(238,243,248,.55);
--text-invert:#eef3f8;
--text-invert-muted:rgba(238,243,248,.66);
--text-accent:var(--green-300);
--text-on-accent:#07121c;

--border-subtle:rgba(255,255,255,.08);
--border-default:rgba(255,255,255,.14);
--border-strong:rgba(255,255,255,.28);
--border-invert:rgba(255,255,255,.14);

--link:var(--green-300);
--link-hover:var(--sp-green);
--action:#1a4468;
--action-hover:#215a86;
--action-press:#12314d;
--focus-ring:var(--green-300);
--disabled-fg:rgba(238,243,248,.32);
--disabled-bg:rgba(255,255,255,.07);

--shadow-xs:0 1px 2px rgba(0,8,18,.45);
--shadow-sm:0 1px 3px rgba(0,8,18,.5),0 1px 2px rgba(0,8,18,.35);
--shadow-md:0 10px 30px rgba(0,8,18,.5);
--shadow-lg:0 26px 64px rgba(0,8,18,.6);
--ring-focus:0 0 0 3px rgba(202,212,0,.32);

/* Scrims fade photography INTO the page ground instead of sitting on top of it */
--scrim-bottom:linear-gradient(to top,var(--ink-900) 0%,rgba(7,27,46,.72) 38%,rgba(7,27,46,.15) 100%); /* @kind color */
--scrim-navy:linear-gradient(100deg,rgba(7,27,46,.95) 0%,rgba(7,27,46,.72) 48%,rgba(7,27,46,.35) 100%); /* @kind color */
--scrim-blend:linear-gradient(to bottom,var(--ink-900) 0%,rgba(7,27,46,0) 22%,rgba(7,27,46,0) 62%,var(--ink-900) 100%); /* @kind color */
}

/* ---- gestaltung/20-korrekturen.css ---- */
:root { --border-strong: rgba(255, 255, 255, .36); }