/* ===== Font Faces ===== */

/* Roboto Regular (Body) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-v51-latin-regular.woff2') format('woff2');
}

/* Roboto SemiBold (Body - Emphasis) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/roboto-v51-latin-600.woff2') format('woff2');
}

:root {
  /* ===== Hauptfarben (Ford Yachttransport) ===== */
  /* Primärfarben: Grün (aus Original-Website übernommen) */
  --color-primary: #1c584c;           /* Original Dunkelgrün */
  --color-primary-light: #83a19b;     /* Original Mittelgrün */
  --color-primary-dark: #134238;      /* Noch dunkleres Grün für mehr Kontrast */
  --color-primary-rgb: 28, 88, 76;    /* RGB für rgba() */

  /* Sekundärfarben: Rot (aus Original-Website übernommen) */
  --color-secondary: #861a22;         /* Original Rot - Akzentfarbe */
  --color-secondary-light: #a82530;   /* Helleres Rot für Hover-States */
  --color-secondary-dark: #5e1218;    /* Dunkleres Rot für Pressed-States */
  --color-secondary-rgb: 134, 26, 34; /* RGB für rgba() */

  /* Tertiärfarben: Grau-Grün-Töne für Varianz */
  --color-tertiary: #8c979d;          /* Original Grau aus alter Seite */
  --color-tertiary-light: #d9e1e7;    /* Original Hellgrün/Grau - perfekt für helle Texte */
  --color-tertiary-dark: #5a6670;     /* Dunkleres Grau */

  /* ===== Textfarben ===== */
  /* Text auf HELLEN Hintergründen */
  --color-text-dark: #1a1a1a;         /* Haupttext auf hellen Hintergründen (16.1:1) */
  --color-text-medium: #333333;       /* Sekundärer Text auf hellen Hintergründen (12.6:1) */
  --color-text-muted: #666666;        /* Gedämpfter Text (z.B. Platzhalter, Labels) (5.74:1) */
  --color-text-muted-light: #6b777d;  /* Noch gedämpfter (6.1:1) - ⚠️ NUR für HELLE Hintergründe! */

  /* Text auf DUNKLEN Hintergründen (#1c584c Dunkelgrün) */
  --color-text-light: #ffffff;        /* Haupttext auf dunklen Hintergründen (8.35:1 ✅ AAA) */
  --color-text-light-muted: #d9e1e7;  /* Gedämpft auf dunklen Hintergründen (7.12:1 ✅ AAA) */
  --color-text-light-soft: #a8c5bf;   /* Sehr gedämpft auf dunklen Hintergründen (4.7:1 ⚠️ AA) */

  /* ===== Hintergründe ===== */
  /* Dunkle Hintergründe (Primary Green) */
  --color-bg-dark-primary: #1c584c;   /* Dunkelgrün - Haupthintergrund für Hero, Header */
  --color-bg-dark-elevated: #134238;  /* Noch dunkler - für Cards/Elevated Content */
  --color-bg-dark-soft: #1f6154;      /* Etwas heller - für Hover-States */

  /* Helle Hintergründe */
  --color-bg-light-primary: #ffffff;  /* Reine weiße Flächen */
  --color-bg-light-secondary: #f8f9fa;/* Leicht graue Flächen */
  --color-bg-light-tertiary: #BCCDDB; /* Original Body-Background Hellblau-Grau */
  --color-bg-light-soft: #d9e1e7;     /* Original Hellgrün/Grau - für subtile Sections */

  /* Mittlere Hintergründe (für Varianz) */
  --color-bg-medium: #83a19b;         /* Mittelgrün - für Content-Sections */
  --color-bg-medium-light: #a4bfb9;   /* Helleres Mittelgrün */

  /* Legacy-Variablen für Kompatibilität */
  --color-bg-primary: #1c584c;
  --color-bg-elevated: #134238;
  --color-bg-elevated-2: #1f6154;
  --color-bg-elevated-3: #226459;
  --color-bg-light: #ffffff;
  --color-bg-dark: #1c584c;
  --color-bg-dark-elevated: #134238;
  --color-bg-alt: #f8f9fa;
  --color-bg-alt-dark: #BCCDDB;

  /* ===== Statusfarben ===== */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ===== Borders ===== */
  /* Borders auf dunklen Hintergründen */
  --color-border-dark-subtle: rgba(217, 225, 231, 0.1);   /* Sehr subtil */
  --color-border-dark-light: rgba(217, 225, 231, 0.15);   /* Leicht sichtbar */
  --color-border-dark-medium: rgba(217, 225, 231, 0.25);  /* Medium */
  --color-border-dark-strong: #83a19b;                     /* Starker Border (Mittelgrün) */

  /* Borders auf hellen Hintergründen */
  --color-border-light-subtle: rgba(28, 88, 76, 0.08);    /* Sehr subtil */
  --color-border-light-medium: rgba(28, 88, 76, 0.15);    /* Medium */
  --color-border-light-strong: #1c584c;                    /* Starker Border (Dunkelgrün) */

  /* Legacy */
  --color-border-subtle: rgba(217, 225, 231, 0.1);
  --color-border-light: rgba(217, 225, 231, 0.15);
  --color-border-medium: rgba(217, 225, 231, 0.25);
  --color-border-dark: #83a19b;
  --color-border-primary: rgba(28, 88, 76, 0.3);

  /* ===== Typografie ===== */
  /* Headlines: Times New Roman | Body: Roboto */
  --font-primary: 'Times New Roman', Times, serif;
  --font-secondary: 'Roboto', sans-serif;
  --font-mono: 'Courier New', 'Courier', monospace;

  /* Font Sizes */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ===== Spacing ===== */
  --spacing-xs: 0.5rem;         /* 8px */
  --spacing-sm: 1rem;           /* 16px */
  --spacing-md: 1.5rem;         /* 24px */
  --spacing-lg: 2rem;           /* 32px */
  --spacing-xl: 3rem;           /* 48px */
  --spacing-2xl: 4rem;          /* 64px */
  --spacing-3xl: 6rem;          /* 96px */
  --spacing-4xl: 8rem;          /* 128px */

  /* ===== Border Radius ===== */
  --radius-sm: 0.25rem;         /* 4px */
  --radius-md: 0.5rem;          /* 8px */
  --radius-lg: 0.75rem;         /* 12px */
  --radius-xl: 1rem;            /* 16px */
  --radius-2xl: 1.5rem;         /* 24px */
  --radius-full: 9999px;

  /* ===== Shadows ===== */
  /* Moderne, subtile Schatten für Light Theme */
  --shadow-sm: 0 1px 2px 0 rgba(28, 88, 76, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(28, 88, 76, 0.1), 0 2px 4px -1px rgba(28, 88, 76, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(28, 88, 76, 0.12), 0 4px 6px -2px rgba(28, 88, 76, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(28, 88, 76, 0.15), 0 10px 10px -5px rgba(28, 88, 76, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(28, 88, 76, 0.2);

  /* Schatten für dunkle Hintergründe (stärker) */
  --shadow-dark-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
  --shadow-dark-md: 0 4px 8px -1px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);
  --shadow-dark-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.5), 0 4px 8px -2px rgba(0, 0, 0, 0.3);

  /* Glow Effects (Ford Colors) */
  --glow-primary: 0 0 30px rgba(131, 161, 155, 0.4);      /* Mittelgrün Glow */
  --glow-primary-sm: 0 0 15px rgba(131, 161, 155, 0.25);
  --glow-secondary: 0 0 30px rgba(134, 26, 34, 0.5);      /* Rot Glow */
  --glow-secondary-sm: 0 0 15px rgba(134, 26, 34, 0.3);

  /* ===== Transitions ===== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  --transition-slower: 400ms ease-in-out;

  /* ===== Layout ===== */
  --container-max-width: 1280px;
  --container-padding: 1rem;
  --container-padding-lg: 2rem;

  /* Grid */
  --grid-gap: 1.5rem;
  --grid-gap-sm: 1rem;
  --grid-gap-lg: 2rem;

  /* ===== Breakpoints ===== */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ===== Z-Index Scale ===== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ===== Section Dividers ===== */
  /* Dividers auf dunklen Hintergründen */
  --divider-dark-subtle: 1px solid rgba(217, 225, 231, 0.08);
  --divider-dark-light: 1px solid rgba(217, 225, 231, 0.12);
  --divider-dark-medium: 1px solid rgba(217, 225, 231, 0.2);
  --divider-dark-strong: 2px solid rgba(131, 161, 155, 0.4);

  /* Dividers auf hellen Hintergründen */
  --divider-light-subtle: 1px solid rgba(28, 88, 76, 0.08);
  --divider-light-medium: 1px solid rgba(28, 88, 76, 0.15);
  --divider-light-strong: 2px solid rgba(28, 88, 76, 0.3);

  /* Legacy */
  --divider-subtle: 1px solid rgba(217, 225, 231, 0.08);
  --divider-light: 1px solid rgba(217, 225, 231, 0.12);
  --divider-medium: 1px solid rgba(217, 225, 231, 0.2);
  --divider-primary: 2px solid rgba(131, 161, 155, 0.4);
  --divider-gradient: linear-gradient(90deg, transparent, rgba(131, 161, 155, 0.3), transparent);

  /* ===== Gradienten (Ford Yachttransport) ===== */
  /* Grün-Gradienten */
  --gradient-primary: linear-gradient(135deg, #1c584c 0%, #134238 100%);
  --gradient-primary-soft: linear-gradient(135deg, #83a19b 0%, #1c584c 100%);
  --gradient-primary-horizontal: linear-gradient(90deg, #1c584c 0%, #83a19b 100%);

  /* Overlay-Gradienten */
  --gradient-overlay-dark: linear-gradient(180deg, rgba(28, 88, 76, 0) 0%, rgba(28, 88, 76, 0.8) 100%);
  --gradient-overlay-light: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);

  /* ===== Opacity Scale ===== */
  --opacity-disabled: 0.5;
  --opacity-muted: 0.6;
  --opacity-subtle: 0.8;
  --opacity-full: 1;
}

/* ===== Landscape Mobile (z.B. iPhone 844×390) ===== */
/* Spacing-Tokens reduzieren damit Sections kompakter werden — Schriftgrößen bleiben unverändert (WCAG) */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --spacing-xl:  1.5rem;   /* 48px → 24px */
    --spacing-2xl: 2rem;     /* 64px → 32px */
    --spacing-3xl: 3rem;     /* 96px → 48px */
    --spacing-4xl: 4rem;     /* 128px → 64px */
  }
}