/* ============================================================
   NW Agentic — Design Tokens
   nwagentic.ai
   ============================================================
   Pure custom-property declarations. No selectors except :root.
   Safe to load alongside any existing stylesheet.

   See DESIGN.md §4 for token definitions and usage.
   ============================================================ */

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --bg:                 #ffffff;
  --bg-subtle:          #f8fafc;
  --bg-card:            #ffffff;

  /* Dark surfaces (hero canvas, architecture page, dark CTA bands) */
  --navy:               #0f1c2e;   /* primary dark — existing */
  --navy-mid:           #162440;
  --navy-light:         #1e3a5f;
  --navy-deep:          #0a1424;   /* hero canvas, slightly deeper than --navy */

  /* ── Brand ────────────────────────────────────────────── */
  --blue:               #2563eb;   /* primary action */
  --blue-hover:         #1d4ed8;
  --blue-pale:          #eff6ff;
  --blue-bright:        #60a5fa;   /* hero accent / headline emphasis on dark */
  --amber:              #d97706;
  --amber-light:        #f59e0b;   /* secondary accent / "live" indicator */

  /* Tier identity — mirrors the logo's three squares */
  --tier-core:          #ffffff;
  --tier-forge:         #2563eb;
  --tier-edge:          #f59e0b;

  /* The brand gradient — blue → amber-light, 135deg.
     Echoes the OG image's diagonal beam composition.
     Use sparingly: section-eyebrow underlines, focus rings,
     dividers — never as a full background fill. */
  --brand-gradient:     linear-gradient(135deg, #2563eb 0%, #f59e0b 100%);
  --brand-gradient-soft:
                        linear-gradient(135deg,
                          rgba(37, 99, 235, 0.18) 0%,
                          rgba(245, 158, 11, 0.18) 100%);

  /* ── Text ─────────────────────────────────────────────── */
  --text-primary:       #0f172a;
  --text-secondary:     #334155;
  --text-tertiary:      #64748b;
  --text-on-dark:       #ffffff;
  --text-on-dark-soft:  #cbd5e1;
  --text-on-dark-mute:  rgba(255, 255, 255, 0.62);

  /* ── Status ───────────────────────────────────────────── */
  --success:            #16a34a;
  --warn:               #f59e0b;
  --danger:             #ef4444;

  /* ── Border ───────────────────────────────────────────── */
  --border:             #e2e8f0;
  --border-strong:      #cbd5e1;
  --border-on-dark:     rgba(255, 255, 255, 0.12);

  /* ── Typography ───────────────────────────────────────── */
  --font-sans:
    'Inter', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:
    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — see DESIGN.md §4.4 */
  --fs-display:         clamp(2.5rem, 5.5vw, 4.5rem);   /* hero headline */
  --fs-h1:              clamp(2rem, 4.5vw, 3.5rem);
  --fs-h2:              clamp(1.625rem, 3.2vw, 2.5rem);
  --fs-h3:              clamp(1.25rem, 2.2vw, 1.75rem);
  --fs-h4:              1.25rem;
  --fs-body-lg:         1.125rem;
  --fs-body:            1rem;
  --fs-body-sm:         0.875rem;
  --fs-eyebrow:         0.8125rem;
  --fs-code:            0.875rem;

  --lh-display:         1.05;
  --lh-heading:         1.15;
  --lh-body:            1.6;
  --lh-tight:           1.35;

  --tr-display:         -0.03em;
  --tr-heading:         -0.02em;
  --tr-tight:           -0.015em;
  --tr-eyebrow:         0.08em;

  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-extrabold:       800;

  /* ── Spacing — 8-pt scale ─────────────────────────────── */
  --space-1:            0.25rem;   /*  4 */
  --space-2:            0.5rem;    /*  8 */
  --space-3:            0.75rem;   /* 12 */
  --space-4:            1rem;      /* 16 */
  --space-6:            1.5rem;    /* 24 */
  --space-8:            2rem;      /* 32 */
  --space-12:           3rem;      /* 48 */
  --space-16:           4rem;      /* 64 */
  --space-24:           6rem;      /* 96 */
  --space-32:           8rem;      /* 128 */

  --section-y-desktop:  var(--space-24);
  --section-y-mobile:   var(--space-16);

  /* ── Layout ───────────────────────────────────────────── */
  --container-max:      1200px;
  --container-pad-x:    1.5rem;

  /* ── Radii ────────────────────────────────────────────── */
  --radius-sm:          6px;
  --radius:             10px;
  --radius-lg:          16px;
  --radius-pill:        999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:          0 1px 2px 0 rgba(13, 28, 60, 0.04),
                        0 1px 3px 0 rgba(13, 28, 60, 0.08);
  --shadow:             0 4px 6px -2px rgba(13, 28, 60, 0.06),
                        0 2px 4px -2px rgba(13, 28, 60, 0.05);
  --shadow-md:          0 10px 20px -8px rgba(13, 28, 60, 0.10),
                        0 4px 8px -4px rgba(13, 28, 60, 0.06);
  --shadow-lg:          0 12px 40px -12px rgba(13, 28, 60, 0.18);
  --shadow-glow-blue:   0 8px 32px -8px rgba(37, 99, 235, 0.32);
  --shadow-glow-amber:  0 8px 32px -8px rgba(245, 158, 11, 0.30);

  /* ── Accessibility ────────────────────────────────────── */
  --focus-ring:         #2563eb;
  --focus-ring-contrast: #93c5fd;
  --focus-ring-soft:    rgba(37, 99, 235, 0.18);

  /* ── Motion ───────────────────────────────────────────── */
  --t:                  0.2s ease;
  --t-fast:             0.15s ease-out;
  --t-slow:             0.4s cubic-bezier(0.22, 1, 0.36, 1);
  --t-reveal:           0.55s cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Z-index ──────────────────────────────────────────── */
  --z-base:             1;
  --z-elevated:         10;
  --z-nav:              100;
  --z-modal:            1000;
  --z-toast:            1100;
}

/* ── Dark-only overrides (sections that intentionally
   stay dark in light-mode browsers): use .on-dark wrapper.
   Token values remain the same; this is just a hook. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --t:                0s;
    --t-fast:           0s;
    --t-slow:           0s;
    --t-reveal:         0s;
  }
}