/* rmd-kadence-child/assets/css/tokens.css
   RMD Design-System - Single Source of Truth (CSS Custom Properties).
   ABGELEITET AUS design-system.md (Repo-Wurzel). Werte NICHT hier einzeln aendern, sondern in
   design-system.md pflegen und hier synchron nachziehen, damit Doku und Code identisch bleiben.
   Kein Stylesheet nutzt rohe Hex-Werte oder Magic Numbers - alles referenziert diese Tokens.
   Schrift (@font-face) liegt in fonts.css, nicht hier (Dateinamen dort korrekt + Preload).
   Neu (additiv): --color-link*, --btn-neutral*, --color-sale. Geaendert (Werte): --container 1350,
   --color-error #CC3300, --color-error-hover #A82800. Theme-Komponenten-Tokens (Feld/Notice/
   Footer-Social/Schatten-CTA/container-wide,narrow/space-14) bleiben - vom Theme genutzt. */
:root{
  /* ===== Farben: Basis (hell) ===== */
  --color-page:#FCFCFC;            /* Globaler Seiten-Hintergrund - leichtes Grau, einheitlich ueber ALLE Seiten, weisse Karten heben sich ab */
  --color-bg:#FFFFFF;              /* Hauptgrund/Weiss (Karten, Elemente) */
  --color-surface:#F7F7F7;         /* Sektionen, Insets, Abgrenzung */
  --color-headline:#000000;        /* Ueberschriften */
  --color-text:#0D1012;            /* Fliesstext */
  --color-text-muted:#4F5050;      /* sekundaerer/gedaempfter Text */
  --color-icon-quiet:#9CA1A5;      /* ruhige Icon-Farbe hell (Bauform-Picker); Hover/Fokus -> headline */
  --color-border:#E2E2E2;          /* feine Linien; NICHT mehr fuer Karten-Rahmen (Bauregel 1) */
  --color-border-strong:#CCCCCC;   /* staerkere Trenner */
  --color-hairline:#E6E7E8;        /* Haarlinie hell - trennt, statt einzurahmen (Bauregel 2) */

  /* ===== Farben: Signal (RMD-Gelb, nur Akzent) ===== */
  --color-signal:#FFEA76;          /* max. 1 CTA + 1 Detail pro Viewport, nie flaechig */
  --color-signal-soft:#FFF89D;
  --color-signal-hover:#F0D94A;
  --color-on-signal:#0D1012;       /* Text AUF Gelb immer dunkel */

  /* ===== Links (WoodMart real) ===== */
  --color-link:#333333;
  --color-link-hover:#242424;

  /* ===== Buttons: neutral (WoodMart real, gefuellt - nicht Outline) ===== */
  --btn-neutral-bg:#F7F7F7;
  --btn-neutral-bg-hover:#EFEFEF;
  --btn-neutral-text:#0D1012;

  /* ===== Buttons: dunkel (Kauf-CTA der Buy-Box - traegt nicht das Signal) ===== */
  --btn-dark-bg:#17191B;
  --btn-dark-bg-hover:#2C2F32;
  --btn-dark-text:#FFFFFF;

  /* ===== Button-Hoehen (lg = Kauf-Zone der PDP) ===== */
  --btn-height:40px;
  --btn-height-lg:56px;
  --btn-height-sm:52px;

  /* ===== Farben: funktional (sparsam) ===== */
  --color-error:#CC3300;             /* WoodMart warning (war #FF0000) */
  --color-error-hover:#A82800;
  --color-success:#1E8E3E;           /* bewusst gruen, nicht WoodMarts gelbe Notice */
  --color-online:#3ECF6B;            /* helleres Presence-Gruen: "wir sind erreichbar"-Punkt (FAQ-Team) */
  --color-sale:#D62828;              /* SALE-/Rabatt-Badge Rot (Text weiss), getrennt vom Signal-Gelb */

  /* ===== Farben: dunkel (Footer / dunkle Sektionen) ===== */
  --color-dark:#17191B;
  --color-dark-2:#1E2124;          /* minimal heller: angehobene Flaeche auf dunklem Panel (FAQ-Kontaktspalte) */
  --surface-on-dark:rgba(255,255,255,.05);        /* durchscheinende Flaeche auf dunklem Panel (Felder/Hinweis) - Bauregel 1: Flaeche statt Rahmen */
  --surface-on-dark-hover:rgba(255,255,255,.08);  /* dieselbe Flaeche bei Hover/Fokus */
  --color-dark-line:#2C2F32;
  --color-hairline-dark:var(--color-dark-line); /* Haarlinie auf dunklem Panel = derselbe Wert, bewusst Alias statt Dublette */
  --color-on-dark:#FFFFFF;
  --color-on-dark-muted:#B9BDC1;

  /* ===== Farben: Material ===== */
  --color-alu:#C9CCCE;

  /* ===== Komponenten-Tokens (design-system.md Abschnitt 7) ===== */
  --color-star:#E8B93A;            /* Bewertungssterne */
  --color-field-bg:#FFFFFF;        /* Eingabefeld-Grund */
  --color-field-border:#D7D5D0;    /* Eingabefeld-Rahmen */
  --field-height:48px;             /* Standard-Feldhoehe */
  --color-success-bg:#EEF5EE;  --color-success-ink:#1E5B22;
  --color-info-bg:#FFF8DD;
  --color-error-bg:#FDECEB;    --color-error-ink:#A01813;
  --color-dark-social:#26292C; --color-dark-social-hover:#34383B;

  /* ===== Schatten ===== */
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 6px 28px rgba(13,16,18,.07);
  --shadow-lg:0 20px 40px rgba(13,16,18,.10);
  --shadow-cta:0 4px 18px rgba(13,16,18,.10);      /* Primaer-Button/CTA */
  --shadow-header:0 4px 20px rgba(13,16,18,.07);   /* Sticky-Header */

  /* ===== Radien ===== */
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:18px;
  --radius-pill:999px;              /* Buttons */
  --radius-card:20px;               /* Karten (Bauregel 7) */
  --radius-panel:28px;              /* grosse Panels: FAQ, Final-CTA, Beschreibung */

  /* ===== Typografie: Familien ===== */
  --font-head:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-body:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  /* ===== Typografie: Gewichte ===== */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-head:var(--fw-bold);        /* nur Headlines - wird mobil leichter, siehe unten */

  /* ===== Typografie: Groessen (modular ~1.2) ===== */
  --fs-xs:12px;
  --fs-sm:14px;
  --fs-base:16px;
  --fs-md:18px;
  --fs-lg:20px;
  --fs-xl:24px;
  --fs-2xl:29px;
  --fs-3xl:34px;
  --fs-4xl:42px;
  --fs-5xl:56px;                   /* Sektions-Headline - der grosse Sprung (Bauregel 5) */
  --fs-6xl:72px;                   /* Panel-Headline (FAQ) */

  /* ===== Zeilenhoehen ===== */
  --lh-flat:1.05;    /* kompakte, mehrzeilige UI-Labels (z.B. Varianten-Kacheln) */
  --lh-tight:1.15;   /* Headlines */
  --lh-snug:1.3;
  --lh-normal:1.55;  /* Fliesstext */

  /* ===== Spacing (4px-Basis) ===== */
  --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-14:56px; --space-16:64px; --space-20:80px;
  --space-section:112px;           /* Sektions-Rhythmus - Weissraum ist das Wertigkeits-Signal (Bauregel 6) */

  /* ===== Layout ===== */
  --container:1350px;              /* WoodMart site_custom_width (war 1280) */
  --container-wide:1440px;
  --container-narrow:820px;
  --container-pad:28px;
  --mega-feature-w:320px;         /* Feature-Card im Shop-Mega-Menue (Header-Dropdown) */

  /* ===== Breakpoints =====
     Hinweis: CSS Custom Properties koennen NICHT in @media-Bedingungen genutzt werden.
     Daher hier zentral dokumentiert und in allen Komponenten identisch verwendet:
       Mobile  : max-width 767px
       Tablet  : max-width 1024px
       Desktop : ab 1140px */
  --bp-mobile:767px;
  --bp-tablet:1024px;
  --bp-desktop:1140px;
}

/* ===== Mobil: feinere Typografie =====
   Headings kleiner (wirkt filigraner, weniger "globig"). Body/Small/XS bleiben unveraendert -
   --fs-base bleibt 16px, damit iOS bei Formularfeldern nicht hineinzoomt. Kaskadiert ueber ALLE
   token-basierten Komponenten (Styleguide, Header, Footer, Bloecke, Checkout, Konto). */
@media(max-width:767px){
  :root{
    --fs-md:16px;     /* Desktop 18 */
    --fs-lg:17px;     /* Desktop 20 */
    --fs-xl:19px;     /* Desktop 24 */
    --fs-2xl:21px;    /* Desktop 29 */
    --fs-3xl:24px;    /* Desktop 34 */
    --fs-4xl:27px;    /* Desktop 42 */
    --fs-5xl:36px;    /* Desktop 56 */
    --fs-6xl:44px;    /* Desktop 72 */

    /* Sections atmen mobil weniger - 112px waeren am Handy verlorener Raum, kein Premium-Signal */
    --space-section:72px;  /* Desktop 112 */

    /* Headlines leichter: Montserrat 700 traegt auf kleinen Displays zu viel Flaeche. Das
       loest das "globig" wirksamer als noch kleinere Groessen. Nur Headlines - --fw-bold
       selbst bleibt 700, damit Buttons, Badges und Preise unveraendert kraeftig bleiben. */
    --fw-head:var(--fw-semibold);
  }
}