/* ============================================================
   Firmengolf — Typography tokens
   Type ramp mirrors firmen.golf: heavy geometric-sans headings,
   clean body, generous line-heights.

   FONT SUBSTITUTION — please confirm:
   • Headings/body sans on the live site is a proprietary geometric
     sans (Sofia-family look). Substituted with **Poppins** (closest
     free geometric match). Swap in the licensed WOFF here when ready.
   • The "Firmengolf." wordmark is a proprietary heavy italic display
     serif (Cooper-Black-italic feel). It ships only as the PNG logo
     asset; no web font is used for it. --font-wordmark below is a
     display fallback for the rare case body text must echo it.
   ============================================================ */

/* Poppins lokal gehostet (DSGVO: kein Google-Fonts-CDN). Latin-Subset inkl. Umlaute. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/poppins-800.woff2') format('woff2'); }

:root {
  /* ---- Families -------------------------------------------------- */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Fallback for wordmark-echo only — real logo is the PNG asset */
  --font-wordmark: 'Fraunces', 'Poppins', Georgia, serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* ---- Weights --------------------------------------------------- */
  --fw-regular: 400;  /* @kind other */
  --fw-medium:  500;  /* @kind other */
  --fw-semibold:600;  /* @kind other */
  --fw-bold:    700;  /* @kind other */
  --fw-extra:   800;  /* @kind other */

  /* ---- Type scale (px reference, rem values) --------------------- */
  --fs-display:  4.5rem;   /* 72 — hero headline */
  --fs-h1:       3.25rem;  /* 52 */
  --fs-h2:       2.5rem;   /* 40 — section titles "Unsere Angebote" */
  --fs-h3:       1.75rem;  /* 28 */
  --fs-h4:       1.375rem; /* 22 */
  --fs-lead:     1.25rem;  /* 20 — hero sub / lead */
  --fs-body:     1rem;     /* 16 */
  --fs-sm:       0.875rem; /* 14 */
  --fs-xs:       0.75rem;  /* 12 — labels, eyebrow */

  /* ---- Line heights ---------------------------------------------- */
  --lh-tight:   1.05;   /* @kind other */
  --lh-heading: 1.15;   /* @kind other */
  --lh-snug:    1.35;   /* @kind other */
  --lh-body:    1.6;    /* @kind other */

  /* ---- Letter spacing -------------------------------------------- */
  --ls-tight:   -0.02em;  /* @kind other */
  --ls-normal:  0;        /* @kind other */
  --ls-eyebrow: 0.08em;   /* @kind other */
}
/* ============================================================
   Firmengolf — Color tokens
   Sampled from firmen.golf, the brochures and the logo suite.
   ============================================================ */

:root {
  /* ---- Brand core ------------------------------------------------ */
  /* Navy — the signature Firmengolf background & wordmark color */
  --fg-navy-900: #161d38;   /* darkest — deep sections, footer */
  --fg-navy-800: #1a2242;
  --fg-navy-700: #20294d;   /* PRIMARY brand navy (page bg, cards) */
  --fg-navy-600: #2b355e;
  --fg-navy-500: #3a4670;

  /* Teal — the deep "Access" card surface */
  --fg-teal-900: #002b38;
  --fg-teal-800: #003747;   /* PRIMARY deep teal surface */
  --fg-teal-700: #084a5c;

  /* Mint / Türkis — the primary accent (CTAs, highlights, checks) */
  --fg-mint-600: #00a97e;   /* hover / text-on-light */
  --fg-mint-500: #00c896;   /* PRIMARY mint */
  --fg-mint-400: #33d4ab;
  --fg-mint-300: #7fe4ca;
  --fg-mint-100: #d4f7ee;   /* mint tint surface */

  /* Royal blue — secondary action (App CTAs) */
  --fg-blue-600: #2f63bf;
  --fg-blue-500: #4279d1;   /* PRIMARY blue */
  --fg-blue-400: #6b98de;
  --fg-blue-100: #dde8f8;

  /* Orange — energetic accent (tagline variant, highlights) */
  --fg-orange-600: #e85a1f;
  --fg-orange-500: #ff7138;  /* PRIMARY orange */
  --fg-orange-400: #ff9264;
  --fg-orange-100: #ffe4d6;

  /* ---- Neutrals -------------------------------------------------- */
  --fg-white:   #ffffff;
  --fg-gray-50:  #f6f7fa;   /* page / section light bg */
  --fg-gray-100: #eceef3;
  --fg-gray-200: #dde0e9;   /* borders on light */
  --fg-gray-300: #c3c8d6;
  --fg-gray-400: #9aa1b5;
  --fg-gray-500: #6b7288;   /* muted body text */
  --fg-gray-600: #4c5468;
  --fg-gray-700: #333a4d;
  --fg-black:   #0d1120;

  /* ---- Semantic aliases ----------------------------------------- */
  /* Surfaces */
  --surface-page:        var(--fg-white);
  --surface-page-dark:   var(--fg-navy-700);
  --surface-section:     var(--fg-gray-50);
  --surface-card:        var(--fg-white);
  --surface-card-navy:   var(--fg-navy-700);
  --surface-card-teal:   var(--fg-teal-800);
  --surface-mint-tint:   var(--fg-mint-100);

  /* Text */
  --text-strong:      var(--fg-navy-700);   /* headings on light */
  --text-body:        var(--fg-gray-600);   /* body on light */
  --text-muted:       var(--fg-gray-500);
  --text-on-dark:     var(--fg-white);
  --text-on-dark-dim: rgba(255,255,255,0.72);
  --text-accent:      var(--fg-mint-500);   /* highlighted words */

  /* Actions */
  --action-primary:        var(--fg-mint-500);
  --action-primary-hover:  var(--fg-mint-600);
  --action-primary-text:   var(--fg-navy-700);
  --action-secondary:      var(--fg-blue-500);
  --action-secondary-hover:var(--fg-blue-600);
  --action-secondary-text: var(--fg-white);

  /* Lines & feedback */
  --border-subtle:  var(--fg-gray-200);
  --border-strong:  var(--fg-gray-300);
  --border-on-dark: rgba(255,255,255,0.16);
  --focus-ring:     var(--fg-mint-500);
  --success:        var(--fg-mint-500);
  --info:           var(--fg-blue-500);
  --warning:        var(--fg-orange-500);
}
/* ============================================================
   Firmengolf — Spacing, radii, shadows, layout, motion
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-10: 4rem;     /* 64 */
  --space-12: 5rem;     /* 80 */
  --space-16: 7.5rem;   /* 120 — section rhythm */

  /* ---- Radii ----------------------------------------------------- */
  /* Firmengolf leans on soft, generous rounding */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;    /* buttons, inputs */
  --radius-xl:   24px;    /* cards */
  --radius-2xl:  32px;    /* feature cards, image frames */
  --radius-3xl:  40px;    /* hero image frame */
  --radius-pill: 999px;   /* toggles, tags */

  /* ---- Shadows (soft, low-contrast, navy-tinted) ----------------- */
  --shadow-xs: 0 1px 2px rgba(22,29,56,0.06);
  --shadow-sm: 0 2px 8px rgba(22,29,56,0.06);
  --shadow-md: 0 8px 24px rgba(22,29,56,0.08);
  --shadow-lg: 0 16px 40px rgba(22,29,56,0.10);
  --shadow-xl: 0 28px 64px rgba(22,29,56,0.14);
  --shadow-mint: 0 12px 28px rgba(0,200,150,0.28);   /* on mint CTAs */

  /* ---- Layout ---------------------------------------------------- */
  --container-max: 1200px;   /* @kind other */
  --container-wide: 1360px;  /* @kind other */
  --gutter: var(--space-6);  /* @kind spacing */

  /* ---- Motion ---------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   220ms;  /* @kind other */
  --dur-slow:   360ms;  /* @kind other */
}