/* ==========================================================================
   Malerfachbetrieb Bulut – Design Tokens
   Farbwelt abgeleitet aus der Wort-/Bildmarke (MB-Monogramm: Anthrazit + Gold)
   sowie aus realen Projektfarben des Betriebs.
   ========================================================================== */

:root {
  /* --- Marke ----------------------------------------------------------- */
  --color-brand-primary: #16161a;      /* Logo-Anthrazit (Wortmarke)        */
  --color-brand-secondary: #23232a;    /* aufgehelltes Anthrazit            */
  --color-accent: #f0c024;             /* Logo-Gold (aus Bildmarke gemessen)*/
  --color-accent-deep: #c8951a;        /* Gold, abgedunkelt (Verläufe)      */
  --color-accent-soft: #f8e5ab;        /* Gold, aufgehellt (Flächen)        */
  --color-accent-ink: #7a5a0c;         /* Gold als Textfarbe auf Hell       */

  /* --- Flächen --------------------------------------------------------- */
  --color-dark: #0e0e11;
  --color-dark-2: #191920;
  --color-surface: #ffffff;
  --color-surface-alt: #f6f3ee;        /* warmes Papierweiß                 */
  --color-surface-alt-2: #ede7df;
  --color-border: #ded6ca;
  --color-border-strong: #c9beac;

  /* --- Text ------------------------------------------------------------ */
  --color-text: #1e1e22;
  --color-text-invert: #f6f3ee;
  --color-muted: #6e6a63;
  --color-muted-invert: #a5a099;

  /* --- Projektfarben (aus ausgeführten Arbeiten) ------------------------ */
  --tone-sand: #cbbba6;
  --tone-greige: #b9a797;
  --tone-signal: #b62b22;
  --tone-eiche: #c9a06a;
  --tone-anthrazit: #3a3d40;
  --tone-rein: #f2f1ee;

  /* --- Typografie ------------------------------------------------------- */
  --font-display: "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica", Arial, sans-serif;
  --font-body: var(--font-display);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-eyebrow: 0.72rem;
  --fs-small: 0.85rem;
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.65rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 3.4rem);
  --fs-h1: clamp(2.15rem, 1.25rem + 3.9vw, 4.7rem);
  --fs-hero: clamp(2.35rem, 1rem + 6.6vw, 7rem);
  --fs-display: clamp(3.4rem, 1rem + 11vw, 11rem);

  --lh-tight: 0.98;
  --lh-snug: 1.15;
  --lh-body: 1.65;
  --ls-tight: -0.035em;
  --ls-wide: 0.22em;

  /* --- Raster & Abstände ------------------------------------------------ */
  --container: 1280px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: clamp(4.5rem, 9vw, 8.5rem);
  --space-3xl: clamp(6rem, 13vw, 12rem);

  /* --- Radien, Schatten, Bewegung -------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(18, 16, 12, 0.06),
               0 2px 8px rgba(18, 16, 12, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 16, 12, 0.08),
               0 18px 40px -18px rgba(18, 16, 12, 0.22);
  --shadow-lg: 0 8px 24px rgba(18, 16, 12, 0.10),
               0 40px 80px -32px rgba(18, 16, 12, 0.35);
  --shadow-gold: 0 18px 40px -22px rgba(200, 149, 26, 0.55);

  --transition-fast: 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-normal: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-slow: 620ms cubic-bezier(0.16, 0.84, 0.44, 1);

  --header-height: 78px;
  --z-header: 130;   /* über dem Panel, damit der Schließen-Button sichtbar bleibt */
  --z-nav: 120;
  --z-actions: 90;
  --z-lightbox: 200;
}

@media (max-width: 760px) {
  :root { --header-height: 64px; }
}