/* =============================================================
   FOK Architekten — Design System Tokens
   Brand: FOK Architekten (Fix, Osborne-Kraft Architekten)
   Status: Mai 2026
   ============================================================= */

/* Brand font — Open Sans (variable, supplied by user) */
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
/* Fallback — Public Sans via Google Fonts (kept as graceful fallback for previews/other paths) */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Primary palette ---------- */
  --fok-orange:      #F26A1F;   /* Signal Orange — sole accent. F/O/K letters, stempel bg, link hover, V2 accent line */
  --fok-anthrazit:   #1A1A1A;   /* Body text, logo main, stempel-on-orange */
  --fok-paper:       #FFFFFF;   /* Default surface */

  /* ---------- Secondary palette ---------- */
  --fok-sand:        #F5F2EE;   /* Warm section bg (printed-feel) */
  --fok-grau-60:     #6B6B6B;   /* Secondary text, captions, UI */

  /* ---------- Extended neutrals (UI scaffolding only) ---------- */
  --fok-grau-bg:     #FAFAFA;   /* Subtle section background */
  --fok-grau-line:   #E8E5E0;   /* Hairline rule */
  --fok-grau-90:     #2C2C2C;   /* Slightly off anthrazit for layered surfaces */

  /* ---------- Semantic foreground tokens ---------- */
  --fg-1: var(--fok-anthrazit);   /* Primary text */
  --fg-2: var(--fok-grau-60);     /* Secondary text, captions */
  --fg-accent: var(--fok-orange); /* Link, F/O/K, accent line */
  --fg-on-dark: #FFFFFF;
  --fg-on-orange: var(--fok-anthrazit);

  /* ---------- Semantic background tokens ---------- */
  --bg-1: var(--fok-paper);
  --bg-2: var(--fok-grau-bg);
  --bg-warm: var(--fok-sand);
  --bg-dark: var(--fok-anthrazit);
  --bg-accent: var(--fok-orange);

  /* ---------- Border tokens ---------- */
  --border-hairline: 0.5px solid var(--fok-grau-line);
  --border-strong:   1.5px solid var(--fok-anthrazit);

  /* ---------- Typography ---------- */
  --font-sans: 'Open Sans', 'Public Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — exactly per brand briefing */
  --fs-display:     48px;
  --fs-headline:    28px;
  --fs-subheadline: 18px;
  --fs-body:        15px;
  --fs-auszeichnung:15px;   /* Numbers, prices, trust signals */
  --fs-caption:     13px;
  --fs-meta:        11px;

  --lh-display:     1.05;
  --lh-headline:    1.2;
  --lh-body:        1.65;
  --lh-logo:        0.95;

  --ls-display:     -0.03em;
  --ls-headline:    -0.025em;
  --ls-subheadline: -0.015em;
  --ls-body:        0;
  --ls-meta:        0.25em;   /* Sperrweite for labels */
  --ls-stempel:     0.02em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;   /* Logo + headlines */
  --fw-semibold: 600;   /* Numbers, meta-labels, favicon */

  /* ---------- Spacing scale (8pt grid w/ a 4 step) ---------- */
  --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;

  /* ---------- Radius (very restrained) ---------- */
  --radius-0:  0;
  --radius-1:  2px;     /* Default UI: buttons, inputs */
  --radius-2:  4px;     /* Color chips, small cards */
  --radius-3:  12px;    /* Large panels, image containers */
  --radius-stempel: 12px;  /* On 200px stempel — proportional ~6% */
  --radius-apple-touch: 22.5%;

  /* ---------- Shadows (used VERY sparingly — brand is mostly flat) ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(26, 26, 26, 0.04), 0 0 0 0.5px var(--fok-grau-line);
  --shadow-2: 0 8px 24px -8px rgba(26, 26, 26, 0.08), 0 0 0 0.5px var(--fok-grau-line);
  --shadow-image: 0 24px 48px -16px rgba(26, 26, 26, 0.18);

  /* ---------- Logo construction (from briefing §4) ---------- */
  --logo-ls-haupt:        -0.03em;
  --logo-ls-architekten:  -0.005em;
  --logo-architekten-ratio: 0.4;     /* 40% of haupt size */
  --logo-min-height:      80px;       /* below this -> use stempel */
  --logo-line-width:      5px;        /* V2 accent line at 44px */
  --accent-line-width-default: 5px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* Calm, architectural */
  --ease-out:      cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
}

/* =============================================================
   Base type — applied as semantic classes, not opinionated globals
   ============================================================= */

html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
  color:       var(--fg-1);
  background:  var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fok-display {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size:   var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.fok-headline {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size:   var(--fs-headline);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-headline);
}

.fok-subheadline {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size:   var(--fs-subheadline);
  line-height: 1.4;
  letter-spacing: var(--ls-subheadline);
}

.fok-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size:   var(--fs-body);
  line-height: var(--lh-body);
}

.fok-auszeichnung {     /* For Festpreise, BGF-Zahlen, Trust-Signale */
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-auszeichnung);
}

.fok-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size:   var(--fs-caption);
  color: var(--fg-2);
  line-height: 1.5;
}

.fok-meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Semantic equivalents (for prose contexts) */
h1, .h1 { font: var(--fw-medium) var(--fs-display)/var(--lh-display) var(--font-sans); letter-spacing: var(--ls-display); }
h2, .h2 { font: var(--fw-medium) var(--fs-headline)/var(--lh-headline) var(--font-sans); letter-spacing: var(--ls-headline); }
h3, .h3 { font: var(--fw-medium) var(--fs-subheadline)/1.4 var(--font-sans); letter-spacing: var(--ls-subheadline); }
p       { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); }
small   { font: var(--fw-light) var(--fs-caption)/1.5 var(--font-sans); color: var(--fg-2); }
code, pre { font-family: var(--font-mono); font-size: 13px; }

/* Links — accent only on hover, briefing §5 'Link-Hervorhebungen' */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--fg-accent); border-bottom-color: var(--fg-accent); }

/* Selection — orange highlight */
::selection { background: var(--fok-orange); color: var(--fok-anthrazit); }