/* ============================================================
   Character Design System — design tokens
   Colours · Type · Spacing · Radii · Shadows · Motion
   Single source of truth. Override at :root when you need to.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  /* ---------- Colour ----------------------------------------- */
  --ink:          #0A0A0A;
  --ink-2:        #4A4A4A;
  --ink-3:        #9A9A9A;
  --paper:        #FFFFFF;
  --paper-2:      #F7F6F4;
  --rule:         #ECECEC;

  --signal:       #ED1B24;   /* the Character red */
  --signal-deep:  #B7141B;

  --shadow-ink:   #0F1014;   /* dark embed panel surface */
  --shadow-ink-2: #1B1D22;

  --tg-blue:      #2AABEE;   /* only on dark embed cards (ADD CTA) */

  /* Semantic re-aliases */
  --fg:           var(--ink);
  --fg-2:         var(--ink-2);
  --fg-3:         var(--ink-3);
  --bg:           var(--paper);
  --bg-2:         var(--paper-2);
  --accent:       var(--signal);
  --accent-press: var(--signal-deep);

  /* ---------- Type families --------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --font-text:    "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (px) ------------------------------- */
  --type-hero:     96px;
  --type-display:  56px;
  --type-h1:       36px;
  --type-h2:       24px;
  --type-h3:       18px;
  --type-tab:      22px;
  --type-body:     16px;
  --type-small:    14px;
  --type-tag:      11px;
  --type-numeral:  32px;

  /* ---------- Spacing (8-pt baseline) ----------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-24:  96px;

  /* ---------- Radii ---------------------------------------- */
  --r-sm:     6px;
  --r-md:     12px;
  --r-lg:     20px;
  --r-figure: 28px;
  --r-pill:   999px;

  /* ---------- Shadows -------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 2px 6px rgb(0 0 0 / 0.04);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.08), 0 2px 4px rgb(0 0 0 / 0.04);

  /* ---------- Motion --------------------------------------- */
  --ease:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast:  120ms;
  --t-base:  220ms;
  --t-slow:  420ms;

  /* ---------- Layout --------------------------------------- */
  --content-max: 1120px;
  --gutter:      64px;
  --numeral-col: 64px;
}

/* ============================================================
   Element defaults — apply by giving root/container `.character`
   ============================================================ */

.character,
body.character {
  font-family: var(--font-text);
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "tnum" 0;
}

.character h1, .character .h-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--type-hero);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.character .h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-display);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;
}
.character h2, .character .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-h1);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}
.character h3, .character .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.character h4, .character .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h3);
  line-height: 1.25;
  margin: 0;
}

.character p, .character .body {
  font-size: var(--type-body);
  line-height: 1.5;
  margin: 0;
  text-wrap: pretty;
  color: var(--fg);
}
.character .body-2,
.character .meta {
  font-size: var(--type-small);
  line-height: 1.45;
  color: var(--fg-2);
}
.character .tag {
  font-size: var(--type-tag);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.character .numeral {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--type-numeral);
  line-height: 1.0;
  font-variant-numeric: tabular-nums;
  color: var(--fg-3);
}
.character .tab {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-tab);
  line-height: 1.0;
  letter-spacing: -0.01em;
}
.character .tab.is-active {
  color: var(--accent);
  text-transform: uppercase;
}

.character a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.character a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.character hr,
.character .rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

.character .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-body);
  line-height: 1.0;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  background: var(--ink);
  color: var(--paper);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.character .btn:hover { transform: translateY(-1px); }
.character .btn:active { transform: translateY(0) scale(0.98); }

.character .btn-signal {
  background: var(--signal);
  color: var(--paper);
}
.character .btn-signal:active { background: var(--signal-deep); }

.character .btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 11px 21px;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.character .btn-add {
  background: var(--tg-blue);
  color: #fff;
  padding: 8px 16px;
  font-size: var(--type-tag);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.character :focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

.character .card-light {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.character .card-light:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.character .card-dark {
  background: var(--shadow-ink);
  border-radius: var(--r-lg);
  color: var(--paper);
}

.character .figure-tile {
  background: var(--paper-2);
  border-radius: var(--r-figure);
  overflow: hidden;
}