/* ==========================================================================
   tokens.css — Design-Tokens
   1:1 aus 02-Designsystem.md Abschnitt 11. Einzige Quelle der Wahrheit
   fuer Farben, Typografie, Abstaende, Radien, Schatten.
   ========================================================================== */

:root {
  /* --- Marke --- */
  --color-primary:            #15233B;
  --color-primary-dark:       #0E1828;
  --color-primary-light:      #2C415F;
  --color-accent:             #A6772E;
  --color-accent-dark:        #855E22;
  --color-accent-light:       #E8DCC6;

  /* --- Neutral --- */
  --color-bg:                 #FAF8F4;
  --color-bg-card:            #FFFFFF;
  --color-bg-alt:             #F0EDE6;
  --color-border:             #E2DDD3;
  --color-border-strong:      #C4BDB0;
  --color-text:               #1F2733;
  --color-text-muted:         #5A6473;
  --color-text-on-dark:       #F3F1EB;
  --color-text-on-dark-muted: #A9B3C2;

  /* --- Status --- */
  --color-success:    #2E6B4F;  --color-success-bg: #E6F0EA;
  --color-success-tx: #1F4733;
  --color-warning:    #B07A1E;  --color-warning-bg: #FBF1DD;
  --color-warning-tx: #5A4410;
  --color-error:      #B23A32;  --color-error-bg:   #F8E5E3;
  --color-error-tx:   #7A2620;
  --color-info:       #2C415F;  --color-info-bg:    #EAEEF3;

  /* --- Typografie --- */
  --font-display: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  Helvetica, Arial, sans-serif;

  /* Schriftgroessen — Desktop (Basis 16px). Mobil via Media Query in base.css */
  --fs-display:  3.5rem;     /* 56px */
  --fs-h1:       2.75rem;    /* 44px */
  --fs-h2:       2rem;       /* 32px */
  --fs-h3:       1.5rem;     /* 24px */
  --fs-h4:       1.25rem;    /* 20px */
  --fs-h5:       1.0625rem;  /* 17px */
  --fs-h6:       0.8125rem;  /* 13px */
  --fs-body-lg:  1.1875rem;  /* 19px */
  --fs-body:     1.0625rem;  /* 17px */
  --fs-body-sm:  0.9375rem;  /* 15px */
  --fs-caption:  0.8125rem;  /* 13px */
  --fs-button:   1rem;       /* 16px */

  --lh-display: 1.12;
  --lh-h1:      1.18;
  --lh-h2:      1.25;
  --lh-h3:      1.3;
  --lh-h4:      1.35;
  --lh-h5:      1.4;
  --lh-body:    1.7;
  --lh-body-lg: 1.65;

  /* --- Radien --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* --- Schatten --- */
  --shadow-sm:     0 1px 2px rgba(21,35,59,0.06);
  --shadow-md:     0 6px 20px rgba(21,35,59,0.10);
  --shadow-lg:     0 18px 48px rgba(14,24,40,0.18);
  --shadow-header: 0 2px 12px rgba(21,35,59,0.08);

  /* --- Abstaende (8px-Basisraster) --- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  /* Sektionsabstand — Desktop; mobil/tablet via Media Query */
  --section-pad: var(--space-3xl);

  /* --- Layout --- */
  --container-wide:    1280px;
  --container-content: 1080px;
  --container-text:    680px;
  --gutter:            48px;   /* Desktop; mobil/tablet via Media Query */

  /* --- Bewegung --- */
  --transition: 180ms ease;

  /* --- Header --- */
  --header-h:         84px;
  --header-h-sticky:  64px;
}

/* Tablet */
@media (max-width: 959px) {
  :root {
    --section-pad: var(--space-2xl);
    --gutter: 32px;
  }
}

/* Mobil */
@media (max-width: 599px) {
  :root {
    --section-pad: var(--space-xl);
    --gutter: 20px;
    --header-h: 64px;
    --header-h-sticky: 64px;

    --fs-display:  2.125rem;   /* 34px */
    --fs-h1:       1.875rem;   /* 30px */
    --fs-h2:       1.5rem;     /* 24px */
    --fs-h3:       1.25rem;    /* 20px */
    --fs-h4:       1.125rem;   /* 18px */
    --fs-h5:       1rem;       /* 16px */
    --fs-body-lg:  1.0625rem;  /* 17px */
    --fs-body:     1rem;       /* 16px */
  }
}