/* ============================================================
   OBA Solar — Design Tokens
   ------------------------------------------------------------
   Per-brand override layer (site_build_protocol §1). Source of
   truth for color, type, space, motion. Brand-agnostic layout +
   components read these variables. Palette + font from the OBA
   brand (preserved from the live obasolar.de). CC #9280.
   ============================================================ */

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

:root {
  /* Colors — OBA brand ──────────────────────────────────── */
  --oba-blue:        #083457;   /* primary brand (headings, footer, button text) */
  --oba-blue-light:  #0A4569;
  --oba-yellow:      #F5B107;   /* accent / CTA */
  --oba-yellow-dark: #E5A106;   /* CTA hover */
  --off-white:       #FAFBFC;   /* page background, footer text */
  --warm-white:      #FEFDFB;   /* input backgrounds */
  --soft-black:      #1A1A1A;   /* primary body text */
  --charcoal:        #4A4A4A;   /* secondary text, labels */
  --light-blue:      #E8F1F7;   /* contact section background */
  --medium-blue:     #C5D9E6;   /* input borders */
  --light-gray:      #E8E8E8;
  --white:           #FFFFFF;

  /* Tints (for alpha overlays) */
  --oba-blue-rgb:    8, 52, 87;
  --oba-yellow-rgb:  245, 177, 7;
  --soft-black-rgb:  26, 26, 26;
  --white-rgb:       255, 255, 255;

  /* Semantic aliases (so brand-agnostic components stay readable) */
  --color-bg:        var(--off-white);
  --color-text:      var(--soft-black);
  --color-heading:   var(--oba-blue);
  --color-muted:     var(--charcoal);
  --color-accent:    var(--oba-yellow);
  --color-primary:   var(--oba-blue);

  /* Type family — Montserrat (self-hosted, see fonts.css) */
  --font-sans: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type scale — desktop */
  --type-display: 44px;
  --type-h1:      40px;
  --type-h2:      32px;
  --type-h3:      24px;
  --type-h4:      18px;
  --type-body-l:  18px;
  --type-body:    16px;
  --type-body-s:  14px;
  --type-caption: 13px;
  --type-overline:12px;
  --type-button:  16px;

  /* Spacing — 8px base */
  --space-3xs:   4px;
  --space-2xs:   8px;
  --space-xs:   12px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   32px;
  --space-xl:   48px;
  --space-2xl:  64px;
  --space-3xl:  96px;
  --space-4xl: 128px;

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

  /* Radii */
  --radius-sm:  8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow:    0 4px 24px rgba(var(--soft-black-rgb), 0.08);
  --shadow-lg: 0 10px 40px rgba(var(--soft-black-rgb), 0.12);
  --shadow-xl: 0 20px 60px rgba(var(--soft-black-rgb), 0.18);

  /* 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;
  --z-toast: 100;
}

/* Mobile type scale ─────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --type-display: 30px;
    --type-h1:      28px;
    --type-h2:      24px;
    --type-h3:      20px;
    --type-body-l:  16px;
    --container-pad: var(--space-md);
  }
}

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