/* ============================================================
   Kainer GmbH — Design Tokens
   ------------------------------------------------------------
   Per-brand override layer (site_build_protocol v1.6 §1). Source
   of truth for color, type, space, motion. The brand-agnostic
   layout + components read these variables. INDUSTRIAL primary palette (blue dropped — Ivan 2026-06-28, CC #9432). Type from
   the canonical Kainer DESIGN.md v3 (Industrial tier). CC #9416.
   ============================================================ */

@import url('./fonts.css');

:root {
  /* Colors — Kainer Editorial tier (DESIGN.md §2) ─────────── */
  --midnight-600:  #2d3037;   /* primary brand — hero, headlines, primary surfaces */
  --midnight-500:  #3a3d44;   /* hover / secondary navy fills */
  --midnight-800:  #0e0f12;   /* deepest dark surfaces */
  --midnight-200:  #d6d7da;   /* soft tint — callout fills */

  --gold-400:      #f5a50a;   /* primary warm accent — CTA buttons, badges */
  --gold-500:      #e5a500;
  --gold-700:      #e5a500;   /* deep gold for light surfaces, pressed states */

  --terracotta-500:#d16846;   /* 10-Jahre-Garantie badge, photo overlays — never the CTA */
  --forest-600:    #3d6550;   /* sparing nature accent (eco callouts) */

  /* Warm-beige neutrals */
  --neutral-50:    #fafaf9;   /* page background */
  --neutral-100:   #f5f4f2;   /* card surfaces on light pages */
  --neutral-200:   #e8e6e3;   /* borders, dividers */
  --neutral-600:   #5c5850;   /* body copy on light surfaces */
  --neutral-800:   #2b2a26;   /* headings on light surfaces */

  --white:         #ffffff;
  --success:       #16a34a;
  --error:         #b91c1c;

  /* Tints (alpha overlays) */
  --midnight-rgb:  45, 48, 55;
  --gold-rgb:      245, 165, 10;
  --white-rgb:     255, 255, 255;
  --black-rgb:     14, 15, 18;

  /* Gradients (DESIGN.md §2/§5) */
  --gradient-midnight: linear-gradient(135deg, #2d3037 0%, #1a1a1d 100%);
  --gradient-gold:     linear-gradient(135deg, #f5a50a 0%, #d16846 100%);
  --gradient-warm:     linear-gradient(135deg, #fafaf9 0%, #f5f5f4 100%);
  --hero-overlay:      linear-gradient(135deg, rgba(45,48,55,0.92) 0%, rgba(14,15,18,0.82) 100%);

  /* Semantic aliases (keep brand-agnostic components readable) */
  --color-bg:      var(--neutral-50);
  --color-surface: var(--neutral-100);
  --color-text:    var(--neutral-600);
  --color-heading: var(--neutral-800);
  --color-border:  var(--neutral-200);
  --color-accent:  var(--gold-400);
  --color-primary: var(--midnight-600);

  /* Type families — self-hosted (see fonts.css) */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'Outfit', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;

  /* Type scale — desktop (DESIGN.md §3) */
  --type-hero:        64px;
  --type-page:        48px;
  --type-section:     40px;
  --type-subsection:  32px;
  --type-body-l:      20px;
  --type-body:        18px;
  --type-body-s:      16px;
  --type-caption:     14px;
  --type-overline:    13px;

  /* Spacing — 8pt grid + named steps (DESIGN.md §4) */
  --space-3xs:   4px;
  --space-2xs:   8px;
  --space-xs:   12px;
  --space-sm:   16px;
  --space-ml:   20px;
  --space-md:   24px;
  --space-lg:   32px;
  --space-xl:   48px;
  --space-2xl:  64px;
  --space-3xl:  96px;
  --space-4xl: 128px;

  /* Container */
  --container-max: 1280px;
  --container-pad: var(--space-xl);

  /* Radii (DESIGN.md §4 — 8px web cards, 16px hero, 32px premium) */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* Shadows (DESIGN.md §4) */
  --shadow:      0 2px 4px rgba(0,0,0,0.06);
  --shadow-md:   0 8px 24px rgba(var(--black-rgb),0.10);
  --shadow-lg:   0 16px 48px rgba(var(--black-rgb),0.16);
  --shadow-header: 0 1px 8px rgba(0,0,0,0.04);

  /* Motion */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* Layering */
  --z-header: 50;
  --z-modal:  80;
}

/* Mobile type scale (DESIGN.md §3) ──────────────────────────── */
@media (max-width: 768px) {
  :root {
    --type-hero:       40px;
    --type-page:       36px;
    --type-section:    32px;
    --type-subsection: 28px;
    --type-body-l:     18px;
    --type-body:       16px;
    --container-pad:   var(--space-md);
  }
}

@media (max-width: 480px) {
  :root { --container-pad: var(--space-sm); }
}