/*
 * =============================================================================
 * SPEICHER 7 – DESIGN TOKENS
 * =============================================================================
 * Single source of truth für alle CSS Custom Properties.
 * Keine Selektoren, keine Regeln – nur Token-Definitionen.
 *
 * Farbsystem: Briefing "Corporate Identity – Speicher 7"
 *   Ryck-Blau       #1E3A5F  – Primärfarbe, Headlines, Nav
 *   Hafen-Weiß      #F8F7F4  – Seitenhintergrund
 *   Ryck-Blau Hell  #E8EFF6  – Helle Sections, Karten-BG
 *   Sand-Grau       #9DA8B0  – Muted-Text, Metainfos
 *   Anker-Grau      #3D4A52  – Body-Text
 *   Bernstein       #C8915A  – Akzent, CTAs, Hover
 *
 * Typografie:
 *   Headline: Playfair Display (serif) – lokal gehostet (DSGVO)
 *   Body:     Inter (sans-serif) – lokal gehostet (DSGVO)
 *   Fallback: Georgia / system-ui (während Font-Dateien fehlen)
 *
 * Breakpoints (in Mediaqueries verwenden):
 *   375px  – Smartphone S
 *   640px  – Smartphone L
 *   768px  – Tablet / Hamburger-Breakpoint
 *   1024px – Tablet L / Small Desktop
 *   1200px – Desktop (--max-width)
 * =============================================================================
 */

:root {

  /* ===================================================================
     FARB-TOKENS
  =================================================================== */

  --color-primary:        #1E3A5F;   /* Ryck-Blau – Hauptfarbe */
  --color-primary-dark:   #163050;   /* Ryck-Blau dunkel (Hover) */
  --color-primary-light:  #E8EFF6;   /* Ryck-Blau hell (Sections, Karten) */

  --color-bg:             #F8F7F4;   /* Hafen-Weiß – Seitenhintergrund */
  --color-white:          #FFFFFF;

  --color-text:           #3D4A52;   /* Anker-Grau – Body-Text */
  --color-text-muted:     #9DA8B0;   /* Sand-Grau – Sekundärtext */

  --color-accent:         #C8915A;   /* Bernstein – CTAs, Akzente */
  --color-accent-dark:    #b07d4a;   /* Bernstein dunkel (Hover) */

  --color-border:         #E8EFF6;   /* Trennlinien (kein Shadow-System) */
  --color-border-dark:    #CDD5DC;   /* Dunklere Trennlinie (z.B. im Footer) */


  /* ===================================================================
     TYPOGRAFIE-TOKENS
  =================================================================== */

  /* Schriftfamilien */
  --font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Schriftgrößen (rem-Basis: 16px Browser-Standard) */
  --text-xs:    0.8125rem;   /* 13px – Caption, Labels */
  --text-sm:    0.9375rem;   /* 15px – Buttons, Nav, Meta */
  --text-base:  1.0625rem;   /* 17px – Fließtext */
  --text-lg:    1.25rem;     /* 20px – Lead, Karten-Headline */
  --text-xl:    1.5rem;      /* 24px – H3 groß */
  --text-2xl:   2rem;        /* 32px – H2 klein */
  --text-3xl:   2.625rem;    /* 42px – H2 groß */
  --text-4xl:   3.5rem;      /* 56px – H1 desktop */
  --text-hero:  4.5rem;      /* 72px – H1 Hero max */

  /* Zeilenhöhen */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-body:     1.7;
  --leading-relaxed:  1.85;

  /* Letter-Spacing */
  --tracking-tight:   -0.02em;  /* Headlines */
  --tracking-wide:     0.06em;  /* Labels, Overlines */


  /* ===================================================================
     SPACING-TOKENS (4px-Basis)
  =================================================================== */

  --space-1:    0.25rem;   /*  4px */
  --space-2:    0.5rem;    /*  8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* Semantische Spacing-Aliase */
  --space-xs:   var(--space-2);    /*  8px */
  --space-sm:   var(--space-4);    /* 16px */
  --space-md:   var(--space-6);    /* 24px */
  --space-lg:   var(--space-10);   /* 40px */
  --space-xl:   var(--space-16);   /* 64px */
  --space-2xl:  var(--space-24);   /* 96px */
  --space-3xl:  var(--space-32);   /* 128px */


  /* ===================================================================
     LAYOUT-TOKENS
  =================================================================== */

  --max-width:      1200px;
  --gutter:         24px;
  --gutter-mobile:  16px;

  --nav-height:     72px;
  --nav-height-mobile: 64px;

  --radius-sm:   2px;
  --radius:      4px;    /* Standard (Briefing: 4px) */
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  --border-width: 1px;


  /* ===================================================================
     TRANSITIONS
  =================================================================== */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;


  /* ===================================================================
     Z-INDEX-SKALA
  =================================================================== */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-nav:    1000;
  --z-modal:  2000;
  --z-banner: 9999;

}