/* WERTKON Design System — Tokens, unveraendert uebernommen.
   Quelle: Wertkon Design System/tokens/*.css
   Erzeugt von build-tokens.sh. Nicht von Hand aendern —
   Seitenspezifisches gehoert nach css/landingpage.css. */

/* ---- tokens/colors.css ---- */
:root{
/* --- Base: Navy (from the logo plate #152235) --- */
--navy-900:#0b1420;--navy-800:#101b2b;--navy-700:#152235;--navy-600:#1d2d44;--navy-500:#27395a;--navy-400:#3b5074;--navy-300:#5d7295;
/* --- Base: Gold (from the logo mark #c3a059) --- */
--gold-700:#8b6f36;--gold-600:#a88645;--gold-500:#c3a059;--gold-400:#d3b678;--gold-300:#e3cf9e;--gold-100:#f4ecda;
/* --- Base: Neutrals (warm, so they sit next to gold) --- */
--white:#ffffff;--sand-50:#faf8f4;--sand-100:#f2efe9;--sand-200:#e5e1d8;--gray-300:#c9c6bf;--gray-400:#9c9a94;--gray-500:#71757c;--gray-600:#4e535c;--black:#000000;
/* --- Base: Semantic hues --- */
--green-500:#3e8b62;--green-100:#e3f0e8;--amber-500:#c9862b;--amber-100:#fbf0dc;--red-500:#b4453c;--red-100:#f8e6e4;--blue-500:#3c6e9e;--blue-100:#e6eef5;

/* --- Semantic: surfaces --- */
--surface-page:var(--white);
--surface-alt:var(--sand-50);
--surface-card:var(--white);
--surface-card-inverse:var(--navy-600);
--surface-inverse:var(--navy-700);
--surface-inverse-deep:var(--navy-900);
--surface-gold:var(--gold-500);
--surface-gold-soft:var(--gold-100);
--surface-overlay:rgba(11,20,32,.72);

/* --- Semantic: text --- */
--text-body:var(--navy-800);
--text-heading:var(--navy-700);
--text-muted:var(--gray-500);
--text-on-inverse:var(--white);
--text-on-inverse-muted:rgba(255,255,255,.68);
--text-accent:var(--gold-600);
--text-accent-on-inverse:var(--gold-400);
--text-on-gold:var(--navy-800);

/* --- Semantic: lines --- */
--border-subtle:var(--sand-200);
--border-strong:var(--gray-300);
--border-inverse:rgba(255,255,255,.14);
--border-gold:var(--gold-500);
--rule-accent:var(--gold-500);

/* --- Semantic: interactive --- */
--action-primary:var(--gold-500);
--action-primary-hover:var(--gold-400);
--action-primary-active:var(--gold-600);
--action-secondary:var(--navy-700);
--action-secondary-hover:var(--navy-600);
--action-secondary-active:var(--navy-800);
--action-disabled:var(--sand-200);
--focus-ring:var(--gold-500);

/* --- Semantic: feedback --- */
--status-success:var(--green-500);--status-success-bg:var(--green-100);
--status-warning:var(--amber-500);--status-warning-bg:var(--amber-100);
--status-danger:var(--red-500);--status-danger-bg:var(--red-100);
--status-info:var(--blue-500);--status-info-bg:var(--blue-100);

/* --- Brand gradients: only these two, never invent more --- */
--gradient-navy:linear-gradient(180deg,#152235 0%,#0b1420 100%); /* @kind color */
--gradient-gold-rule:linear-gradient(90deg,#c3a059 0%,#e3cf9e 100%); /* @kind color */
--scrim-bottom:linear-gradient(180deg,rgba(11,20,32,0) 0%,rgba(11,20,32,.85) 100%); /* @kind color */
}

/* ---- tokens/typography.css ---- */
:root{
--font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
--font-body:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

--fw-regular:400; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-extrabold:800; /* @kind font */

/* Display / hero — Montserrat, tight leading, slight negative tracking */
--type-display-1-size:64px;--type-display-1-lh:1.05; /* @kind other */--type-display-1-ls:-0.02em; /* @kind other */
--type-display-2-size:48px;--type-display-2-lh:1.08; /* @kind other */--type-display-2-ls:-0.015em; /* @kind other */
/* Headings */
--type-h1-size:40px;--type-h1-lh:1.15; /* @kind other */--type-h1-ls:-0.01em; /* @kind other */
--type-h2-size:30px;--type-h2-lh:1.2; /* @kind other */--type-h2-ls:-0.005em; /* @kind other */
--type-h3-size:22px;--type-h3-lh:1.3; /* @kind other */--type-h3-ls:0em; /* @kind other */
/* Eyebrow / kicker — the brand's signature all-caps tracked label */
--type-eyebrow-size:13px;--type-eyebrow-lh:1.2; /* @kind other */--type-eyebrow-ls:0.22em; /* @kind other */
/* Body — set generously; the audience is 50+ */
--type-lead-size:20px;--type-lead-lh:1.6; /* @kind other */
--type-body-size:17px;--type-body-lh:1.65; /* @kind other */
--type-small-size:15px;--type-small-lh:1.55; /* @kind other */
--type-caption-size:13px;--type-caption-lh:1.45; /* @kind other */
/* Figures (ROI, counts, prices) */
--type-figure-size:36px;--type-figure-lh:1.1; /* @kind other */--type-figure-ls:-0.01em; /* @kind other */

--measure-prose:62ch; /* @kind other */
--measure-lead:48ch; /* @kind other */
}

/* ---- tokens/spacing.css ---- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--section-y:96px;--section-y-tight:64px;
--gutter:24px;
--container-max:1180px; /* @kind other */
--container-narrow:760px; /* @kind other */
}

/* ---- tokens/radius.css ---- */
:root{
--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-pill:999px;
--radius-card:var(--radius-lg);
--radius-control:var(--radius-sm);
--radius-button:var(--radius-pill);
--radius-media:var(--radius-lg);
--border-w:1px; /* @kind other */
--border-w-strong:2px; /* @kind other */
}

/* ---- tokens/elevation.css ---- */
:root{
/* Shadows are cool navy, never neutral black — they sit on warm sand surfaces. */
--shadow-xs:0 1px 2px rgba(21,34,53,.06);
--shadow-sm:0 2px 6px rgba(21,34,53,.07);
--shadow-md:0 8px 24px rgba(21,34,53,.09);
--shadow-lg:0 20px 48px rgba(21,34,53,.14);
--shadow-gold:0 8px 22px rgba(195,160,89,.32);
--shadow-inset-hairline:inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ---- tokens/motion.css ---- */
:root{
--ease-standard:cubic-bezier(.2,.6,.25,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--dur-fast:120ms; /* @kind other */--dur-base:200ms; /* @kind other */--dur-slow:320ms; /* @kind other */--dur-reveal:640ms; /* @kind other */
--motion-lift:translateY(-2px); /* @kind other */
--motion-press:scale(.985); /* @kind other */
}

/* ---- tokens/base.css ---- */
/* Minimal element defaults. Components carry their own styling via inline
   custom-property references; this file only sets the page baseline. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--type-body-size);line-height:var(--type-body-lh);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--fw-bold);margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--text-accent);text-decoration:none;border-bottom:1px solid rgba(195,160,89,.4);transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
a:hover{color:var(--gold-700);border-bottom-color:var(--gold-600)}
:where(.on-inverse) a{color:var(--text-accent-on-inverse);border-bottom-color:rgba(211,182,120,.45)}
:where(.on-inverse) a:hover{color:var(--gold-300)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}
img{max-width:100%;display:block}
button{font:inherit}
strong{font-weight:var(--fw-bold)}
::selection{background:var(--gold-300);color:var(--navy-800)}