/* ============================================================
   Eclipse Cyber Technologies — Design Tokens
   Single source of truth for color, type, spacing, and motion.
   Dark graphite is the default design language.
   ============================================================ */

:root {
  /* ---------- Brand palette ---------- */
  --graphite-900: #111418;
  --graphite-800: #1A1F24;
  --graphite-700: #262D35;
  --stone-100: #E9E6DF;
  --stone-60: #B8B1A4;
  --gold-500: #B38A4A;
  --gold-300: #D2B278;
  --slate-blue: #51657A;

  /* ---------- Semantic color ---------- */
  --bg: var(--graphite-900);
  --bg-raised: var(--graphite-800);
  --bg-overlay: var(--graphite-700);
  --text: var(--stone-100);
  --text-muted: var(--stone-60);
  --accent: var(--gold-500);
  --accent-soft: var(--gold-300);
  --detail: var(--slate-blue);

  --line: rgba(233, 230, 223, 0.10);
  --line-strong: rgba(233, 230, 223, 0.20);
  --line-gold: rgba(179, 138, 74, 0.40);
  --ink-on-gold: #15120C;

  /* ---------- Typography ---------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Instrument Sans", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 0.8125rem;   /* 13px — mono labels, footnotes */
  --text-sm: 0.9375rem;   /* 15px — secondary copy */
  --text-base: 1.0625rem; /* 17px — body */
  --text-lg: 1.25rem;     /* 20px — lede paragraphs */
  --text-xl: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);   /* card / sub heads */
  --text-2xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);      /* section heads */
  --text-3xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);    /* page heads */
  --text-hero: clamp(2.5rem, 1.7rem + 4.2vw, 4.25rem);   /* hero display */

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.65;

  --tracking-caps: 0.14em;
  --tracking-wide: 0.06em;

  /* ---------- Spacing ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --section-pad: clamp(4.5rem, 5rem + 4vw, 8rem);
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Shape & elevation ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-raise: 0 1px 0 rgba(233, 230, 223, 0.04) inset,
                  0 16px 40px rgba(0, 0, 0, 0.35);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;
}