/* ============================================================
   ELEVATED ORBIT — Design Tokens  v1.1
   Source: elevated-orbit-brand.html (Open Design, 2026-05-30)
   v1.1 (2026-05-30): WCAG-AA contrast pass + production token groups.
   Import this in the EO Astro site + any EO deliverable.
   Light is default; html[data-theme="dark"] swaps roles.
   ------------------------------------------------------------
   HARD RULES (read before using accent / state / radius tokens):

   (a) AURORA-GLOW (#36B6F5) is a DARK-CANVAS + DECORATIVE colour only.
       Use it on the dark theme, and on light only for non-text
       decoration at >=24px (motif strokes, large glyphs, orbit rings).
       NEVER use #36B6F5 for body text, links, or small icons on a
       light background — it fails AA (2.x:1). For text/links/small
       icons on light, use --accent-on-light (#1C6FD6) or
       --accent-icon-on-light (#1862C0).

   (b) GLOW-FILL BUTTONS (the luminous aurora-glow fill, used mainly
       in dark mode and on hover) carry --eo-deep-space text, NOT
       #fff. White on #36B6F5 fails AA; deep-space ink on glow passes.

   (c) --r-full (pill radius) is RESERVED FOR CTAs only. Inputs,
       cards, badges, and chips use --r-xs..--r-lg. Pills signal
       "primary action," so over-using them dilutes the CTA.

   (d) EVERY SEMANTIC STATE SHIPS ICON + TEXT. Colour alone never
       carries meaning (WCAG 1.4.1). Success/warning/error/info
       always pair a glyph with a text label.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* — Brand core (night sky) — */
  --eo-deep-space: #0d0b1a; /* darkest night-sky / dark-mode canvas */
  --eo-midnight: #18152e; /* primary brand dark */
  --eo-indigo-700: #221e40;
  --eo-indigo-500: #38335e;

  /* — Aurora accent (THE single functional accent) — */
  --eo-aurora-glow: #36b6f5; /* luminous azure — glows on dark, large fills, motif. RULE (a): never text/small-icon on light. */
  --eo-aurora: #1c6fd6; /* AA-safe deep azure — links + small text + buttons on light */
  --eo-aurora-press: #155ab0; /* pressed / active */
  --eo-aurora-tint: #eaf3fe; /* faint azure wash for backgrounds */
  --eo-aurora-violet: #9a6bff; /* motif gradient tail ONLY — never functional UI */

  /* — Warm neutrals (paper side) — */
  --eo-paper: #fbfaf7;
  --eo-surface: #fefdfb; /* v1.1: warm-tinted, was pure #ffffff */
  --eo-surface-2: #f4f2ec;
  --eo-ink: #1f1c30;
  --eo-muted: #615d75; /* v1.1: ~4.6:1 on paper (was #6a6680 borderline) */
  --eo-faint: #6f6c82; /* v1.1: 4.86:1 on paper (was #9a97ac 2.72:1 FAIL) */
  --eo-border: #e6e3ec; /* decorative dividers / hairlines */
  --eo-border-strong: #d3cfdd;
  --eo-border-ui: #9a95ac; /* v1.1: functional input/control resting border (>=3:1 vs surface) */

  /* — Aurora text/icon roles on LIGHT (RULE a) — */
  --accent-on-light: #1c6fd6; /* AA text/link azure on light */
  --accent-icon-on-light: #1862c0; /* slightly deeper for small icons/strokes on light */

  /* — Warm neutrals (dark side) — */
  --eo-d-surface: #1a1733;
  --eo-d-surface-2: #221e40;
  --eo-d-text: #f2f0fa;
  --eo-d-muted: #a6a2be;
  --eo-d-border: #2c2850;
  --eo-d-border-ui: #4a4570; /* functional control border on dark */

  /* — Semantic states (RULE d: always icon + text) — */
  --eo-success: #0a6e51; /* v1.1: darker for AA on light (was #0e8a66) */
  --eo-success-bg: #e5f6f0;
  --eo-warning: #8f5b0f; /* v1.1: darker for AA on light (was #b97714) */
  --eo-warning-bg: #fbf0de;
  --eo-error: #c72f3a; /* kept */
  --eo-error-bg: #fbe7e8;
  --eo-info: #1c6fd6; /* mirrors accent-on-light */
  --eo-info-bg: #eaf3fe;

  /* dark-mode state tints (text-on-dark variants for legibility) */
  --eo-success-d: #4fd1a6;
  --eo-warning-d: #f2b259;
  --eo-error-d: #ff8a92;
  --eo-info-d: #6fc4fb;

  /* — Live (theme-swapped) roles — */
  --bg: var(--eo-paper);
  --surface: var(--eo-surface);
  --surface-2: var(--eo-surface-2);
  --fg: var(--eo-ink);
  --muted: var(--eo-muted);
  --faint: var(--eo-faint);
  --border: var(--eo-border);
  --border-ui: var(--eo-border-ui);
  --accent: var(--eo-aurora);
  --accent-text: var(
    --accent-on-light
  ); /* AA text/link accent for current theme */
  --accent-icon: var(--accent-icon-on-light);
  --accent-glow: var(--eo-aurora-glow);
  --on-accent: #ffffff; /* text colour ON a solid --accent fill (passes AA on #1c6fd6) */
  --on-glow: var(--eo-deep-space); /* RULE (b): text ON an aurora-glow fill */

  /* state live roles */
  --success: var(--eo-success);
  --warning: var(--eo-warning);
  --error: var(--eo-error);
  --info: var(--eo-info);

  /* — Type families — */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  /* — Type scale (fluid where it matters) — */
  --text-xs: 0.8125rem; /* 13px */
  --text-sm: 0.9375rem; /* 15px */
  --text-base: 1.0625rem; /* 17px — body default */
  --text-lg: 1.1875rem; /* 19px */
  --text-xl: 1.375rem; /* 22px */
  --text-2xl: 1.75rem; /* 28px */
  --text-3xl: 2.375rem; /* 38px */
  --text-4xl: clamp(2.5rem, 5vw, 3.5rem);
  --text-display: clamp(2.75rem, 7vw, 5.75rem);

  /* line-height */
  --leading-tight: 1.08; /* display / hero */
  --leading-snug: 1.25; /* headings */
  --leading-body: 1.65; /* prose */

  /* letter-spacing */
  --track-display: -0.02em;
  --track-tight: -0.01em;
  --track-label: 0.14em; /* uppercase eyebrows / labels */

  /* weight */
  --weight-reg: 400;
  --weight-med: 500;
  --weight-semi: 600;
  --weight-bold: 700;

  /* — Spacing rhythm (8px 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-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px; /* RULE (c): CTAs only */

  /* — Elevation (soft, warm-tinted) — */
  --shadow-sm:
    0 1px 2px rgba(24, 21, 46, 0.05), 0 1px 3px rgba(24, 21, 46, 0.06);
  --shadow-md:
    0 4px 12px rgba(24, 21, 46, 0.07), 0 2px 4px rgba(24, 21, 46, 0.05);
  --shadow-lg:
    0 18px 40px rgba(24, 21, 46, 0.1), 0 6px 14px rgba(24, 21, 46, 0.06);
  --glow:
    0 0 0 1px rgba(54, 182, 245, 0.25), 0 8px 30px rgba(54, 182, 245, 0.28);

  /* — Focus ring (consume on every interactive :focus-visible) —
     Inner ring uses the element/page bg to carve a gap, outer ring
     is the accent. 3px gap + 2px accent = visible on any surface. */
  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent);

  /* — Z-index scale — */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* — Containers — */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1120px;
  --container-2xl: 1280px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --maxw: 1120px; /* legacy alias == --container-xl */

  /* — Breakpoints (for reference in JS/container queries; @media needs literals) — */
  --bp-sm: 520px;
  --bp-md: 760px;
  --bp-lg: 900px;
  --bp-xl: 1120px;

  /* — Motion — */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-orbit: 4s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* — Form / control tokens — */
  --control-h-sm: 36px;
  --control-h-md: 44px; /* default touch target floor */
  --control-h-lg: 52px;
  --control-min-tap: 48px; /* CTA / primary action min height */

  --input-bg: var(--surface);
  --input-fg: var(--fg);
  --input-border: var(--border-ui);
  --input-border-hover: var(--eo-border-strong);
  --input-border-focus: var(--accent);
  --input-border-error: var(--error);
  --input-placeholder: var(--faint);
  --input-radius: var(--r-sm);
  --input-pad-x: var(--s-3);
  --input-pad-y: var(--s-2);
  --input-font: var(--text-base); /* >=16px equiv to stop iOS zoom */
  --input-disabled-bg: var(--surface-2);

  --field-gap: var(--s-2); /* label → control */
  --field-stack: var(--s-5); /* field → next field */
  --field-label-size: var(--text-sm);
  --field-label-weight: var(--weight-semi);
  --field-hint-size: var(--text-xs);
  --field-hint-color: var(--muted);
  --field-error-color: var(--error);
}

html[data-theme="dark"] {
  --bg: var(--eo-deep-space);
  --surface: var(--eo-d-surface);
  --surface-2: var(--eo-d-surface-2);
  --fg: var(--eo-d-text);
  --muted: var(--eo-d-muted);
  --faint: #807ca0;
  --border: var(--eo-d-border);
  --border-ui: var(--eo-d-border-ui);

  /* On dark, aurora-glow becomes the legible accent for text + icons */
  --accent: var(--eo-aurora-glow);
  --accent-text: var(--eo-aurora-glow);
  --accent-icon: var(--eo-aurora-glow);
  --on-accent: var(--eo-deep-space); /* RULE (b): glow fill → deep-space text */
  --on-glow: var(--eo-deep-space);

  /* state roles use the dark-legible variants for TEXT */
  --success: var(--eo-success-d);
  --warning: var(--eo-warning-d);
  --error: var(--eo-error-d);
  --info: var(--eo-info-d);

  --input-disabled-bg: var(--eo-indigo-700);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
}

/* — Reduced motion: zero out durations, restore instant scroll — */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-orbit: 0ms;
  }
  html {
    scroll-behavior: auto;
  }
}