/* =============================================================
   Runwai Design System — Tokens
   Single source of truth for color, type, spacing, and components.
   "An editorial, gallery-grade marketing system."
   ============================================================= */

/* -------- Fonts ----------------------------------------------- */
/* abcNormal is proprietary. We substitute Inter (-0.02em tracking
   on display sizes) per the spec's Note on Font Substitutes. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Colors --------------------------------------- */
  /* Brand */
  --color-primary: #000000;
  --color-on-primary: #ffffff;

  /* Text ladder (ink → ash) */
  --color-ink: #030303;
  --color-ink-soft: #1a1a1a;
  --color-graphite: #404040;
  --color-slate: #676f7b;
  --color-slate-soft: #727a85;
  --color-mute: #6b7280;
  --color-stone: #939393;
  --color-ash: #999999;

  /* Surface */
  --color-canvas: #ffffff;
  --color-canvas-warm: #fefefe;
  --color-hairline: #e7eaf0;
  --color-hairline-soft: #c9ccd1;
  --color-surface-cool: #d0d4d4;
  --color-scrim: #1a1a1a;
  --color-footer: #030303;

  /* Semantic shortcuts */
  --fg-1: var(--color-ink);          /* primary text */
  --fg-2: var(--color-ink-soft);     /* secondary text */
  --fg-3: var(--color-graphite);     /* body */
  --fg-4: var(--color-slate);        /* tertiary */
  --fg-5: var(--color-stone);        /* placeholder, fine print */
  --fg-on-dark: var(--color-on-primary);

  --bg-1: var(--color-canvas);
  --bg-2: var(--color-canvas-warm);
  --bg-feature: var(--color-hairline);
  --bg-scrim: var(--color-scrim);
  --bg-footer: var(--color-footer);

  --rule: var(--color-hairline);
  --rule-strong: var(--color-hairline-soft);

  /* ---------- Type ---------------------------------------- */
  --font-sans: 'Inter', 'abcNormal', 'abcNormal Fallback', -apple-system,
               BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Sizes */
  --fs-display:      48px;
  --fs-display-sm:   40px;
  --fs-heading-md:   36px;
  --fs-heading-sm:   24px;
  --fs-subtitle:     20px;
  --fs-body:         16px;
  --fs-link-sm:      14px;
  --fs-meta:         13px;
  --fs-micro:        11px;

  /* Line heights */
  --lh-display: 1;
  --lh-tight:   1.3;
  --lh-link:    1.43;
  --lh-body:    1.5;

  /* Tracking */
  --tr-display:   -1.2px;
  --tr-display-sm:-1px;
  --tr-heading:   -0.9px;
  --tr-tight:     -0.16px;
  --tr-meta:      -0.26px;
  --tr-eyebrow:   0.35px;
  --tr-micro:     0.2px;

  /* ---------- Spacing ------------------------------------- */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;
  --sp-section:    64px;
  --sp-section-lg: 96px;

  /* ---------- Radius -------------------------------------- */
  --r-none: 0px;
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   16px;
  --r-full: 9999px;

  /* ---------- Layout -------------------------------------- */
  --container-max: 1280px;
  --nav-height:    64px;
  --button-height: 40px;
}

/* =============================================================
   Base typography
   Single face, every level. Hierarchy via size + tracking.
   ============================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display tier — editorial page-level headlines */
.t-display {
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
}

.t-display-sm {
  font-size: var(--fs-display-sm);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display-sm);
  color: var(--fg-1);
}

/* Headings */
.t-heading-md, h1 {
  font-size: var(--fs-heading-md);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--tr-heading);
  color: var(--fg-1);
}

.t-heading-sm, h2 {
  font-size: var(--fs-heading-sm);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: 0;
  color: var(--fg-1);
}

.t-subtitle, h3 {
  font-size: var(--fs-subtitle);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: 0;
  color: var(--fg-2);
}

/* Body */
.t-body, p {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg-3);
}

.t-body-strong {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--fg-1);
}

.t-body-tight {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-3);
}

/* Small */
.t-link-sm, a.t-link-sm {
  font-size: var(--fs-link-sm);
  font-weight: 600;
  line-height: var(--lh-link);
  color: var(--fg-1);
  text-decoration: none;
}

.t-meta {
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-meta);
  color: var(--fg-4);
}

/* Uppercase tiers — reserved for two roles */
.t-eyebrow {
  font-size: var(--fs-link-sm);
  font-weight: 500;
  line-height: var(--lh-link);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-micro-caps {
  font-size: var(--fs-micro);
  font-weight: 450;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--fg-4);
}

.t-button {
  font-size: var(--fs-link-sm);
  font-weight: 600;
  line-height: var(--lh-link);
  letter-spacing: 0;
}

/* =============================================================
   Buttons — every primary action is the same black pill.
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xs);
  height: var(--button-height);
  padding: 0 var(--sp-lg);
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: var(--fs-link-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 160ms ease, background-color 160ms ease,
              color 160ms ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover  { opacity: 0.85; }
.btn-primary:active { opacity: 0.7; }

.btn-primary-on-dark {
  background: var(--color-on-primary);
  color: var(--color-primary);
}
.btn-primary-on-dark:hover  { opacity: 0.85; }
.btn-primary-on-dark:active { opacity: 0.7; }

.btn-ghost {
  background: var(--color-canvas);
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}
.btn-ghost:hover  { background: var(--color-ink); color: var(--color-on-primary); }

.btn-text-link {
  height: auto;
  padding: var(--sp-xxs);
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--color-ink);
}
.btn-text-link:hover { text-decoration: underline; }

/* =============================================================
   Rules & dividers
   ============================================================= */
.hr-hairline      { border: 0; border-top: 1px solid var(--rule); }
.hr-hairline-soft { border: 0; border-top: 1px solid var(--rule-strong); }