/*
 * NEXONOMY · BASE STYLES
 * Resets, global defaults, and typographic primitives.
 * Imports tokens; every page imports this file.
 * No component styles here — those live in /styles/components/.
 */

@import './tokens.css';

/* ─── GOOGLE FONTS ───────────────────────────────────────────────────────── */
/* DM Sans — body face */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400;1,9..40,500&display=swap');
/* JetBrains Mono — record IDs, hashes, eyebrows */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* Satoshi — loaded via Fontshare CDN (CONFIRM: founder to verify license for enterprise use) */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap');


/* ─── RESET ─────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* the site is dark by design; declare it so phone dark/force-dark modes
     don't invert it to a white background. */
  color-scheme: dark;
}

body {
  background-color: var(--color-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-medium);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;   /* guard against incidental horizontal overflow */
}

img, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

ul, ol {
  list-style: none;
}


/* ─── LAYOUT PRIMITIVES ──────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
}

.section {
  padding-block: var(--section-py);
}

/* Alternate section — distinct ground via radial gradient */
.section--alt {
  background: var(--gradient-section);
}

/* Full-bleed: spans edge to edge */
.section--bleed {
  padding-inline: 0;
}


/* ─── TYPOGRAPHIC PRIMITIVES ─────────────────────────────────────────────── */

/*
 * Display — hero statement. Satoshi, tight tracking.
 * One italic accent word per view in var(--color-accent).
 */
.text-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.text-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-normal);
  color: var(--color-text-primary);
}

h2, .text-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

h3, .text-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

/* The single italic accent word — set in var(--color-accent), one per view */
em.accent {
  font-style: italic;
  color: var(--color-accent);
  font-family: var(--font-display);
}

/* Accent callout paragraph — larger secondary text in accent-purple */
.text-accent-callout {
  font-family: var(--font-display);
  font-size: var(--text-accent);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
}

/* Body */
p, .text-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-secondary);
}

/* Secondary text */
.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

/*
 * Mono eyebrow — tracked caps above sections.
 * Used for: section labels, record IDs, hashes.
 * No em or en dashes in copy. No eyebrow labels above heroes.
 */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--leading-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Record ID — DR-YYYY-NNNN in mono */
.record-id {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--weight-normal);
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

/* Hash — 7f3a · c91d */
.record-hash {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}


/* ─── SURFACE PRIMITIVES ─────────────────────────────────────────────────── */

/* Panel — lifted surface for cards and Record cards */
.panel {
  background-color: var(--color-surface-2);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
}

/* Panel with accent left rule — the Decision Record card motif */
.panel--record {
  background-color: var(--color-surface-0);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  padding: 24px;
}

/* Glass surface — backdrop blur, used for nav */
.glass {
  background: var(--color-nav);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border-radius: var(--radius-pill);
}

/* Hairline rule */
.rule {
  height: 1px;
  background: var(--color-border);
  border: none;
  width: 100%;
}

/* Accent rule — the thin left accent on Decision Record cards */
.rule--accent {
  height: 1px;
  background: var(--gradient-accent-line);
  border: none;
  width: 100%;
}


/* ─── BUTTON PRIMITIVES ──────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body);
  border-radius: var(--radius-card);
  padding: 9px 13px;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  cursor: pointer;
  border: none;
}

.btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Primary CTA — solid accent fill.
   Uses the deeper purple so white label text clears WCAG AA (≈6.2:1 vs ≈3.9:1
   on the lighter accent); the lighter --color-accent stays for text/lines/dots. */
.btn--primary {
  background: var(--color-accent-deep);
  color: var(--color-white);
  box-shadow: var(--shadow-cta);
}

/* Secondary — outlined */
.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  box-shadow: 0 0 0 1px var(--color-border);
}

/* Ghost — no border */
.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  padding-inline: 8px;
}

/* Keyboard focus — a visible ring on tab-focus only (mouse/touch clicks are
   unaffected). More-specific custom focus treatments (an-row, graph-node,
   dep-node, arch layers) override this by specificity. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}


/* ─── SIGNAL COLORS ──────────────────────────────────────────────────────── */

.text-affirm  { color: var(--color-affirm); }
.text-signal  { color: var(--color-signal); }
.text-caution { color: var(--color-caution); }

.badge-affirm  { background: rgba(16,185,129,0.12);  color: var(--color-affirm); }
.badge-signal  { background: rgba(240,77,101,0.12);  color: var(--color-signal); }
.badge-caution { background: rgba(245,165,36,0.12);  color: var(--color-caution); }


/* ─── PROTOTYPE BADGE ────────────────────────────────────────────────────── */
/*
 * Rendered on all proof blocks while PROOF_IS_PROTOTYPE === true.
 * See proof.config.ts and the Proof Brief.
 */
.prototype-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-caution);
  background: rgba(224,162,58,0.10);
  border: 1px solid rgba(224,162,58,0.25);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}


/* ─── UTILITY ────────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.no-scroll { overflow: hidden; }