/* tokens.css — Design System Source of Truth for next4lead.de */
/* All hex values in this project live ONLY here. Component CSS uses var(--token-name) exclusively. */

:root {

  /* === Colors === */

  /* Backgrounds */
  --color-bg-dark:    #0E1420;
  --color-bg-light:   #FAF7F0;
  --color-nav-bg:     rgba(14, 20, 32, 0.82); /* nav header — semi-transparent per mockup */

  /* Text */
  --color-text-dark:  #1A2332;
  --color-text-light: #F5EFE4;

  /* Accent — Champagner-Gold */
  --color-gold:        #C9A55C;
  --color-gold-soft:   #B89148;
  --color-gold-bright: #E0BC7C;

  /* Muted text */
  --color-muted-light: #5C6776;
  --color-muted-dark:  #A8AEBB;

  /* Borders / dividers */
  --color-border-light: #E5DDD0;
  --color-border-dark:  #232A38;

  /* Card backgrounds */
  --color-card-dark:  #161D2B;
  --color-card-light: #FFFFFF;

  /* === Typography === */
  --font-serif: 'Spectral', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* === Layout === */
  --max-width:               1080px;
  --space-container-mobile:  24px;

  /* === Spacing (semantic — per D-12) === */
  --space-section-v-desktop:  80px;
  --space-section-v-mobile:   60px;
  --space-block-gap:          64px;
  --space-card-padding:       26px;

  /* === Border Radius (per D-14) === */
  --radius-card: 6px;
  --radius-btn:  4px;

  /* === Shadows (subtle lift) === */
  --shadow-card:       0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.14);
  --shadow-nav:        0 2px 12px rgba(0, 0, 0, 0.25);

  /* === Transitions (per D-13) === */
  --duration-fast:   150ms;
  --duration-fade:   250ms;
  --easing-default:  ease;

}