/**
 * variables.css — Design tokens for Deus Ex Machina Maritime
 * ALL hex values live here. No other CSS file may use raw hex codes.
 *
 * Brand palette:
 *   Primary:   #1E3A8A  Royal cobalt blue
 *   Secondary: #0F1F4D  Deep navy
 *   Accent:    #FFFFFF  Pure white
 *   Dark base: #080F24  Near-black navy
 *   Ice blue:  #93C5FD  Subtle highlight
 */

:root {

  /* ── BRAND COLORS ──────────────────────────────────── */
  --color-primary:   #1E3A8A;
  --color-secondary: #0F1F4D;
  --color-accent:    #FFFFFF;
  --color-dark:      #080F24;
  --color-ice:       #93C5FD;

  /* ── SEMANTIC TEXT ─────────────────────────────────── */
  --color-text-body:  #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.65);
  --color-text-faint: rgba(255, 255, 255, 0.35);

  /* ── SEMANTIC BACKGROUNDS ──────────────────────────── */
  --color-bg-page:    #080F24;
  --color-bg-section: #0F1F4D;
  --color-bg-card:    rgba(30, 58, 138, 0.18);
  --color-bg-card-hover: rgba(30, 58, 138, 0.32);
  --color-bg-light:   rgba(255, 255, 255, 0.04);

  /* ── BORDERS ───────────────────────────────────────── */
  --color-border:       rgba(147, 197, 253, 0.15);
  --color-border-hover: rgba(147, 197, 253, 0.45);
  --color-border-light: rgba(255, 255, 255, 0.10);

  /* ── NAVIGATION ────────────────────────────────────── */
  --nav-height:        80px;
  --nav-bg-clear:      transparent;
  --nav-bg-solid:      #0F1F4D;
  --nav-transition:    background 0.35s ease, box-shadow 0.35s ease;

  /* ── TYPOGRAPHY ────────────────────────────────────── */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                  'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-hero: clamp(2.5rem, 6vw, 5rem); /* fluid hero headline */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-wide:   0.05em;
  --tracking-wider:  0.10em;
  --tracking-widest: 0.16em;

  /* ── SPACING SCALE ─────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── LAYOUT ────────────────────────────────────────── */
  --container-max:   1280px;
  --container-prose: 800px;
  --section-padding: clamp(4rem, 8vw, 8rem);

  /* ── BORDERS & RADIUS ──────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── SHADOWS ───────────────────────────────────────── */
  --shadow-card:  0 4px 24px rgba(8, 15, 36, 0.50);
  --shadow-card-hover: 0 8px 40px rgba(8, 15, 36, 0.70);
  --shadow-nav:   0 2px 20px rgba(8, 15, 36, 0.60);
  --shadow-glow:  0 0 40px rgba(30, 58, 138, 0.50);
  --shadow-glow-ice: 0 0 30px rgba(147, 197, 253, 0.20);

  /* ── TRANSITIONS ───────────────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.30s ease;
  --transition-slow: 0.60s ease;

  /* ── Z-INDEX SCALE ─────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
}