/* ──────────────────────────────────────────────────────────────
   DOMINT — Design Tokens
   Defense Tech AI · Clarity · Precision · Reliability · Autonomy
   ────────────────────────────────────────────────────────────── */

:root {
  /* ─── Primary palette ────────────────────────────────────── */
  --c-vivid-blue:   #204EEF;   /* signature — CTAs, key accents */
  --c-ocean-blue:   #3A68F2;   /* secondary accent, mid-tone */
  --c-pastel-blue:  #76A4FB;   /* highlight, subtle surfaces */
  --c-deep-navy:    #111524;   /* primary dark surface, body text on light */
  --c-light-grey:   #F0F0F0;   /* default light surface */

  /* ─── Secondary palette ──────────────────────────────────── */
  --c-black:        #000000;
  --c-smoke-grey:   #111315;   /* near-black; off-pure for chrome */
  --c-white:        #FFFFFF;

  /* ─── Semantic aliases ───────────────────────────────────── */
  --c-bg:           var(--c-white);
  --c-bg-alt:       var(--c-light-grey);
  --c-bg-dark:      var(--c-deep-navy);
  --c-bg-darker:    var(--c-smoke-grey);
  --c-fg:           var(--c-deep-navy);
  --c-fg-on-dark:   var(--c-white);
  --c-muted:        #5C6275;          /* derived — navy at ~55% */
  --c-muted-on-dark:#8A93A8;          /* derived — pastel-ish on navy */
  --c-line:         rgba(17, 21, 36, 0.10);
  --c-line-on-dark: rgba(255, 255, 255, 0.12);

  --c-accent:       var(--c-vivid-blue);
  --c-accent-hover: #1A40C9;          /* derived — vivid -10% */
  --c-accent-soft:  rgba(32, 78, 239, 0.10);

  /* ─── Brand gradients ────────────────────────────────────── */
  --grad-vivid-navy:    linear-gradient(135deg, #204EEF 0%, #111524 100%);
  --grad-vivid-pastel:  linear-gradient(135deg, #204EEF 0%, #76A4FB 100%);
  --grad-radial-vivid:  radial-gradient(circle at 30% 20%, #3A68F2 0%, #204EEF 45%, #111524 100%);

  /* ─── Type ───────────────────────────────────────────────── */
  --font-primary:   'ITC Blair', 'Sora', system-ui, -apple-system, sans-serif;
  --font-secondary: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* sizes (1.250 major-third scale, base 16) */
  --t-super:        clamp(56px, 7.5vw, 112px);   /* Super Headline · ITC Blair Bold */
  --t-h1:           clamp(40px, 5vw, 64px);      /* Headline 1     · ITC Blair Medium */
  --t-h2:           clamp(28px, 3.2vw, 40px);    /* Headline 2     · Montserrat Semi-Bold */
  --t-h3:           24px;
  --t-lead:         20px;
  --t-body:         16px;                        /* Body           · Montserrat Regular */
  --t-small:        14px;
  --t-eyebrow:      12px;

  --lh-tight:       1.04;
  --lh-snug:        1.18;
  --lh-body:        1.55;
  --lh-loose:       1.7;

  --tr-tight:       -0.02em;
  --tr-default:     -0.01em;
  --tr-wide:        0.08em;        /* eyebrows, all-caps labels */
  --tr-wider:       0.18em;        /* high-tracking labels      */

  /* ─── Spacing (4px base) ─────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ─── Radius ─────────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ─── Border ─────────────────────────────────────────────── */
  --bw-1: 1px;
  --bw-2: 2px;

  /* ─── Shadow ─────────────────────────────────────────────── */
  --sh-sm:   0 1px 2px rgba(17,21,36,0.06), 0 1px 1px rgba(17,21,36,0.04);
  --sh-md:   0 4px 12px rgba(17,21,36,0.08), 0 1px 2px rgba(17,21,36,0.04);
  --sh-lg:   0 16px 40px rgba(17,21,36,0.12), 0 2px 6px rgba(17,21,36,0.06);
  --sh-xl:   0 32px 80px rgba(17,21,36,0.18), 0 4px 12px rgba(17,21,36,0.08);
  --sh-glow: 0 0 0 4px rgba(32,78,239,0.18), 0 8px 24px rgba(32,78,239,0.28);

  /* ─── Motion ─────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.85, 0, 0.15, 1);
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --dur-slow:      420ms;

  /* ─── Layout ─────────────────────────────────────────────── */
  --container:     1280px;
  --container-sm:  720px;
}

/* Reset/base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-secondary);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--c-fg);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Type primitives */
.t-super, .t-h1, .t-h2 { font-family: var(--font-primary); }
.t-super  { font-size: var(--t-super); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.t-h1     { font-size: var(--t-h1);    font-weight: 500; line-height: var(--lh-snug);  letter-spacing: var(--tr-default); }
.t-h2     { font-family: var(--font-secondary); font-size: var(--t-h2); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tr-default); }
.t-h3     { font-family: var(--font-secondary); font-size: var(--t-h3); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--tr-default); }
.t-lead   { font-family: var(--font-secondary); font-size: var(--t-lead); font-weight: 400; line-height: var(--lh-body); }
.t-body   { font-size: var(--t-body); font-weight: 400; line-height: var(--lh-body); }
.t-small  { font-size: var(--t-small); line-height: var(--lh-body); }
.t-eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
}