/* ==========================================================================
   Tai-Kien Aachen — Design Tokens
   ========================================================================== */
:root {
  /* Color — Schwarz/Gelb-Look der Tai-Kien-Marke */
  --color-bg:          #000000;
  --color-bg-soft:     #121212;
  --color-surface:     #1C1C1C;
  --color-border:      #3A3A3A;
  --color-text:        #F5F5F3;
  --color-text-muted:  #B5B5B0;
  --color-accent:      #D6B508;
  --color-accent-vivid: #E8C51A;
  --color-accent-dark: #A98F06;
  --color-accent-text: #000000;

  /* Header - dunkel wie die restliche Seite.
     Frueher war die Kopfleiste weiss. Auf einer durchgehend schwarzen Seite
     wirkte das wie ein Fremdkoerper und schnitt das Hero-Bild oben ab. */
  --color-header-bg:   rgba(12,12,12,0.72);
  --color-header-solid:#0C0C0C;
  --color-header-text: #F5F5F3;
  --color-header-muted:#B5B5B0;

  /* Type */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.1rem, 4.4vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 2.8vw, 2.2rem);
  --fs-h3: clamp(1.2rem, 1.9vw, 1.4rem);
  --fs-lead: clamp(1rem, 1.3vw, 1.15rem);
  --fs-body: 0.95rem;
  --fs-small: 0.85rem;

  --lh-tight: 1.15;
  --lh-normal: 1.6;

  /* Spacing scale */
  --space-1: 0.5rem;
  --space-2: 0.9rem;
  --space-3: 1.3rem;
  --space-4: 1.75rem;
  --space-5: 2.5rem;
  --space-6: 3.5rem;
  --space-7: 5rem;

  /* Layout */
  --max-width: 1180px;
  --max-width-text: 38ch;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 40px;
  --header-height: 72px;   /* max. 80px - eine Kopfleiste darf den Bildschirm nicht auffressen */

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: 160ms;
  --dur-med: 320ms;

  /* Shadow */
  --shadow-card: 0 12px 32px -12px rgba(0,0,0,0.55);
}