/* ===========================================================================
   Omyn Design System — R1 Primitives · primitives.css
   ---------------------------------------------------------------------------
   The primitive component layer. Built ENTIRELY on top of the R0 foundation
   tokens — every colour, radius, spacing, shadow and type value traces back to
   a `--token` defined in ds-r0/tokens.css. No raw hex, no hardcoded pixels
   except where R0 left a gap (those are listed in the R1-LOCAL block below and
   reported back for promotion into R0).

   Coverage: Button · CTAButton · Card · Badge · StatCard · Eyebrow ·
             Section · Input.

   Light is the default; dark inherits automatically through the R0
   [data-theme="dark"] token re-points — primitives never re-declare a colour
   per mode, they consume the semantic role tokens that R0 already flips.

   English only · no AI attribution · purple forbidden.
   =========================================================================== */

@import "tokens.css";

/* ===========================================================================
   R1-LOCAL ALIASES — the 4 gaps were PROMOTED INTO R0 2026-06-25.
   These names now alias the canonical R0 tokens (kept so R1 selectors below
   stay stable). New work should reference the R0 tokens directly.
   =========================================================================== */
:root {
  --r1-radius-input: var(--radius-12);              /* alias                   */
  --r1-tint-primary: var(--tint-primary);           /* → R0                    */
  --r1-tint-accent:  var(--tint-accent);            /* → R0                    */
  --r1-ring-primary: var(--focus-ring);             /* → R0                    */
  --r1-ghost-hover:  var(--ghost-hover);            /* → R0                    */
  --r1-on-brand:     var(--on-brand);               /* → R0                    */
  --r1-focus-ring:   var(--focus-ring-width);       /* → R0                    */
}

/* ===========================================================================
   BASE TYPOGRAPHY HOOK
   Primitives assume a body that already sets font + colour from R0. If used
   standalone, this gives a sane default without owning the page.
   =========================================================================== */
.omyn {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* Base body-text link colour. Consumes the theme-aware --color-primary-strong
   (light #0052CC / dark color-mix ≈#4D93FF) so inline <a> in prose stay AA-strong
   in BOTH themes. Pages not loading legacy-tokens.css (e.g. roadmap.html) would
   otherwise fall back to the UA default link blue — 2.08:1 on the dark surface.
   Low-specificity element rule: class-styled links (.cta, nav, chips) still win. */
a { color: var(--color-primary-strong); }
a:hover { color: var(--ink); }

/* ===========================================================================
   EYEBROW — DM Mono, tracked, uppercase, muted.
   =========================================================================== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-block;
}

/* ===========================================================================
   SECTION — vertical rhythm + content band + lateral padding (R0 grid).
   =========================================================================== */
.section {
  padding-block: var(--space-7);
  border-top: 1px solid var(--line);
}
.section__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--pad-desktop);
}
.section__title {
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.section__sub {
  color: var(--muted);
  margin-top: var(--space-2);
  max-width: 60ch;
}
@media (max-width: 720px) {
  .section__inner { padding-inline: var(--pad-mobile); }
}

/* ===========================================================================
   BUTTON — pill (radius 9999), DM Sans medium.
   Variants: --primary (blue fill), --ghost (outline).
   Sizes: default, --sm.
   =========================================================================== */
.btn {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 0.9rem;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s var(--ease),
              box-shadow 0.2s var(--ease),
              background 0.2s var(--ease),
              border-color 0.2s var(--ease),
              color 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--r1-focus-ring) var(--r1-ring-primary);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--r1-on-brand);
  box-shadow: var(--shadow-pill);
}
.btn--primary:hover { box-shadow: var(--shadow-card-hover); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
  background: var(--r1-ghost-hover);
}

.btn--sm { padding: var(--space-1) var(--space-3); font-size: 0.8rem; }
.btn .material-symbols-outlined { font-size: 18px; }

/* ===========================================================================
   CTABUTTON — the conversion-weight call to action. Larger, heavier presence
   than a plain Button. Variants: --primary (blue), --ghost (outline).
   =========================================================================== */
.cta {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lead);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s var(--ease),
              box-shadow 0.2s var(--ease),
              background 0.2s var(--ease),
              border-color 0.2s var(--ease),
              color 0.2s var(--ease);
}
.cta:active { transform: translateY(1px); }
.cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--r1-focus-ring) var(--r1-ring-primary);
}
.cta--primary {
  background: var(--color-primary);
  color: var(--r1-on-brand);
  box-shadow: var(--shadow-pill);
}
.cta--primary:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.cta--ghost {
  background: transparent;
  color: var(--color-primary-strong);
  border-color: var(--color-primary);
}
.cta--ghost:hover { background: var(--r1-tint-primary); }
.cta .material-symbols-outlined { font-size: 20px; }

/* ===========================================================================
   CARD — surface panel, radius 16, BLUE shadow (never black in light mode;
   R0 already swaps to a deep shadow under dark).
   =========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-16);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.card--interactive:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.card__title {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}
.card__body {
  color: var(--ink-2);
  margin-top: var(--space-3);
}

/* ===========================================================================
   BADGE — DM Mono pill chip. Default (neutral outline), --primary, --accent,
   plus status helpers that consume R0 status tokens (kept minimal, not brand).
   =========================================================================== */
.badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}
.badge--primary {
  color: var(--r1-on-brand);
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.badge--accent {
  color: var(--r1-on-brand);
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.badge--soft {
  color: var(--color-primary-strong);
  background: var(--r1-tint-primary);
  border-color: transparent;
}
.badge--success { color: var(--status-success); border-color: var(--status-success); }
.badge--warning { color: var(--status-warning); border-color: var(--status-warning); }
.badge--critical { color: var(--status-critical); border-color: var(--status-critical); }

/* ===========================================================================
   STATCARD — a Card specialised for a single proof figure. DM Mono figure,
   muted label, optional accent delta.
   =========================================================================== */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.stat-card__figure {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-stat);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-primary);
}
.stat-card__label {
  color: var(--muted);
  font-size: 0.86rem;
}
.stat-card__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-accent);
}
.stat-card__delta .material-symbols-outlined { font-size: 16px; }

/* ===========================================================================
   INPUT — text field + label. Radius 12, R0 line border, blue focus ring.
   =========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field__label {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: var(--fw-medium);
  color: var(--ink-2);
}
.input {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r1-radius-input);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input::placeholder { color: var(--muted); }
.input:hover { border-color: var(--color-primary); }
.input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--r1-focus-ring) var(--r1-ring-primary);
}
.input:disabled {
  background: var(--bg-2);
  color: var(--muted);
  cursor: not-allowed;
}

/* ===========================================================================
   Material Symbols baseline alignment (icons are R0-mandated picto system).
   =========================================================================== */
.material-symbols-outlined {
  font-variation-settings: 'opsz' 20, 'wght' 500, 'FILL' 0, 'GRAD' 0;
  vertical-align: middle;
}