/* ============================================================
   OPI ROBOTICS — Design Tokens
   Style #41 Cosmic Deep × Layout #21 Sticky Hero Peel
   Scale: Generous · Density: Balanced
   Brand tokens: --p (primary) --s (secondary/canvas) --a (accent)
   Optional support tokens: --o1 (light surface) --o2 (slate neutral)
   ============================================================ */
:root{
  /* ---- Brand tokens (declared) ---- */
  --p:#3B82F6;         /* PRIMARY_COLOR — distant light / CTA / link */
  --s:#0B1020;         /* SECONDARY_COLOR — deep space canvas */
  --a:#22D3EE;         /* ACCENT_COLOR — starlight / signature glow */
  --o1:#EEF2FF;        /* OPTIONAL_COLOR_1 — light neutral, used sparingly */
  --o2:#64748B;        /* OPTIONAL_COLOR_2 — slate neutral */

  /* ---- Surface ramp (derived from --s) ---- */
  --bg:#0B1020;
  --bg-recessed:#070A16;
  --bg-deep:#04060D;
  --surface:#10152B;
  --surface-raised:#161C39;
  --surface-hover:#1B2244;
  --border:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.16);
  --border-hairline:rgba(255,255,255,.12);

  /* ---- Text ramp (derived from --o2 toward white for AA contrast on dark bg) ---- */
  --text-1:#F4F6FC;      /* primary heading/body */
  --text-2:#AAB2CC;      /* secondary body, derived from --o2 lightened */
  --text-3:#6D7592;      /* muted / timestamps / captions, close to --o2 */
  --on-primary:#08101F;  /* text on primary-colored surfaces */
  --on-accent:#04141A;   /* text on accent-colored surfaces */

  /* ---- Interactive states ---- */
  --p-hover:#5C9BFF;
  --p-active:#2E6BD1;
  --p-focus-ring:rgba(59,130,246,.45);
  --a-hover:#5FE4F6;

  /* ---- Semantic (neutral-leaning, desaturated) ---- */
  --success:#3FBF8F;
  --warning:#E7B65C;
  --error:#F2665B;
  --success-bg:rgba(63,191,143,.12);
  --warning-bg:rgba(231,182,92,.12);
  --error-bg:rgba(242,102,91,.12);

  /* ---- Elevation (soft, low-opacity — Cosmic Deep uses glow-depth not hard shadow) ---- */
  --elev-0: none;
  --elev-1: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px -8px rgba(0,0,0,.5);
  --elev-2: 0 2px 4px rgba(0,0,0,.45), 0 16px 40px -12px rgba(0,0,0,.6);
  --elev-3: 0 8px 12px rgba(0,0,0,.5), 0 32px 64px -16px rgba(0,0,0,.7);
  --glow-p: 0 0 0 1px rgba(59,130,246,.25), 0 0 40px -4px rgba(59,130,246,.35);
  --glow-a: 0 0 0 1px rgba(34,211,238,.25), 0 0 48px -4px rgba(34,211,238,.4);

  /* ---- Radius scale (consistent, modest — Cosmic Deep favors precise edges over soft blobs) ---- */
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:28px; --r-full:999px;

  /* ---- Spacing scale — 8px grid (Scale: Generous) ---- */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:64px; --sp-7:80px; --sp-8:96px; --sp-9:120px; --sp-10:176px;

  /* ---- Container (Generous) ---- */
  --container-max:1320px;
  --gutter: clamp(20px, 5vw, 64px);

  /* ---- Type scale (Generous, fluid via clamp) ---- */
  --fs-body: clamp(1.0625rem, 0.98rem + 0.2vw, 1.125rem);      /* 17–18px */
  --fs-small: 0.9375rem;                                        /* 15px, floor 14px absolute min elsewhere */
  --fs-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.5rem);            /* 24px target */
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.125rem);              /* 34px target */
  --fs-h1: clamp(2.6rem, 1.6rem + 6.5vw, 4.6rem);
  --fs-display: clamp(3.2rem, 1.8rem + 9vw, 7.5rem);            /* footer wordmark slab */
  --lh-heading: 1.1;
  --lh-body: 1.7;
  --ls-heading: -0.01em;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Menlo", "Consolas", "SFMono-Regular", ui-monospace, monospace;

  /* ---- Controls (Generous) ---- */
  --ctrl-h-btn: 50px;
  --ctrl-h-btn-sm: 44px;
  --ctrl-h-input: 48px;
  --ctrl-pad-x: 22px;
  --card-pad: 32px;

  /* ---- Motion tokens — Cosmic Deep: slow, drifting, weightless (not snappy) ---- */
  --dur-fast: 200ms;
  --dur-base: 340ms;
  --dur-slow: 560ms;
  --dur-orbit: 1400ms;
  --ease-out-premium: cubic-bezier(.16,1,.3,1);
  --ease-in-premium: cubic-bezier(.7,0,.84,0);
  --ease-drift: cubic-bezier(.22,.61,.36,1);

  /* ---- Breakpoint reference (documented, applied via literal media queries) ----
     XS ≤375  SM 376–639  MD 640–899  LG 900–1199  XL 1200–1535  2XL ≥1536 */
}

@media (prefers-color-scheme: light){
  /* Cosmic Deep is a dark-native style by definition (deep space).
     The site intentionally does not invert to a light canvas — that would
     break the style's identity. We instead lift surfaces slightly for
     users with light-mode OS preference, keeping the canvas dark. */
  :root{ --bg:#0B1020; }
}