/* ==========================================================================
   TAUNUS Limousinenservice – Design Tokens
   --------------------------------------------------------------------------
   All values are extracted from the approved homepage client preview
   (design/homepage/source/claude-export-v2/homepage-v2-client-preview.dc.html)
   and the Design Direction V2. Do not introduce new values here without a
   corresponding decision in docs/design-system.md.

   Breakpoints used across the stylesheets (CSS custom properties cannot be
   used inside media queries, so they are documented here and written
   literally in the media query blocks):

     sm   480px   large phone
     md   768px   tablet portrait
     lg  1024px   tablet landscape / small laptop
     xl  1280px   desktop (content width is reached here)
     2xl 1440px   design canvas width
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- colour */

  /* Ink / Navy – the primary dark contrast colour */
  --color-ink: #131c24;
  --color-ink-raised: #1b2833;   /* corporate section, dark cards, map core */
  --color-ink-hover: #1b2833;    /* primary button hover */

  /* Surfaces */
  --color-surface: #f8f6f2;        /* warm off-white – default page surface */
  --color-surface-warm: #efece6;   /* secondary warm neutral – quality, tiles */
  --color-surface-warm-hover: #e9e5dd;
  --color-surface-cool: #e6eaed;   /* secondary cool neutral – fleet section */
  --color-surface-card: #ffffff;
  --color-surface-card-hover: #fcfbf9;

  /* Text */
  --color-text: #3a4a57;          /* body copy */
  --color-text-strong: #131c24;   /* headings, emphasised values */
  --color-text-muted: #62717f;    /* labels, meta, secondary copy */
  --color-text-soft: #7c8892;     /* de-emphasised map labels */

  /* Text on ink */
  --color-text-on-ink: #ffffff;
  --color-text-on-ink-strong: rgba(255, 255, 255, 0.86);
  --color-text-on-ink-muted: rgba(255, 255, 255, 0.72);
  --color-text-on-ink-soft: rgba(255, 255, 255, 0.66);
  --color-text-on-ink-faint: rgba(255, 255, 255, 0.5);

  /* Form validation – used only in the error state */
  --color-error: #96342a;

  /* Champagne / gold – restrained accent only */
  --color-gold: #b08a4e;          /* rules, markers, active underlines */
  --color-gold-light: #d8be8c;    /* accents and CTA surface on ink */
  --color-gold-light-hover: #e4cfa6;
  --color-gold-deep: #8a6835;     /* eyebrow labels and link hover on light */
  --color-gold-soft: #c4b08a;     /* secondary map markers */

  /* Borders */
  --color-border: #ece9e3;             /* hairlines on white */
  --color-border-warm: #d8d4cc;        /* hairlines on warm surfaces */
  --color-border-warm-soft: #e2ded6;   /* tile dividers */
  --color-border-cool: #e2e6e9;        /* hairlines on cool surfaces */
  --color-border-cool-soft: #d9dde1;   /* comparison table on cool surfaces */
  --color-border-cool-strong: #cbd3d9; /* map area outlines */
  --color-border-ink: rgba(19, 28, 36, 0.08);
  --color-border-on-ink: rgba(255, 255, 255, 0.14);
  --color-border-on-ink-faint: rgba(255, 255, 255, 0.1);
  --color-border-on-ink-hairline: rgba(255, 255, 255, 0.12);
  --color-border-on-ink-strong: rgba(255, 255, 255, 0.32);
  --color-border-on-ink-control: rgba(255, 255, 255, 0.55);
  --color-border-gold-faint: rgba(216, 190, 140, 0.4);
  --color-border-gold-soft: rgba(216, 190, 140, 0.55);

  /* Map surfaces (Einsatzgebiet) */
  --color-map-backdrop: #efece6;
  --color-map-land: #e2ded6;
  --color-map-taunus: #d9dde1;
  --color-map-area: #e6eaed;
  --color-map-area-active: #dce2e6;
  --color-map-core: #1b2833;
  --color-map-core-active: #131c24;
  --color-map-river: #f8f6f2;

  /* Hero and photo scrims */
  --gradient-hero-base: radial-gradient(ellipse 34% 26% at 64% 58%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #98a1aa 0%, #b4bac0 30%, #7c8894 44%, #48545f 56%, #2b343d 70%, #1a2129 100%);
  --gradient-hero-scrim-x: linear-gradient(90deg, rgba(19, 28, 36, 0.74) 0%, rgba(19, 28, 36, 0.52) 36%, rgba(19, 28, 36, 0.1) 70%, rgba(19, 28, 36, 0) 100%);
  --gradient-hero-scrim-y: linear-gradient(180deg, rgba(19, 28, 36, 0.5) 0%, rgba(19, 28, 36, 0) 200px),
    linear-gradient(0deg, rgba(19, 28, 36, 0.55) 0%, rgba(19, 28, 36, 0) 260px);
  --gradient-feature-base: radial-gradient(ellipse 40% 30% at 62% 46%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #b6bcc2 0%, #9aa3ac 28%, #5e6a75 50%, #333d47 70%, #1b2833 100%);
  --gradient-feature-scrim: linear-gradient(0deg, rgba(19, 28, 36, 0.9) 0%, rgba(19, 28, 36, 0.55) 38%, rgba(19, 28, 36, 0) 66%);
  --gradient-photo-cool: linear-gradient(180deg, #f1f3f5 0%, #d7dce1 60%, #b9c1c8 100%);
  --gradient-photo-portrait: linear-gradient(180deg, #c9ced3 0%, #8f99a3 55%, #3a4650 100%);
  --gradient-photo-quality: linear-gradient(180deg, #c2c8ce 0%, #8b96a0 48%, #3e4a55 100%);

  /* ------------------------------------------------------------ typography */

  --font-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

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

  /* Display sizes – fluid between the mobile and the 1440px design values */
  --font-size-display-1: clamp(2rem, 1.15rem + 3.6vw, 3.75rem);      /* 32 → 60 */
  --font-size-display-2: clamp(1.75rem, 1.19rem + 2.36vw, 2.75rem);  /* 28 → 44 */
  --font-size-display-3: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);       /* 32 → 52 */
  --font-size-heading-lg: clamp(1.625rem, 1.27rem + 1.5vw, 2.25rem); /* 26 → 36 */
  --font-size-heading-md: clamp(1.375rem, 1.23rem + 0.6vw, 1.625rem);/* 22 → 26 */
  --font-size-heading-sm: clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);   /* 20 → 24 */
  --font-size-heading-xs: 1.375rem;                                   /* 22 */
  --font-size-feature: 1.1875rem;                                     /* 19 */

  /* Text sizes */
  --font-size-lead: 1.0625rem;   /* 17 */
  --font-size-lg: 1rem;          /* 16 */
  --font-size-md: 0.9375rem;     /* 15 */
  --font-size-base: 0.90625rem;  /* 14.5 */
  --font-size-sm: 0.875rem;      /* 14 */
  --font-size-xs: 0.8125rem;     /* 13 */
  --font-size-2xs: 0.75rem;      /* 12 – eyebrows */
  --font-size-3xs: 0.6875rem;    /* 11 – field labels */

  --line-height-display: 1.1;
  --line-height-display-tight: 1.08;
  --line-height-heading: 1.15;
  --line-height-snug: 1.2;
  --line-height-text: 1.55;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.7;

  --letter-spacing-display: -0.012em;
  --letter-spacing-display-tight: -0.014em;
  --letter-spacing-heading: -0.01em;
  --letter-spacing-heading-soft: -0.008em;
  --letter-spacing-eyebrow: 0.14em;
  --letter-spacing-label: 0.1em;
  --letter-spacing-footer-label: 0.12em;

  /* --------------------------------------------------------------- spacing */

  --space-3xs: 0.25rem;   /* 4  */
  --space-2xs: 0.5rem;    /* 8  */
  --space-xs: 0.75rem;    /* 12 */
  --space-sm: 1rem;       /* 16 */
  --space-md: 1.375rem;   /* 22 */
  --space-lg: 1.625rem;   /* 26 */
  --space-xl: 2rem;       /* 32 */
  --space-2xl: 2.5rem;    /* 40 */
  --space-3xl: 3.5rem;    /* 56 */
  --space-4xl: 4rem;      /* 64 */
  --space-5xl: 5rem;      /* 80 */

  /* Vertical section rhythm – fluid, derived from the 120–144px design values */
  --section-padding-block: clamp(4rem, 2.3rem + 7.1vw, 8.5rem);
  --section-padding-block-sm: clamp(3.5rem, 2.2rem + 5.4vw, 7.5rem);
  --section-head-gap: clamp(2.5rem, 1.6rem + 3.8vw, 4rem);

  /* ---------------------------------------------------------------- layout */

  --container-max: 1280px;       /* 1440px canvas minus 2 × 80px gutters */
  --container-gutter: clamp(1.25rem, 5.6vw, 5rem);
  --grid-columns: 12;
  --grid-gap: clamp(1rem, 1.7vw, 1.5rem);

  --header-height: 96px;
  --header-height-compact: 72px;
  --booking-overlap: 100px;

  /* --------------------------------------------------------------- effects */

  --shadow-raised: 0 30px 60px -32px rgba(19, 28, 36, 0.3);
  --shadow-marker-active: 0 0 0 5px rgba(176, 138, 78, 0.22);

  /* The design language is consistently square; only dots and markers round. */
  --radius-full: 50%;

  --border-width-hairline: 1px;
  --border-width-active: 2px;

  /* ----------------------------------------------------------- transitions */

  --duration-base: 200ms;
  --transition-fast: 160ms ease;
  --transition-base: var(--duration-base) ease;
  --transition-map: 220ms ease;
  --transition-reveal: 600ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* -------------------------------------------------------------- z-layers */

  --z-raised: 2;        /* booking module overlapping the hero */
  --z-picker: 95;       /* date/time popover – under the fixed header */
  --z-nav-panel: 90;
  --z-header: 100;
  --z-skip-link: 200;
}