/* ═══════════════════════════════════════════════════════════
   Dexmarine — Design Tokens
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ─── Color Palette — White/Light Professional ──────────── */
  --color-bg:           #FFFFFF;      /* Primary background — white */
  --color-bg-mid:       #F5F7FA;      /* Mid/section bg — light gray */
  --color-bg-deep:      #0A1929;      /* Footer / deepest bg — navy */
  --color-bg-card:      #FFFFFF;      /* Card surfaces — white */
  --color-bg-card-hover:#F8F9FB;      /* Card hover state */

  --color-accent:       #1A3A5C;      /* Navy — primary CTA, matches Dexmarine brand */
  --color-accent-light: #2A5A8C;      /* Hover (lighter navy) */
  --color-accent-warm:  #0F2A45;      /* Pressed */
  --color-accent-subtle: rgba(26, 58, 92, 0.08);
  --color-accent-subtle-hover: rgba(26, 58, 92, 0.14);

  --color-text:         #1A202C;      /* Primary text — near-black */
  --color-text-muted:   #718096;      /* Secondary / caption text */
  --color-text-faint:   #A0AEC0;      /* Placeholder / disabled */

  --color-border:       rgba(0, 0, 0, 0.10);
  --color-border-accent: rgba(26, 58, 92, 0.25);

  --color-white:        #FFFFFF;
  --color-overlay:      rgba(10, 25, 41, 0.72);  /* Hero overlay */

  /* ─── Typography ────────────────────────────────────────── */
  --font-heading:  'Poppins', sans-serif;
  --font-body:     'Inter', sans-serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-xbold:   800;
  --fw-black:   900;

  /* ─── Type Scale ────────────────────────────────────────── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  /* ─── Spacing ───────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ─── Border Radius ─────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ─── Shadows ───────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.15);

  /* ─── Glow Effects ──────────────────────────────────────── */
  --glow-accent:     0 0 32px rgba(26, 58, 92, 0.25);
  --glow-accent-sm:  0 0 16px rgba(26, 58, 92, 0.18);
  --glow-accent-lg:  0 0 60px rgba(26, 58, 92, 0.20);
  --glow-accent-btn: 0 4px 20px rgba(26, 58, 92, 0.30);
  --glow-accent-btn-hover: 0 6px 28px rgba(26, 58, 92, 0.40);

  /* ─── Motion ────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 700ms;

  /* ─── Layout ─────────────────────────────────────────────── */
  --container-max: 1160px;
  --nav-height:    72px;

  /* ─── Particle / decorative ─────────────────────────────── */
  --particle-color: rgba(26, 58, 92, 0.30);
}