/**
 * @file
 * Design Tokens für satrent.de
 * Maritimes Theme: Navy, Coral, Light Blue.
 */

:root {
  /* === Farben: Markenpalette === */
  --color-navy-deepest: #021A33;
  --color-navy-dark:    #042C53;
  --color-navy:         #0C447C;
  --color-navy-mid:     #185FA5;
  --color-navy-light:   #85B7EB;
  --color-navy-pale:    #B5D4F4;
  --color-navy-tint:    #E6F1FB;

  --color-coral:        #F0997B;
  --color-coral-dark:   #4A1B0C;

  --color-error:        #A32D2D;
  --color-success:      #185FA5;

  /* === Farben: semantisch === */
  --color-bg-primary:   #FFFFFF;
  --color-bg-secondary: #F8FAFC;
  --color-bg-dark:      var(--color-navy-dark);

  --color-text-primary:    #1A1A1A;
  --color-text-secondary:  #5B6B7E;
  --color-text-on-dark:    #FFFFFF;
  --color-text-on-dark-dim: var(--color-navy-pale);

  --color-border-subtle: #E5EAF0;
  --color-border-strong: #C5D0DD;

  /* === Typografie === */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
                      'Helvetica Neue', Helvetica, Arial, sans-serif;

  --font-size-h1:      1.625rem; /* 26px */
  --font-size-h2:      1.25rem;  /* 20px */
  --font-size-body:    0.8125rem; /* 13px */
  --font-size-caption: 0.6875rem; /* 11px */

  --font-weight-regular: 400;
  --font-weight-medium:  500;

  --line-height-tight:   1.25;
  --line-height-base:    1.65;

  --letter-spacing-overline: 0.094em; /* 1.5px bei 16px Basis */
  --letter-spacing-uppercase: 0.05em;

  /* === Spacing === */
  --space-xs:  0.25rem;  /* 4px */
  --space-sm:  0.5rem;   /* 8px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2.25rem;  /* 36px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4.5rem;   /* 72px */

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

  /* === Layout === */
  --container-max: 1200px;
  --container-padding: var(--space-lg);
  --section-padding-y: var(--space-2xl);

  /* === Borders === */
  --border-thin:    0.5px solid var(--color-border-subtle);
  --border-regular: 1px solid var(--color-border-subtle);

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(4, 44, 83, 0.04);
  --shadow-md: 0 2px 8px rgba(4, 44, 83, 0.08);

  /* === Transitions === */
  --transition-fast:   150ms ease-out;
  --transition-base:   250ms ease-out;
}