/* ============================================================
   XPLOCC AUTOMATION — DESIGN TOKENS
   Single source of truth for colors, type, spacing, motion.
   Do not hardcode colors or sizes elsewhere in the CSS.
   ============================================================ */

:root {
  /* ---------- COLOR ---------- */
  --c-navy:        #0B2540;   /* primary brand */
  --c-navy-deep:   #061827;   /* hero bg, deep surfaces */
  --c-navy-lift:   #102D4D;   /* elevated nav surfaces */
  --c-steel:       #3A5A78;   /* secondary, sub-headings */
  --c-amber:       #F5A623;   /* accent — CTAs, attention */
  --c-amber-deep:  #D88E10;   /* amber hover state */

  --c-ink:         #0E1620;   /* body text on light */
  --c-ink-soft:    #2A3744;   /* secondary text */
  --c-muted:       #5A6B7C;   /* tertiary text */

  --c-paper:       #FFFFFF;
  --c-bone:        #F7F9FC;   /* page background */
  --c-slate-50:    #F2F5F9;   /* subtle surfaces */
  --c-slate-100:   #EAF1F8;   /* card surfaces */
  --c-slate-200:   #D8E1EC;   /* dividers */
  --c-grid:        #C9D2DC;   /* technical drawing line color */

  --c-success:     #2E8B57;
  --c-caution:     #D9822B;
  --c-critical:    #C0392B;

  /* Status backgrounds (lighter) */
  --c-success-bg: #E6F2EC;
  --c-amber-bg:   #FFF7E0;

  /* ---------- TYPOGRAPHY ---------- */
  /* IBM Plex Sans for headings — engineering character.
     Inter for body — legible at all sizes.
     JetBrains Mono for technical numbers, specs, schematics. */
  --font-display: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  /* Type scale — desktop. Adjusted via media query for mobile. */
  --t-display: clamp(2.5rem, 4.5vw + 0.5rem, 4.25rem);   /* hero */
  --t-h1:      clamp(2rem, 3vw + 0.5rem, 3rem);          /* page H1 */
  --t-h2:      clamp(1.5rem, 1.6vw + 0.75rem, 2.25rem);  /* section H2 */
  --t-h3:      clamp(1.15rem, 0.6vw + 0.95rem, 1.5rem);  /* card titles */
  --t-h4:      1.0625rem;                                 /* small headings */
  --t-body:    1.0625rem;                                 /* 17px */
  --t-small:   0.9375rem;
  --t-caption: 0.8125rem;
  --t-eyebrow: 0.75rem;     /* uppercase labels */

  --lh-display: 1.05;
  --lh-heading: 1.2;
  --lh-body:    1.6;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.18em;

  /* ---------- SPACING (4px base) ---------- */
  --s-1:  0.25rem;   /* 4 */
  --s-2:  0.5rem;    /* 8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */
  --s-9:  6rem;      /* 96 */
  --s-10: 8rem;      /* 128 */

  /* ---------- LAYOUT ---------- */
  --container:     1280px;
  --container-pad: clamp(1.25rem, 4vw, 2rem);

  /* ---------- BORDER ---------- */
  --border-thin:   1px solid var(--c-slate-200);
  --border-grid:   1px solid var(--c-grid);
  --border-strong: 1px solid var(--c-navy);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:   140ms;
  --t-base:   220ms;
  --t-slow:   480ms;

  /* ---------- ELEVATION (shadows) — restrained ---------- */
  --shadow-soft: 0 1px 2px rgba(11, 37, 64, 0.04), 0 4px 16px rgba(11, 37, 64, 0.04);
  --shadow-lift: 0 2px 4px rgba(11, 37, 64, 0.06), 0 12px 32px rgba(11, 37, 64, 0.08);
  --shadow-amber: 0 8px 24px rgba(245, 166, 35, 0.25);

  /* ---------- RADIUS — small only. Industrial = sharp. ---------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;

  /* ---------- HEADER HEIGHT (for sticky offset) ---------- */
  --h-utility: 36px;
  --h-nav:     72px;
  --h-header:  calc(var(--h-utility) + var(--h-nav));
}

/* On small screens, utility bar collapses */
@media (max-width: 768px) {
  :root {
    --h-utility: 0px;
    --h-header:  64px;
    --h-nav:     64px;
  }
}