/* ==========================================================================
   H&S Automobile — Design-Tokens
   Drei-Ebenen-Architektur:  Primitive  →  Semantic  →  Component
   Regel: Komponenten benutzen NIE rohe Hex-Werte, immer nur var(--…).

   Gestaltung: monochrom und ruhig. Fast-Schwarz, Weiss und eine feine
   Grauskala tragen die Seite; das Markenrot bleibt bewusst sparsam und
   markiert nur die wichtigste Handlung. Fotos sollen wirken, nicht Farbe.
   ========================================================================== */

/* ==========================================================================
   EBENE 1 — PRIMITIVE
   Rohwerte ohne Bedeutung. Ändern sich praktisch nie.
   ========================================================================== */
:root {
  /* --- Marke: Rot (sparsam eingesetzt) -------------------------------- */
  --red-900: #660000;
  --red-800: #850000;
  --red-700: #A20000;   /* Markenrot aus dem Logo */
  --red-600: #BE1111;
  --red-500: #D62222;
  --red-400: #E84A4A;
  --red-300: #F08585;

  /* --- Neutral: Fast-Schwarz → Weiss ---------------------------------- */
  --ink-1000: #000000;
  --ink-950:  #0B0B0B;
  --ink-900:  #111111;   /* Grundton der Seite im Dunkelmodus */
  --ink-850:  #171717;
  --ink-800:  #1D1D1D;
  --ink-700:  #2B2B2B;
  --ink-600:  #3A3A3A;
  --ink-500:  #565656;
  --ink-450:  #63666A;
  --ink-400:  #7A7A7A;
  --ink-300:  #969696;
  --ink-250:  #B4B4B4;
  --ink-200:  #C6C6C6;
  --ink-150:  #DBDBDB;
  --ink-100:  #EAEAEA;
  --ink-50:   #F9F9F9;
  --ink-0:    #FFFFFF;

  /* --- Statusfarben (nur für Rückmeldungen) --------------------------- */
  --green-600: #2E7D32;
  --green-500: #348438;
  --green-400: #4CAF50;
  --amber-600: #8A6508;
  --amber-500: #B8860B;
  --amber-400: #D9A106;
  --blue-500:  #2563EB;
  --blue-400:  #3B82F6;

  /* --- Abstände (4px-Basis, oben herum grosszügiger) ------------------ */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* --- Schrift --------------------------------------------------------
     Montserrat für Überschriften, Navigation und Knöpfe; Inter für den
     Fliesstext. Die Skala ist bewusst zurückhaltender als üblich: grosse
     Sprünge wirken laut, gleichmässige Abstufungen wirken ruhig. */
  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  --text-2xs: 0.6875rem;                              /* 11px */
  --text-xs:  0.75rem;                                /* 12px */
  --text-sm:  0.8125rem;                              /* 13px */
  --text-base: 0.9375rem;                             /* 15px */
  --text-md:  1.0625rem;                              /* 17px */
  --text-lg:  1.1875rem;                              /* 19px — Fliesstext */
  --text-xl:  clamp(1.25rem, 0.4vw + 1.15rem, 1.4375rem);
  --text-2xl: clamp(1.5rem, 0.9vw + 1.3rem, 1.875rem);
  --text-3xl: clamp(1.75rem, 1.6vw + 1.4rem, 2.5rem);
  --text-4xl: clamp(2.125rem, 2.8vw + 1.5rem, 3.25rem);
  --text-5xl: clamp(2.5rem, 4.4vw + 1.4rem, 4.25rem);
  --text-6xl: clamp(2.75rem, 6.4vw + 1.2rem, 5.5rem);

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.06;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.022em;
  --tracking-tight:   -0.012em;
  --tracking-normal:  -0.005em;
  --tracking-wide:    0.06em;
  --tracking-widest:  0.14em;

  /* --- Radien: fast eckig. Runde Ecken wirken verspielt, nicht edel. -- */
  --radius-none: 0;
  --radius-xs:   1px;
  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-lg:   4px;
  --radius-xl:   6px;
  --radius-2xl:  8px;
  --radius-full: 999px;

  /* --- Schatten: sehr zurückhaltend ----------------------------------- */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-sm: 0 2px 10px rgb(0 0 0 / 0.06);
  --shadow-md: 0 10px 30px -12px rgb(0 0 0 / 0.14);
  --shadow-lg: 0 24px 60px -24px rgb(0 0 0 / 0.20);
  --shadow-xl: 0 40px 90px -30px rgb(0 0 0 / 0.26);
  --shadow-glow-brand: none;

  /* --- Bewegung ------------------------------------------------------- */
  --duration-instant: 80ms;
  --duration-fast:    160ms;
  --duration-normal:  280ms;
  --duration-slow:    520ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Ebenen --------------------------------------------------------- */
  --z-base:    0;
  --z-sticky:  100;
  --z-header:  200;
  --z-drawer:  300;
  --z-overlay: 400;
  --z-toast:   500;

  /* --- Layout --------------------------------------------------------- */
  --container-sm: 44rem;
  --container-md: 62rem;
  --container-lg: 78rem;
  --container-xl: 90rem;
  --header-height: 5rem;
  --opacity-disabled: 0.4;
  --ring-width: 2px;
  --ring-offset: 2px;
}

/* ==========================================================================
   EBENE 2 — SEMANTIC
   Standard ist HELL. Dunkel bekommt, wer es im System eingestellt hat oder
   oben umschaltet; die Wahl merkt sich der Browser als data-theme.
   ========================================================================== */
:root {
  color-scheme: light;

  /* Flächen */
  --surface-canvas:  var(--ink-0);
  --surface-raised:  var(--ink-0);
  --surface-overlay: var(--ink-0);
  --surface-sunken:  var(--ink-50);
  --surface-inverse: var(--ink-900);
  --surface-hover:   var(--ink-100);
  --surface-active:  var(--ink-150);

  /* Text */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-450);      /* 5,9:1 auf Weiss */
  --text-inverse:   var(--ink-0);
  --text-on-brand:  var(--ink-0);

  /* Linien — dünn und leise */
  --border-subtle:  rgb(17 17 17 / 0.10);
  --border-default: rgb(17 17 17 / 0.16);
  --border-strong:  rgb(17 17 17 / 0.32);

  /* Marke: Rot bleibt für die eine wichtige Handlung reserviert. */
  --brand:        var(--red-700);
  --brand-hover:  var(--red-800);
  --brand-active: var(--red-900);
  --brand-subtle: rgb(162 0 0 / 0.06);
  --brand-border: rgb(162 0 0 / 0.24);
  --brand-text:   var(--red-700);

  /* Handlungsfarbe für Knöpfe: monochrom, nicht rot.
     Das hält die Seite ruhig — Rot markiert nur den Hauptweg. */
  --action:        var(--ink-900);
  --action-hover:  var(--ink-700);
  --action-active: var(--ink-1000);
  --action-fg:     var(--ink-0);

  /* Beschriftungen über Überschriften (Montserrat, gesperrt, versal).
     ink-400 wäre mit 4,3:1 knapp unter der Mindestanforderung — ink-450
     erreicht 5,9:1 und wirkt trotzdem zurückhaltend. */
  --eyebrow-color: var(--ink-450);

  /* Status */
  --success:        var(--green-600);
  --success-subtle: rgb(46 125 50 / 0.09);
  --success-text:   var(--green-600);
  --warning:        var(--amber-500);
  --warning-subtle: rgb(184 134 11 / 0.10);
  --warning-text:   var(--amber-600);
  --danger:         var(--red-700);
  --danger-subtle:  rgb(162 0 0 / 0.08);
  --danger-text:    var(--red-800);
  --info:           var(--blue-500);
  --info-subtle:    rgb(37 99 235 / 0.09);
  --info-text:      var(--blue-500);

  --focus-ring: var(--ink-900);

  /* Abstände mit Bedeutung — mehr Luft als vorher */
  --gap-inline:  var(--space-2);
  --gap-stack:   var(--space-5);
  --gap-grid:    var(--space-6);
  --pad-block:   clamp(var(--space-16), 9vw, var(--space-32));
  --pad-inline:  clamp(var(--space-5), 5vw, var(--space-12));

  --scrim: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.6) 55%, rgb(255 255 255 / 0.95) 100%);
}

/* --- Dunkel: Systemvorgabe --------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --surface-canvas:  var(--ink-900);
    --surface-raised:  var(--ink-850);
    --surface-overlay: var(--ink-800);
    --surface-sunken:  var(--ink-950);
    --surface-inverse: var(--ink-0);
    --surface-hover:   var(--ink-700);
    --surface-active:  var(--ink-600);

    --text-primary:   var(--ink-0);
    --text-secondary: var(--ink-200);
    --text-muted:     var(--ink-300);
    --text-inverse:   var(--ink-900);
    --text-on-brand:  var(--ink-0);

    --border-subtle:  rgb(255 255 255 / 0.10);
    --border-default: rgb(255 255 255 / 0.17);
    --border-strong:  rgb(255 255 255 / 0.34);

    --brand:        var(--red-700);
    --brand-hover:  var(--red-600);
    --brand-active: var(--red-800);
    --brand-subtle: rgb(162 0 0 / 0.16);
    --brand-border: rgb(162 0 0 / 0.40);
    --brand-text:   var(--red-400);

    --action:        var(--ink-0);
    --action-hover:  var(--ink-100);
    --action-active: var(--ink-200);
    --action-fg:     var(--ink-900);

    --eyebrow-color: var(--ink-300);

    --success-text: var(--green-400);
    --warning-text: var(--amber-400);
    --danger-text:  var(--red-400);
    --info-text:    var(--blue-400);

    --focus-ring: var(--ink-0);

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-sm: 0 2px 10px rgb(0 0 0 / 0.45);
    --shadow-md: 0 10px 30px -12px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 24px 60px -24px rgb(0 0 0 / 0.7);
    --shadow-xl: 0 40px 90px -30px rgb(0 0 0 / 0.75);

    --scrim: linear-gradient(180deg, rgb(11 11 11 / 0) 0%, rgb(11 11 11 / 0.55) 55%, rgb(11 11 11 / 0.95) 100%);

    --nav-bg:          rgb(17 17 17 / 0.86);
    --nav-bg-scrolled: rgb(11 11 11 / 0.97);
    --logo-filter:     brightness(0) invert(1);
  }
}

/* --- Dunkel: bewusst umgeschaltet -------------------------------------- */
:root[data-theme='dark'] {
  color-scheme: dark;

  --surface-canvas:  var(--ink-900);
  --surface-raised:  var(--ink-850);
  --surface-overlay: var(--ink-800);
  --surface-sunken:  var(--ink-950);
  --surface-inverse: var(--ink-0);
  --surface-hover:   var(--ink-700);
  --surface-active:  var(--ink-600);

  --text-primary:   var(--ink-0);
  --text-secondary: var(--ink-200);
  --text-muted:     var(--ink-300);
  --text-inverse:   var(--ink-900);
  --text-on-brand:  var(--ink-0);

  --border-subtle:  rgb(255 255 255 / 0.10);
  --border-default: rgb(255 255 255 / 0.17);
  --border-strong:  rgb(255 255 255 / 0.34);

  --brand:        var(--red-700);
  --brand-hover:  var(--red-600);
  --brand-active: var(--red-800);
  --brand-subtle: rgb(162 0 0 / 0.16);
  --brand-border: rgb(162 0 0 / 0.40);
  --brand-text:   var(--red-400);

  --action:        var(--ink-0);
  --action-hover:  var(--ink-100);
  --action-active: var(--ink-200);
  --action-fg:     var(--ink-900);

  --eyebrow-color: var(--ink-300);

  --success-text: var(--green-400);
  --warning-text: var(--amber-400);
  --danger-text:  var(--red-400);
  --info-text:    var(--blue-400);

  --focus-ring: var(--ink-0);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 2px 10px rgb(0 0 0 / 0.45);
  --shadow-md: 0 10px 30px -12px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 24px 60px -24px rgb(0 0 0 / 0.7);
  --shadow-xl: 0 40px 90px -30px rgb(0 0 0 / 0.75);

  --scrim: linear-gradient(180deg, rgb(11 11 11 / 0) 0%, rgb(11 11 11 / 0.55) 55%, rgb(11 11 11 / 0.95) 100%);

  --nav-bg:          rgb(17 17 17 / 0.86);
  --nav-bg-scrolled: rgb(11 11 11 / 0.97);
  --logo-filter:     brightness(0) invert(1);
}

/* ==========================================================================
   EBENE 3 — COMPONENT
   ========================================================================== */
:root {
  /* --- Button: eckig, gesperrt, monochrom ----------------------------- */
  --btn-height-sm: 2.5rem;
  --btn-height-md: 3.125rem;
  --btn-height-lg: 3.625rem;
  --btn-pad-x-sm:  var(--space-4);
  --btn-pad-x-md:  var(--space-8);
  --btn-pad-x-lg:  var(--space-10);
  --btn-radius:    var(--radius-sm);
  --btn-font:      var(--font-display);
  --btn-weight:    var(--weight-semibold);
  --btn-tracking:  var(--tracking-wide);

  --btn-primary-bg:        var(--action);
  --btn-primary-bg-hover:  var(--action-hover);
  --btn-primary-bg-active: var(--action-active);
  --btn-primary-fg:        var(--action-fg);
  --btn-primary-shadow:    none;

  --btn-secondary-bg:       transparent;
  --btn-secondary-bg-hover: var(--surface-hover);
  --btn-secondary-fg:       var(--text-primary);
  --btn-secondary-border:   var(--border-default);

  --btn-ghost-fg:       var(--text-secondary);
  --btn-ghost-fg-hover: var(--text-primary);
  --btn-ghost-bg-hover: transparent;

  --btn-outline-border:       var(--border-strong);
  --btn-outline-border-hover: var(--text-primary);
  --btn-outline-fg:           var(--text-primary);

  /* --- Karte: randlos, das Bild trägt --------------------------------- */
  --card-bg:            transparent;
  --card-bg-hover:      transparent;
  --card-border:        transparent;
  --card-border-hover:  transparent;
  --card-radius:        var(--radius-md);
  --card-pad:           var(--space-5) 0 0;
  --card-gap:           var(--space-2);
  --card-shadow:        none;
  --card-shadow-hover:  none;
  --card-media-ratio:   4 / 3;

  /* --- Eingabefelder --------------------------------------------------- */
  --input-height:        var(--btn-height-md);
  --input-bg:            transparent;
  --input-bg-hover:      transparent;
  --input-fg:            var(--text-primary);
  --input-placeholder:   var(--text-muted);
  --input-border:        var(--border-default);
  --input-border-hover:  var(--border-strong);
  --input-border-focus:  var(--text-primary);
  --input-border-error:  var(--danger);
  --input-radius:        var(--radius-sm);
  --input-pad-x:         var(--space-4);
  --input-label-color:   var(--text-muted);
  --input-label-size:    var(--text-xs);

  /* --- Chip / Badge ---------------------------------------------------- */
  --chip-bg:        transparent;
  --chip-fg:        var(--text-secondary);
  --chip-border:    var(--border-default);
  --chip-radius:    var(--radius-full);
  --chip-pad:       var(--space-2) var(--space-4);
  --chip-font-size: var(--text-xs);

  --badge-radius:    var(--radius-xs);
  --badge-pad:       0.28rem var(--space-3);
  --badge-font-size: var(--text-2xs);
  --badge-tracking:  var(--tracking-widest);

  /* --- Header ---------------------------------------------------------- */
  --nav-bg:          rgb(255 255 255 / 0.86);
  --nav-bg-scrolled: rgb(255 255 255 / 0.97);
  --nav-border:      var(--border-subtle);
  --logo-filter:     brightness(1) invert(0);
  --nav-fg:          var(--text-primary);
  --nav-fg-hover:    var(--text-primary);
  --nav-fg-active:   var(--text-primary);
  --nav-indicator:   var(--brand);
  --nav-blur:        16px;

  /* --- Hero ------------------------------------------------------------ */
  --hero-min-height:      min(94svh, 56rem);
  --hero-min-height-sm:   82svh;
  --hero-overlay:         linear-gradient(180deg, rgb(0 0 0 / 0.42) 0%, rgb(0 0 0 / 0.30) 45%, rgb(0 0 0 / 0.82) 100%);
  --hero-kicker-color:    rgb(255 255 255 / 0.72);
  --hero-title-size:      var(--text-6xl);
  --hero-title-weight:    var(--weight-semibold);
  --hero-title-tracking:  var(--tracking-tighter);

  /* --- Tabelle ---------------------------------------------------------- */
  --table-header-bg:  transparent;
  --table-row-border: var(--border-subtle);
  --table-row-hover:  var(--surface-sunken);
  --table-pad-x:      var(--space-3);
  --table-pad-y:      var(--space-4);

  /* --- Abschnitt --------------------------------------------------------- */
  --section-pad-block: var(--pad-block);
  --section-gap:       var(--space-12);
}

/* ==========================================================================
   Bewegung respektieren
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --border-subtle:  rgb(17 17 17 / 0.28);
    --border-default: rgb(17 17 17 / 0.42);
    --text-secondary: var(--ink-700);
    --text-muted:     var(--ink-600);
  }
  :root[data-theme='dark'] {
    --border-subtle:  rgb(255 255 255 / 0.26);
    --border-default: rgb(255 255 255 / 0.40);
    --text-secondary: var(--ink-100);
    --text-muted:     var(--ink-200);
  }
}