/*
Theme Name: ARKAD Partners
Theme URI:
Description: Custom WordPress theme built from the ARKAD Partners Figma design (file 5QwmEhjkSBqs1wiGkDmSia, 1920px design width).
Version: 1.0
Author:
Text Domain: arkad
*/

:root {
  /* === Colors (figma-audit.json → colors[]) === */
  --color-dark-green: #11320b;            /* stat card bg, dark headings, footer A deco, popup dim base */
  --color-deep-green: #052000;            /* hero Green_Glass fill (.75), overlay glass vector (.55) */
  --color-glass-green: #2a3e1a;           /* image-section overlay (.64), card hover panel (.75), popup panel */
  --color-bright-green: #89f075;          /* accent text spans, link hover, contact + hash icons */
  --color-cream-green: #d9ffd2;           /* hero heading base, overlay headings, footer contact text, close X */
  --color-pale-green: #ebfce8;            /* stats section bg, footer bottom bar bg */
  --color-badge-green: #ccebc6;           /* badge diamond bg (opacity 0 in design — unused) */
  --color-sage: #5b8553;                  /* team heading accent "im Team" */
  --color-icon-sage: #65885f;             /* stat card geometric icon stroke/fill */
  --color-white: #ffffff;                 /* nav links default, overlay paragraphs, white section bg */
  --color-text-grey: #3d3d3d;             /* team card name label */
  --color-heading-dark-53: rgba(17, 50, 11, 0.53); /* stats heading line 2 */

  /* === Alpha fills (figma-audit.json → colors[].usage opacities) === */
  --fill-hero-glass: rgba(5, 32, 0, 0.75);
  /* Hero overlay made fully opaque on client request (Feedback 2.0 #3):
     the green shape blocks the photo entirely; the image shows only through
     the brand "A" cutout. Deviates from Figma's 0.75 glass — heroes only;
     the footer keeps --fill-hero-glass. */
  --fill-hero-solid: #052000;
  --fill-glass-55: rgba(5, 32, 0, 0.55);
  --fill-overlay-64: rgba(42, 62, 26, 0.64);
  --fill-panel-75: rgba(42, 62, 26, 0.75);
  --fill-popup-dim: rgba(17, 50, 11, 0.36);

  /* === Font families ===
     Merchant is the client-provided display serif (self-hosted as
     'Merchant Real' in assets/css/fonts.css, weights 100/200/300/400) used
     site-wide. 'Sentient' remains as a fallback stand-in if a weight is
     missing. Switzer is the body face. */
  --font-display: 'Merchant Real', 'Merchant', 'Sentient', Georgia, 'Times New Roman', serif;
  --font-body: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* === Font sizes (figma-audit.json → typography[]; 1920 design → vw = px/19.2) === */
  --fs-h1: clamp(56px, 4.7917vw, 92px);        /* hero H1, Merchant 100 */
  /* Heading clamp floors lowered (Feedback 3.0 typography): the floors now
     keep the hierarchy ordered on mobile/tablet (H2 28 > H3 26 > stat 24 >
     sub 22 > body 20) and grow fluidly to the desktop max. Per-element mobile
     overrides removed so these tokens are the single source of truth. */
  --fs-h2: clamp(28px, 3.75vw, 72px);          /* section headings, Merchant 200 */
  --fs-h3: clamp(26px, 3.3333vw, 64px);        /* ">15 Jahre" stat ONLY (.stat-value-lg) — one-off above the H1–H4 scale */
  --fs-stat: clamp(24px, 2.9167vw, 56px);      /* stat values / 56px display (feedback "H3"), Merchant 200 */
  --fs-h4: clamp(26px, 2.0833vw, 40px);        /* 40px sub-headings: news-row title, four-card subtitle (feedback "H4") */
  --fs-footer-org: clamp(24px, 1.6667vw, 32px);/* footer org name, Switzer 500 */
  --fs-2xl: clamp(18px, 1.25vw, 24px);         /* hero nav links (400), footer contact rows (300) */
  --fs-nav-sticky: clamp(17px, 1.1458vw, 22px);/* sticky nav links, Switzer 400 */
  --fs-xl: 20px;                                /* body / overlay paragraphs (400), popup rows (300), footer bottom bar (400) */
  --fs-md: 18px;                                /* team card name label (400), card bio (300) */
  --fs-badge: 16px;                             /* "Zur Biografie" badge (opacity 0 — unused) */

  /* === Line heights (figma-audit.json → typography[].lineHeightCss) === */
  --lh-h1: 1.05;
  --lh-heading: 1.2;
  --lh-stat: 1.3;
  --lh-label: 1.4;
  --lh-body: 1.5;

  /* === Border radius (figma-audit.json → border_radius.tokens[]) === */
  --radius-sm: 4px;    /* team card hover bio panel */
  --radius-md: 8px;    /* stat cards */

  /* === Transitions (figma-audit.json → interactions[].transition) === */
  --transition-link: 0.6s ease-in-out;     /* ON_HOVER links + team cards (SMART_ANIMATE 0.6s EASE_IN_AND_OUT) */
  --transition-reveal: 1.2s ease-in-out;   /* MOUSE_ENTER image-section overlay reveal (SMART_ANIMATE 1.2s) */

  /* === Backdrop blurs (figma-audit.json → effects[], Figma BACKGROUND_BLUR radii) === */
  --blur-hero: 80px;            /* hero + footer green glass (was 160px; lowered on request) */
  --blur-nav: 64px;
  --blur-overlay: 64px;
  --blur-panel: 36px;

  /* === Layout === */
  --design-width: 1920px;  /* The Figma design width. Below it the min(vw,px)
                              layout scales DOWN fluidly; above it the whole page
                              scales UP proportionally (root zoom in main.css) so
                              wide screens / zoom-OUT stay coherent & legible. */
}

/* === Feedback 4.0 #1 — Exact Typography per breakpoint (Figma Sync) ===
   The client supplied fixed px targets per device class, so the primary type
   scale STEPS at the tablet/mobile breakpoints instead of scaling fluidly — a
   single clamp() cannot reproduce a non-linear step (e.g. 72 → 34 → 30). These
   :root overrides are a deliberate, client-driven exception to the project's
   "no :root overrides in @media" convention; keeping the scale in ONE place is
   more maintainable than re-declaring font-size on every element.

   DESKTOP stays fluid (the clamps above), so it hits the exact Figma px at the
   1920 design width and scales down on smaller desktops.
   The hero H1 (.hero-heading) now steps at tablet/mobile too (client spec below):
   40px tablet / 36px mobile — both smaller than the desktop clamp, so "Investment
   mit Weitblick" never collides with the brand "A" cutout on phones. .hero-heading's
   base uses --fs-h1, so stepping the token here drives the hero at every breakpoint.

   Target scale (Desktop / Tablet / Mobile) — H1–H4 as marked in Figma:
     H1  --fs-h1   92 / 40 / 36   (.hero-heading — hero headline, all pages)
     H2  --fs-h2   72 / 34 / 30   (.section-heading, .module-heading — section titles)
     H3  --fs-stat 56 / 30 / 24   (.kf-box-headline "Deal-Fakten", .search-profile-title)
     H4  --fs-h4   40 / 24 / 22   (.news-row-title, .four-card-subtitle — sub-headings)
     Body --fs-xl  20 / 18 / 18   (paragraphs / main typeface) */
@media (max-width: 1200px) {
  :root {
    --fs-h1: 40px;
    --fs-h2: 34px;
    --fs-stat: 30px;
    --fs-h4: 24px;
    --fs-xl: 18px; /* main typeface: 18 at tablet too (client spec) */
  }
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 36px;
    --fs-h2: 22px;               /* mobile redesign (Figma): H2 22 */
    --fs-stat: 24px;
    --fs-h4: 22px;
    --fs-xl: 18px;               /* mobile redesign (Figma): Fließtext / body 18 */
    --fs-footer-org: 20px;       /* mobile redesign (Figma): footer org name 20 */
  }
}