/* O8Infinitum — color and type foundation
 *
 * This file defines the FOUNDATION tokens (raw color values, type families,
 * scale) and the SEMANTIC layer (h1, h2, p, etc.) that everything in the
 * design system consumes. Component-level styles live in their own files
 * and reference these vars.
 *
 * Brand direction: Orion's Atlas — deep cosmic navy + plasma orange +
 * nebula cyan, editorial sci-fi with serif-display + sans-body + mono.
 */

/* Pulls in the local Noto Serif (display + body) + OpenDyslexic (a11y)
 * families. Consuming HTML files load JetBrains Mono (mono) via
 * Google Fonts <link>. */
@import url("./fonts/fonts.css");

:root {
  /* — Color tokens (raw) — */
  --color-void:        #050715; /* deepest bg, "outer space" */
  --color-nebula:      #0a0f24; /* default bg */
  --color-card:        #111733; /* elevated surfaces */
  --color-card-2:      #1a2244; /* hover/pressed surfaces */

  /* Jewel-tone accent quartet (replaces plasma/cyan/supernova/pulsar). */
  --color-bayside:     #143C73; /* R34 navy — brand identity */
  --color-bayside-soft:#2C5BA0;
  --color-imperial:    #4D1A85; /* royal purple — rare emphasis */
  --color-imperial-soft:#7239B0;
  --color-ruby:        #C71F3A; /* primary CTA — warm action color */
  --color-ruby-soft:   #E0394F;
  --color-emerald:     #14724E; /* highlight / success — completes the quartet */
  --color-emerald-soft:#2E9670;

  --color-dust:        #7a6f96; /* muted purple-gray for tertiary text */
  --color-star:        #f1ece2; /* primary ink — warm paper-white */
  --color-star-dim:    rgba(241, 236, 226, 0.65);
  --color-star-faint:  rgba(241, 236, 226, 0.45);

  --color-rule:        rgba(241, 236, 226, 0.16);
  --color-rule-strong: rgba(241, 236, 226, 0.32);

  --color-success:     var(--color-emerald-soft);
  --color-danger:      #ff5a6a;
  --color-warning:     #E0B14A;
  --color-info:        var(--color-bayside-soft);

  /* — Semantic surfaces — */
  --bg:                var(--color-void);
  --bg-elev-1:         var(--color-nebula);
  --bg-elev-2:         var(--color-card);
  --bg-elev-3:         var(--color-card-2);

  --fg-1:              var(--color-star);        /* primary text */
  --fg-2:              var(--color-star-dim);    /* secondary text */
  --fg-3:              var(--color-dust);        /* tertiary / mono captions */
  --fg-faint:          var(--color-star-faint);  /* placeholder */

  /* Semantic accent roles — preserved across the palette refresh.
   * Ruby carries CTA energy (highest contrast on dark); Bayside is the
   * info/identity color; Emerald is highlight + success; Imperial is rare. */
  --accent:            var(--color-ruby);
  --accent-hover:      var(--color-ruby-soft);
  --accent-2:          var(--color-bayside-soft);
  --accent-3:          var(--color-emerald-soft);
  --accent-rare:       var(--color-imperial-soft);
  --accent-identity:   var(--color-bayside);  /* wordmark, identity-only */

  --border:            var(--color-rule);
  --border-strong:     var(--color-rule-strong);

  /* — Type families —
   * Noto Serif (self-hosted) carries both display and body — the brand's
   * single typeface. Mono stays separate; Noto Serif has no monospace cut
   * and code/eyebrows need one. */
  --font-display: "Noto Serif", "Iowan Old Style", "Times New Roman", serif;
  --font-body:    "Noto Serif", "Iowan Old Style", "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", "OpenDyslexic Mono", ui-monospace, "Cascadia Code", monospace;

  /* Accessibility stack — when [data-a11y="dyslexia"] is set on the root,
   * body + mono swap to OpenDyslexic. Display serif intentionally stays:
   * the wordmark and headlines keep the brand silhouette, the long reading
   * is the part that benefits. */
  --font-body-a11y: "OpenDyslexic", "OpenDyslexic Alta", var(--font-body);
  --font-mono-a11y: "OpenDyslexic Mono", var(--font-mono);

  /* — Type scale (px-based, deliberate jumps — not a strict modular ratio) — */
  --text-2xs:  10px;
  --text-xs:   11px;
  --text-sm:   13px;
  --text-md:   15px;   /* body default */
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;
  --text-7xl:  116px;
  --text-8xl:  168px;  /* wordmark hero */

  /* — Tracking (letter-spacing) — */
  --track-tight:  -0.03em;   /* display serif */
  --track-snug:   -0.015em;
  --track-normal: 0; /* @kind font */
  --track-wide:   0.04em;    /* sans labels */
  --track-eyebrow: 0.16em;   /* mono eyebrow */
  --track-mono-caps: 0.3em;  /* mono uppercase caption */

  /* — Line heights — */
  --lh-display: 0.92; /* @kind font */
  --lh-tight:   1.1;  /* @kind font */
  --lh-snug:    1.3;  /* @kind font */
  --lh-body:    1.55; /* @kind font */
  --lh-prose:   1.65; /* @kind font */
  --lh-mono:    1.6;  /* @kind font */

  /* — Spacing scale (4px base) — */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 96px;
  --space-12: 128px;

  /* — Corner radii — */
  --radius-xs:   2px;   /* terminal, code chips, tight cards */
  --radius-sm:   4px;   /* buttons, inputs — system default */
  --radius-md:   6px;   /* cards */
  --radius-lg:   12px;  /* hero panels, modals */
  --radius-xl:   20px;  /* feature cards */
  --radius-pill: 999px; /* pills, avatars */

  /* — Borders — */
  --border-w: 1px;
  --border-w-strong: 1.5px;

  /* — Shadows / elevation (works on dark bg) — */
  --shadow-1:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2:    0 6px 24px rgba(0, 0, 0, 0.5);
  --shadow-3:    0 16px 56px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 28px rgba(199, 31, 58, 0.40);   /* ruby CTA glow */
  --shadow-glow-cyan: 0 0 28px rgba(44, 91, 160, 0.40); /* bayside info glow */
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* — Motion — */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
  --ease-in:    cubic-bezier(0.6, 0.0, 0.9, 0.3); /* @kind other */
  --ease-glide: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur:        200ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */

  /* — Layout — */
  --maxw-prose: 64ch;
  --maxw-page:  1240px;

  color-scheme: dark;
}

/* — Accessibility mode swap — */
[data-a11y="dyslexia"] {
  --font-body: var(--font-body-a11y);
  --font-mono: var(--font-mono-a11y);
}

/* — Base reset for branded pages — */
.o8-page {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* — Semantic typography classes —
 * Use these as drop-ins; they're also wired to native h1–h6 inside .o8-page.
 */

.o8-eyebrow,
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: var(--track-mono-caps);
  text-transform: uppercase;
}

.o8-display,
.display-1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-8xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
}

.o8-h1,
.o8-page h1,
.h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: var(--text-6xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
  margin: 0;
}

.o8-h2,
.o8-page h2,
.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
  margin: 0;
}

.o8-h3,
.o8-page h3,
.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-snug);
  color: var(--fg-1);
  margin: 0;
}

.o8-h4,
.o8-page h4,
.h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-normal);
  color: var(--fg-1);
  margin: 0;
}

.o8-body,
.o8-page p,
.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
}

.o8-body-lg,
.body-lg {
  font-size: var(--text-lg);
  line-height: var(--lh-prose);
}

.o8-body-sm,
.body-sm {
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
}

.o8-caption,
.caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-3);
  letter-spacing: var(--track-eyebrow);
}

.o8-code,
.o8-page code,
.code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--accent-2);
  background: rgba(108, 220, 255, 0.08);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}

/* — Link default — */
.o8-page a,
.o8-link {
  color: var(--accent-2);
  text-decoration: none;
  text-underline-offset: 0.2em;
  border-bottom: 1px solid color-mix(in oklab, var(--accent-2) 35%, transparent);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.o8-page a:hover,
.o8-link:hover {
  color: var(--fg-1);
  border-bottom-color: var(--fg-1);
}

/* — Selection — */
.o8-page ::selection {
  background: var(--accent);
  color: var(--bg);
}