/* ==========================================================================
   SHANOVA — Design-Tokens
   Alle Werte sind aus dem verbindlichen Shanova-Logo abgeleitet.
   Gemessene Ist-Farben des Logos:
     Wortmarke   #C9B288   Glanzkante  #F1E2C1 / #E8D8B6
     Claim       #AFA48E   Silber      #8E8D88 … #FFFFFF
     Grund       #13161B … #1F262E (Vignette zur Mitte heller)
   Diese Datei enthaelt ausschliesslich Variablen. Keine Selektoren mit
   Eigenschaften ausser :root.
   ========================================================================== */

:root {
  /* ---------- Dunkelstufen (Basis, ca. 70 % der Flaeche) ---------- */
  --sh-bg-900: #0F151B;   /* Footer, Overlays, tiefste Ebene */
  --sh-bg-800: #151C23;   /* Seitenhintergrund dunkel */
  --sh-bg-700: #1B232B;   /* Karten, Flaechen */
  --sh-bg-600: #232C35;   /* erhoehte Flaechen, Hover-Untergrund */
  --sh-bg-500: #2A343E;   /* Eingabefelder im Fokus, Tabellenzebra */
  --sh-line:   #2C3640;   /* Rahmen, Trennlinien auf Dunkel */
  --sh-line-2: #3A4651;   /* staerkere Trennlinie */

  /* ---------- Gold / Champagner (Akzent, max. 5 % der Flaeche) ---------- */
  --sh-gold-200: #F1E2C1; /* Glanzlicht wie im Emblem */
  --sh-gold-300: #E3D0AA; /* Kantenlicht, Focus-Ring, Hover-Text */
  --sh-gold-400: #D6BE93; /* Hover Buttons, helle Akzente */
  --sh-gold-500: #C9B288; /* PRIMAERAKZENT — Ist-Farbe der Wortmarke */
  --sh-gold-600: #AE9769; /* Active / Pressed */
  /* gold-700 ist auf Papier AA-fest (5.09:1), gold-800 fuer Hover darunter.
     Die hellen Goldstufen tragen als Text auf hellem Grund nicht. */
  --sh-gold-700: #7A6644; /* Gold als Text auf hellem Grund */
  --sh-gold-800: #5F5135; /* Hover und Linien auf hellem Grund */

  /* ---------- Silber (sekundaer) ---------- */
  --sh-silver-200: #D4D9DE;
  --sh-silver-300: #B8BEC4;
  --sh-silver-400: #949CA3;

  /* ---------- Text auf dunklem Grund ---------- */
  --sh-text:   #F2F4F5;
  --sh-text-2: #AEB6BD;
  --sh-text-3: #7C858C;

  /* ---------- Helle Flaechen ---------- */
  --sh-paper:      #F5F6F7;
  --sh-paper-alt:  #ECEEF0;
  --sh-line-light: #DADDE0;
  --sh-text-dark:   #131A21;
  --sh-text-dark-2: #4A545D;
  --sh-text-dark-3: #6B757E;

  /* ---------- Status (entsaettigt, damit sie neben Gold nicht schreien) -- */
  --sh-success: #3F9B72;
  --sh-warning: #D08A3C;
  --sh-error:   #C5533F;
  --sh-info:    #5B8CB8;

  /* ---------- Transparente Ableitungen ---------- */
  --sh-gold-a12: rgba(201, 178, 136, .12);
  --sh-gold-a18: rgba(201, 178, 136, .18);
  --sh-gold-a35: rgba(201, 178, 136, .35);
  --sh-gold-a45: rgba(201, 178, 136, .45);
  --sh-silver-a28: rgba(184, 190, 196, .28);
  --sh-silver-a10: rgba(184, 190, 196, .10);

  /* ---------- Typografie ---------- */
  --sh-font-head: "Space Grotesk", "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sh-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sh-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  /* Nur fuer das Wortmarken-Aequivalent, nie fuer Fliesstext. */
  --sh-font-mark: "Cinzel", "Lora", Georgia, "Times New Roman", serif;

  --sh-fs-display: clamp(2.75rem, 6vw, 4.5rem);
  --sh-fs-h1:      clamp(2.25rem, 4.5vw, 3.25rem);
  --sh-fs-h2:      clamp(1.75rem, 3vw, 2.25rem);
  --sh-fs-h3:      1.375rem;
  --sh-fs-h4:      1.125rem;
  --sh-fs-body-l:  1.125rem;
  --sh-fs-body:    1rem;
  --sh-fs-small:   0.875rem;
  --sh-fs-xs:      0.8125rem;
  --sh-fs-eyebrow: 0.75rem;

  --sh-lh-tight: 1.05;
  --sh-lh-head:  1.2;
  --sh-lh-body:  1.65;

  --sh-ls-display: -0.03em;
  --sh-ls-h1:      -0.02em;
  --sh-ls-h2:      -0.015em;
  --sh-ls-eyebrow:  0.16em;

  --sh-measure: 68ch;

  /* ---------- Abstaende (Basis 4px) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;

  --sh-container: 1280px;
  --sh-gutter: 32px;
  --sh-section-y: 96px;

  /* ---------- Radien (bewusst klein — das Logo hat keine weichen Ecken) -- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* ---------- Schatten: Rahmen statt Tiefe, Licht statt Schlagschatten --- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-3: 0 20px 48px rgba(0, 0, 0, .45);
  --edge-gold: inset 0 1px 0 rgba(227, 208, 170, .14);
  --glow-gold: 0 0 0 1px rgba(201, 178, 136, .35), 0 6px 20px rgba(201, 178, 136, .08);

  /* ---------- Bewegung ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 160ms;
  --dur-slow: 200ms;

  /* ---------- Hexagon-Maske: direktester Logo-Bezug im System ---------- */
  --clip-hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

  --sh-header-h: 76px;
  --sh-header-h-sticky: 60px;
}

/* Sektionsabstand und Gutter skalieren mit dem Viewport. */
@media (max-width: 1023px) {
  :root { --sh-section-y: 64px; --sh-gutter: 24px; }
}
@media (max-width: 767px) {
  :root { --sh-section-y: 48px; --sh-gutter: 20px; --sh-ls-eyebrow: 0.12em; }
}