/* tokens/fonts.css */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,600&display=swap');

/*  Marken-Schrift: FRUTIGER NEXT PRO (lizenzpflichtig, Dateien liegen nicht vor).
    Bis die Lizenzdateien da sind, laeuft das System auf Source Sans 3 —
    humanistische Grotesk, gleiche offene Punzen, sehr nahe Anmutung.
    Sobald die .woff2 vorliegen: die vier @font-face unten aktivieren und
    --font-sans auf "Frutiger Next Pro" stellen. Sonst nichts aendern. */

/*
@font-face { font-family: "Frutiger Next Pro"; font-weight: 300; font-style: normal;
             src: url("../assets/fonts/FrutigerNextPro-Light.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Frutiger Next Pro"; font-weight: 300; font-style: italic;
             src: url("../assets/fonts/FrutigerNextPro-LightItalic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Frutiger Next Pro"; font-weight: 500; font-style: normal;
             src: url("../assets/fonts/FrutigerNextPro-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Frutiger Next Pro"; font-weight: 800; font-style: normal;
             src: url("../assets/fonts/FrutigerNextPro-Heavy.woff2") format("woff2"); font-display: swap; }
*/

/* tokens/colors.css */
:root {
  /* ---- Marke ---------------------------------------------------------- */
  --bk-orange:            #F39200;  /* Markenorange – Primaerflaechen, Logo */
  --bk-orange-press:      #D97F00;  /* Aktiv/gedrueckt */
  --bk-orange-ink:        #8A4E00;  /* Orange als TEXT – Labels, Outline-Buttons, Zitate */
  --bk-orange-soft:       #FCE3BE;  /* weiche Orangeflaeche – Nav-CTA, Chips */
  --bk-orange-tint:       #FDF2E4;  /* Zuhause-Ton */
  --bk-orange-line:       #F0DCBC;  /* Rand auf Zuhause-Ton */

  /* ---- Neutral --------------------------------------------------------- */
  --bk-ink:               #211C15;  /* Text / Tiefschwarz */
  --bk-ink-muted:         #6E6355;  /* Text, gedaempft */
  --bk-line:              #E6DFD1;  /* Linie / Rahmen */
  --bk-warm:              #F3EEE5;  /* Flaeche, warm */
  --bk-page:              #FBF8F3;  /* Seitenhintergrund */
  --bk-white:             #FFFFFF;  /* Flaeche, neutral */

  /* ---- Business-Linie --------------------------------------------------- */
  --bk-business:          #F0F2EE;  /* Business-Ton */
  --bk-business-line:     #DCE1D9;  /* Rand auf Business-Ton */
  --bk-business-ink:      #43503F;  /* Text-Akzent Business */

  /* ---- Status ----------------------------------------------------------- */
  --bk-success:           #3F7A3F;
  --bk-success-tint:      #EDF4ED;
  --bk-warning:           #B4670A;
  --bk-warning-tint:      #FDF2E4;
  --bk-error:             #A8322A;
  --bk-error-tint:        #FBEDEB;

  /* ---- Semantische Aliase ------------------------------------------------ */
  --surface-page:         var(--bk-page);
  --surface-card:         var(--bk-white);
  --surface-warm:         var(--bk-warm);
  --surface-zuhause:      var(--bk-orange-tint);
  --surface-business:     var(--bk-business);
  --surface-accent:       var(--bk-orange);
  --surface-accent-soft:  var(--bk-orange-soft);

  --text-heading:         var(--bk-ink);
  --text-body:            var(--bk-ink-muted);
  --text-strong:          var(--bk-ink);
  --text-accent:          var(--bk-orange-ink);
  --text-on-accent:       var(--bk-white);

  --border-default:       var(--bk-line);
  --border-zuhause:       var(--bk-orange-line);
  --border-business:      var(--bk-business-line);
  --border-accent:        var(--bk-orange);
  --border-input:         var(--bk-line);

  --focus-ring:           0 0 0 3px rgba(243, 146, 0, 0.28);
}

/* tokens/typography.css */
:root {
  --font-sans: "Source Sans 3", "Frutiger Next Pro", "Frutiger", "Segoe UI", system-ui, sans-serif;
  --font-wordmark: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; /* nur Notbehelf – Logo ist Bilddatei */

  /* Gewichte – 1:1 zum Frutiger-Next-Pro-Set des Baukastens */
  --fw-light: 300;   /* Fliesstext */
  --fw-regular: 400;
  --fw-medium: 500;  /* Zwischentoene, Bedienelemente */
  --fw-bold: 700;
  --fw-heavy: 800;   /* Headlines */

  /* Groessen */
  --fs-display: 3.5rem;   /* 56 */
  --fs-h1: 2.75rem;       /* 44 */
  --fs-h2: 2rem;          /* 32 */
  --fs-h3: 1.5rem;        /* 24 */
  --fs-h4: 1.25rem;       /* 20 */
  --fs-body-lg: 1.1875rem;/* 19 */
  --fs-body: 1.0625rem;   /* 17 */
  --fs-body-sm: 0.9375rem;/* 15 */
  --fs-label: 0.8125rem;  /* 13 */

  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body: 0;
  --ls-label: 0.13em;

  /* Text-Rollen */
  --type-display: var(--fw-heavy) var(--fs-display)/var(--lh-tight) var(--font-sans);
  --type-h1:      var(--fw-heavy) var(--fs-h1)/var(--lh-tight) var(--font-sans);
  --type-h2:      var(--fw-heavy) var(--fs-h2)/var(--lh-heading) var(--font-sans);
  --type-h3:      var(--fw-medium) var(--fs-h3)/var(--lh-snug) var(--font-sans);
  --type-h4:      var(--fw-medium) var(--fs-h4)/var(--lh-snug) var(--font-sans);
  --type-body-lg: var(--fw-light) var(--fs-body-lg)/var(--lh-body) var(--font-sans);
  --type-body:    var(--fw-light) var(--fs-body)/var(--lh-body) var(--font-sans);
  --type-body-sm: var(--fw-light) var(--fs-body-sm)/var(--lh-body) var(--font-sans);
  --type-button:  var(--fw-medium) var(--fs-body)/1 var(--font-sans);
  --type-label:   var(--fw-medium) var(--fs-label)/1.2 var(--font-sans);
}

/* 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;

  --gutter-mobile: var(--space-5);
  --gutter-desktop: var(--space-12);
  --content-max: 1180px;
  --measure: 62ch;          /* max. Zeilenlaenge Fliesstext */

  --section-y-mobile: var(--space-12);
  --section-y-desktop: var(--space-24);

  --control-h: 52px;        /* Buttons, Inputs – Desktop */
  --control-h-sm: 44px;     /* kompakt / Navigation */
  --control-px: var(--space-6);
}

/* tokens/shape.css */
:root {
  --radius-sm: 8px;
  --radius-md: 10px;   /* Buttons, Inputs */
  --radius-lg: 14px;   /* Karten */
  --radius-xl: 20px;   /* grosse Flaechen, Bildcontainer */
  --radius-pill: 999px;/* Nav-CTA, Chips */

  --border-width: 1px;
  --border-width-strong: 1.5px; /* Outline-Button */

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(33, 28, 21, 0.05);
  --shadow-md: 0 2px 10px rgba(33, 28, 21, 0.06);
  --shadow-lg: 0 10px 30px rgba(33, 28, 21, 0.08);
  --shadow-accent: 0 6px 18px rgba(243, 146, 0, 0.22);
}

/* tokens/motion.css */
:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 120ms;   /* Farbwechsel auf Hover */
  --dur-base: 180ms;   /* Buttons, Inputs, Karten */
  --dur-slow: 280ms;   /* Panels, Menue-Ausklappen */

  --press-scale: 0.985;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --press-scale: 1; }
}

/* tokens/base.css */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

h1, h2, h3, h4 { margin: 0; color: var(--text-heading); text-wrap: balance; }
h1 { font: var(--type-h1); letter-spacing: var(--ls-display); }
h2 { font: var(--type-h2); letter-spacing: var(--ls-heading); }
h3 { font: var(--type-h3); }
h4 { font: var(--type-h4); }
p  { margin: 0 0 var(--space-4); max-width: var(--measure); }

a { color: var(--text-accent); text-decoration-color: color-mix(in srgb, var(--bk-orange-ink) 35%, transparent); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--bk-orange-press); text-decoration-color: currentColor; }

em { font-style: italic; font-weight: var(--fw-light); }
strong { font-weight: var(--fw-medium); color: var(--text-strong); }

::selection { background: var(--bk-orange-soft); color: var(--bk-ink); }

:focus-visible { outline: 2px solid var(--bk-orange); outline-offset: 2px; border-radius: var(--radius-sm); }