/* ============================================================
   AiPyraNova — Design Tokens
   Single source of truth for brand color, type, spacing, etc.
   Import into any page:  <link rel="stylesheet" href="design-system/tokens.css">
   Colors derived from the AiPyraNova logo (royal blue + cyan orbit ring).
   ============================================================ */
:root{
  /* ---- Brand palette (from logo) ---- */
  --apn-blue:#1E6FE6;        /* royal blue — primary */
  --apn-blue-deep:#1746B0;   /* deep blue — gradients, hovers */
  --apn-cyan:#2DC6F0;        /* bright cyan — orbit ring, accent */
  --apn-cyan-light:#5CD2F5;  /* light cyan — highlights */
  --apn-chrome:#CBD8E6;      /* silver/chrome — "Nova" wordmark */

  /* ---- Ink / neutrals ---- */
  --apn-navy:#081222;        /* deep navy — dark sections base */
  --apn-navy-2:#0D1B30;      /* raised dark surface */
  --apn-slate:#0F1E33;       /* primary text on light */
  --apn-muted:#5B6B86;       /* secondary text */
  --apn-muted-2:#8A99B3;     /* tertiary text / placeholders */
  --apn-line:#E3EAF3;        /* borders / dividers */
  --apn-paper:#FFFFFF;       /* page background (light) */
  --apn-paper-2:#F4F8FC;     /* subtle section background */

  /* ---- Status (functional, not brand) ---- */
  --apn-ok:#34D399;
  --apn-warn:#FBBF24;
  --apn-danger:#EF4444;

  /* ---- Signature gradient + glow ----
     DISCIPLINE: the cyan->blue gradient is reserved for the orbit ring + the single
     primary CTA. Everywhere else uses solid blue / navy / outline. Keeps one bold moment. */
  --apn-gradient:linear-gradient(120deg,#2DC6F0 0%,#1E6FE6 55%,#1746B0 100%);
  --apn-glow:
    radial-gradient(60% 60% at 72% 18%, rgba(45,198,240,.40), transparent 70%),
    radial-gradient(55% 55% at 18% 32%, rgba(30,111,230,.42), transparent 70%);
  /* desaturated film grain for depth on dark surfaces (kept very faint in use) */
  --apn-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* ---- Typography ---- */
  --apn-font-display:'Space Grotesk', sans-serif;   /* headings */
  --apn-font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --apn-font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* equipment / CMMS data */

  --apn-text-xs:.78rem;
  --apn-text-sm:.9rem;
  --apn-text-base:1rem;
  --apn-text-lg:1.18rem;
  --apn-text-xl:1.5rem;
  --apn-text-2xl:2rem;
  --apn-text-3xl:2.7rem;
  --apn-text-display:clamp(2.5rem, 5.2vw, 4rem);    /* hero headline */

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

  --apn-leading-tight:1.08;   /* headings */
  --apn-leading-body:1.6;     /* body copy */
  --apn-tracking-tight:-.02em;
  --apn-tracking-eyebrow:.14em;

  /* ---- Spacing scale (4px base) ---- */
  --apn-space-1:4px;
  --apn-space-2:8px;
  --apn-space-3:12px;
  --apn-space-4:16px;
  --apn-space-5:24px;
  --apn-space-6:32px;
  --apn-space-7:48px;
  --apn-space-8:64px;
  --apn-space-9:96px;         /* default section padding (vertical) */

  /* ---- Radius ---- */
  --apn-radius-sm:11px;
  --apn-radius:18px;          /* default card */
  --apn-radius-lg:28px;       /* feature panels, CTA box */
  --apn-radius-pill:999px;

  /* ---- Elevation (layered, tinted: base -> elevated -> floating) ---- */
  --apn-shadow-sm:0 1px 2px rgba(16,24,48,.06), 0 2px 8px -3px rgba(16,24,48,.10);
  --apn-shadow:0 1px 2px rgba(16,24,48,.06), 0 10px 40px -12px rgba(16,24,48,.18);
  --apn-shadow-lg:0 2px 6px rgba(16,24,48,.08), 0 30px 80px -28px rgba(16,24,48,.35);
  --apn-shadow-brand:0 8px 30px -10px rgba(30,111,230,.55);

  /* ---- Focus ring (visible keyboard focus everywhere) ---- */
  --apn-focus:0 0 0 3px rgba(45,198,240,.55);

  /* ---- Layout ---- */
  --apn-maxw:1180px;
  --apn-gutter:24px;

  /* ---- Motion ---- */
  --apn-ease:cubic-bezier(.2,.7,.2,1);
  --apn-transition:.25s ease;
}