/**
 * Altius Marine — Design Tokens
 * Source of truth for Tailwind config and all hand-authored CSS.
 * Colors pixel-sampled from Altius-Marine.png (supplied logo). Do not
 * substitute the brief's original text-only palette (Deep Navy / Premium
 * Gold) — the logo is the fixed brand asset. See Build Brief Section 3.
 */

:root {
  /* ---------------------------------------------------------------
     BRAND COLOR
  --------------------------------------------------------------- */
  --color-navy: #334859;
  --color-navy-rgb: 51, 72, 89;

  --color-orange-start: #E84A0A;
  --color-orange-end: #EE9136;
  --gradient-accent: linear-gradient(135deg, var(--color-orange-start), var(--color-orange-end));

  --color-white: #FFFFFF;
  --color-steel-grey: #6B7280;

  /* Optional secondary accent — not contradicted by the logo, but use
     sparingly. Phase 1 design call if a single orange accent proves
     repetitive across ~65 pages. Do not use as a default. */
  --color-ocean-blue: #1E5F8C;

  /* ---------------------------------------------------------------
     SEMANTIC COLOR
  --------------------------------------------------------------- */
  --color-bg-default: var(--color-white);
  --color-bg-inverse: var(--color-navy);
  --color-bg-surface: #F5F6F7;              /* light neutral panel, not pure white — avoids flat look */

  --color-text-default: var(--color-navy);
  --color-text-inverse: var(--color-white);
  --color-text-muted: var(--color-steel-grey);

  --color-border-hairline: rgba(var(--color-navy-rgb), 0.12);
  --color-border-hairline-inverse: rgba(255, 255, 255, 0.16);

  /* Contrast-verified usage only — see Build Brief Section 3 for ratios.
     Orange NEVER as text color on navy (2.5:1, fails). Orange is a fill,
     border, or icon color only when placed on navy. */
  --color-accent-on-light: var(--color-orange-start);
  --color-accent-fill-on-dark: var(--color-orange-end);

  /* ---------------------------------------------------------------
     TYPOGRAPHY
  --------------------------------------------------------------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* Type scale — 1.25 ratio, capped at 5xl (no oversized hero numerals) */
  --text-xs: 0.75rem;     /* 12px — captions, eyebrows (mono) */
  --text-sm: 0.875rem;    /* 14px — small UI text */
  --text-base: 1rem;      /* 16px — body */
  --text-lg: 1.125rem;    /* 18px — lead paragraphs */
  --text-xl: 1.375rem;    /* 22px — card headings */
  --text-2xl: 1.75rem;    /* 28px — section headings */
  --text-3xl: 2.25rem;    /* 36px — page H1 (template pages) */
  --text-4xl: 3rem;       /* 48px — homepage section headings */
  --text-5xl: 4rem;       /* 64px — hero headline ceiling */

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;   /* headlines — tightened per premium-tech convention */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;     /* mono eyebrows / labels, uppercase */

  /* ---------------------------------------------------------------
     SPACING (8px base unit)
  --------------------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* ---------------------------------------------------------------
     RADIUS — capped deliberately. No pill buttons, no soft SaaS cards.
     See Build Brief Section 4 ("engineered, not soft").
  --------------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;   /* ceiling — nothing on the site exceeds this */

  /* ---------------------------------------------------------------
     MOTION
  --------------------------------------------------------------- */
  --ease-signal: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out — GSAP + Framer Motion default */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* ---------------------------------------------------------------
     ELEVATION — hairline + soft shadow, not heavy drop shadows
  --------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(var(--color-navy-rgb), 0.06);
  --shadow-md: 0 4px 12px rgba(var(--color-navy-rgb), 0.08);
  --shadow-lg: 0 12px 32px rgba(var(--color-navy-rgb), 0.12);
}

/* Respect reduced motion sitewide — non-negotiable, not a nice-to-have */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}