/* Eagle Harbor D.O.O. — Brand design tokens (logo palette) */

:root {
  /* ── Brand colors ── */
  --navy: #002147;
  --navy-dark: #001530;
  --navy-light: #003366;
  --slate: #708090;
  --slate-light: #94a3b8;
  --slate-muted: #b0bec5;

  /* ── Surfaces (light corporate) ── */
  --bg-base: #ffffff;
  --bg-raised: #f7f9fc;
  --bg-surface: #f0f4f8;
  --bg-elevated: #e8edf3;
  --bg-overlay: #dfe6ee;
  --bg-navy: #002147;
  --bg-navy-soft: #f0f4fa;

  /* ── Text ── */
  --text: #002147;
  --text-2: #4a5568;
  --text-3: #708090;
  --text-4: #94a3b8;
  --text-on-navy: #ffffff;
  --text-on-navy-muted: rgba(255, 255, 255, 0.72);

  /* ── Accent = navy (no neon mint) ── */
  --accent: #002147;
  --accent-dim: #003d7a;
  --accent-muted: rgba(0, 33, 71, 0.08);
  --accent-border: rgba(0, 33, 71, 0.18);
  --accent-on: #ffffff;

  /* Legacy aliases */
  --black: var(--bg-base);
  --surface: var(--bg-raised);
  --surface-2: var(--bg-surface);
  --surface-3: var(--bg-elevated);
  --elevated: var(--bg-overlay);
  --mint: var(--navy);
  --mint-dim: var(--accent-muted);
  --mint-glow: rgba(0, 33, 71, 0.12);
  --gold: var(--slate);
  --gold-dim: rgba(112, 128, 144, 0.15);
  --blue: var(--navy-light);

  /* ── Borders ── */
  --border: rgba(0, 33, 71, 0.1);
  --border-light: rgba(0, 33, 71, 0.14);
  --border-strong: rgba(0, 33, 71, 0.22);

  /* ── Typography ── */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Montserrat", ui-sans-serif, sans-serif;
  --display: var(--font-serif);

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2rem, 4vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 4.5vw, 3.25rem);
  --text-hero: clamp(2.75rem, 5.5vw, 4.5rem);

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.14em;

  /* ── Layout ── */
  --wrap: 1180px;
  --header-h: 80px;
  --section-y: clamp(88px, 10vw, 128px);
  --radius-sm: 4px;
  --radius: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 3px rgba(0, 33, 71, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 33, 71, 0.08);
  --shadow-lg: 0 20px 48px rgba(0, 33, 71, 0.1);
  --shadow-card: 0 0 0 1px var(--border), var(--shadow-sm);

  --glass: rgba(255, 255, 255, 0.85);
  --glass-border: var(--border-light);
}

@media (prefers-reduced-motion: reduce) {
  :root { --ease: linear; --ease-out: linear; }
}