/*
  Design tokens — Brunnbauer-Budapest Kft.
  Source of truth for every color, type, spacing, and breakpoint value used
  on the site. Section CSS should reference these custom properties rather
  than hard-coding values, so the whole site stays in sync from one place.

  Colors and typeface come from assets/design/Brand egyesítés 3V.pdf and
  assets/fonts/helvetica-neue-5. Navy + red are Brunnbauer's own brand
  colors; the group's green/gold belong to sibling Navigator companies
  (Julius-Globe, Instrum Kft.) and must not be used here.
*/

:root {
  /* ---- Brand colors ---- */
  --color-navy-900: #1d2f42; /* primary dark — headings, dark surfaces */
  --color-navy-700: #2c3b59; /* secondary navy — gradients, hover states */
  --color-red-600: #d53020; /* Brunnbauer accent — CTAs, highlights */
  --color-red-700: #b3271a; /* pressed/hover state for red */
  --color-navy-tint: #7e93ac; /* muted secondary-icon tint, derived from navy — not a primary color */
  /* Photo overlay navy, measured directly from the pptx: every full-bleed
     content slide uses a #23304D rectangle at 85% opacity over its photo.
     Close to --color-navy-900 but not identical — kept as its own token
     since it's sourced from the deck specifically, for hero/photo tints. */
  --color-overlay-navy: #23304d;
  --overlay-hero-opacity: 0.85;

  /* ---- Neutrals (derived from navy, not generic grays) ---- */
  --color-white: #ffffff;
  --color-ink: #14212f; /* body text on light surfaces, darker than navy-900 */
  --color-slate-600: #4d5c6e;
  --color-slate-400: #8b97a6;
  --color-slate-200: #d7dce2;
  --color-slate-100: #eef1f4;
  --color-surface: #f6f7f9; /* off-white section background */

  /* ---- Typography ---- */
  --font-display: "Helvetica Neue Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue Web", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fw-black: 900;

  /* Fluid type scale: clamp(min, preferred, max) */
  --fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-small: clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --fs-h1: clamp(2.5rem, 1.8rem + 2.8vw, 4rem);
  --fs-display: clamp(3rem, 2rem + 4vw, 5.5rem);

  --lh-body: 1.7;
  --lh-heading: 1.15;
  --tracking-tight: -0.03em;

  /* ---- Spacing scale (base unit 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout ---- */
  --content-max: 1320px;
  --content-padding: clamp(1.25rem, 4vw, 4rem);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 32px;

  /* ---- Shadows (layered, navy-tinted — never flat shadow-md) ---- */
  --shadow-sm: 0 1px 2px rgba(29, 47, 66, 0.08), 0 2px 6px rgba(29, 47, 66, 0.06);
  --shadow-md: 0 4px 10px rgba(29, 47, 66, 0.1), 0 12px 28px rgba(29, 47, 66, 0.12);
  --shadow-lg: 0 10px 24px rgba(29, 47, 66, 0.14), 0 24px 56px rgba(29, 47, 66, 0.16);
  --shadow-red: 0 8px 20px rgba(213, 48, 32, 0.24);

  /* ---- Motion ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  /* ---- Z-layers (base -> elevated -> floating) ---- */
  --z-base: 0;
  --z-elevated: 10;
  --z-floating: 100;
  --z-overlay: 1000;
}

/*
  Breakpoint reference (documentation only — CSS custom properties cannot be
  used inside @media queries, so section stylesheets should hard-code these
  same pixel values):
    mobile   : < 480px
    tablet   : 481px – 768px
    laptop   : 769px – 1024px
    desktop  : 1025px – 1440px
    wide     : 1441px and up
*/