/* ==========================================================================
   03 · Ronin Neon Ink: token overrides (ui-designer)
   Magenta promoted to primary, teal secondary, almond-tinted paper, charcoal ink.
   Values only; names come from shared/css/design-system.css.

   WCAG contrast (WCAG 2.x relative luminance), LIGHT
     text-primary   #2A2420 on paper #EFE4DA ........ 12.23  AAA
     text-primary   #2A2420 on almond #D9BAA1 ........ 8.38  AAA
     text-secondary #50443C on paper #EFE4DA ......... 7.51  AAA
     text-secondary #50443C on almond #D9BAA1 ........ 5.14  AA
     text-secondary #50443C on plate #F4F2F1 ......... 8.43  AAA
     primary text   #C2185B on paper #EFE4DA ......... 4.69  AA
     primary text   #C2185B on plate #F4F2F1 ......... 5.26  AA
     button         #FFFFFF on #C2185B ............... 5.87  AA
     button hover   #FFFFFF on #A8144F ............... 7.30  AAA
     secondary text #17707A on paper #EFE4DA ......... 4.62  AA
     focus ring     #17707A on paper / almond ... 4.62 / 3.16  (>= 3:1 non-text)
     ink band       #EFE4DA on ink #2A2420 .......... 12.23  AAA
     band button    #141110 on #F05A9A ............... 5.94  AA
     band focus     #5FD3DC on ink #2A2420 ........... 8.63
     FAILS, do not use: #C2185B text on almond #D9BAA1 (3.21),
                        #2FB7C2 anything-text on paper (1.93), #C2185B on ink (2.61)
   DARK
     text-primary   #F4F2F1 on #141110 .............. 16.84  AAA
     text-secondary #B9ADA3 on #141110 / #1F1A17 / #2A2420 . 8.56 / 7.85 / 6.98  AAA
     primary text   #F05A9A on #141110 / #1F1A17 . 5.94 / 5.44  AA
     button         #141110 on #F05A9A ............... 5.94  AA
     button hover   #141110 on #F47AAE ............... 7.38  AAA
     secondary text #2FB7C2 on #141110 / #1F1A17 . 7.76 / 7.12  AAA
     focus ring     #5FD3DC on #141110 .............. 10.59
     ink band (inverted) #141110 on #F4F2F1 ......... 16.84  AAA
     band button    #FFFFFF on #C2185B ............... 5.87  AA
     FAILS, do not use: #F05A9A text on plate #F4F2F1 (2.84)
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces & text */
  --bg-primary: #EFE4DA;      /* almond-tinted paper */
  --bg-secondary: #D9BAA1;    /* almond block (cards, stat panel). Ink text only */
  --bg-elevated: #F4F2F1;     /* lifted surface; equals the PNG background */
  --text-primary: #2A2420;    /* ink */
  --text-secondary: #50443C;  /* AA on paper, almond and plate */
  --border-color: #C4AC99;    /* hairline rules only; card/poster borders use --text-primary */

  /* Brand */
  --primary-color: #C2185B;   /* refined magenta: buttons, links, numerals */
  --primary-contrast: #FFFFFF;
  --secondary-color: #17707A; /* teal, darkened for AA text on paper */
  --accent-color: #C2185B;    /* = primary; magenta is the one signal colour */
  --glow-color: #2FB7C2;      /* raw teal: HUD ticks, lines, glows. Never text */
  --focus-ring: #17707A;

  /* Shadows: flat print, tinted by ink */
  --shadow-sm: 0 1px 0 rgb(42 36 32 / 0.12);
  --shadow-md: 4px 4px 0 rgb(42 36 32 / 1);          /* offset "misregistered print" shadow */
  --shadow-lg: 8px 8px 0 rgb(42 36 32 / 1);          /* ink offset (menus, lifted panels) */
  --shadow-glow: 0 0 0 1px rgb(194 24 91 / 0.4), 0 0 20px rgb(194 24 91 / 0.22);

  /* Radius: poster = sharp */
  --radius-sm: 0;
  --radius-md: 2px;
  --radius-lg: 4px;

  /* Art placeholder */
  --art-placeholder-from: #F4F2F1;
  --art-placeholder-to: #E6D3C3;
  --art-silhouette: rgb(42 36 32 / 0.14);
}

/* Dark values, identical in both blocks */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-primary: #141110;      /* ink-black paper */
  --bg-secondary: #1F1A17;
  --bg-elevated: #2A2420;     /* cards/toggle on ink. The art plate is a literal #F4F2F1 in layout */
  --text-primary: #F4F2F1;
  --text-secondary: #B9ADA3;
  --border-color: #3A322C;
  --primary-color: #F05A9A;
  --primary-contrast: #141110;
  --secondary-color: #2FB7C2;
  --accent-color: #F05A9A;
  --glow-color: #2FB7C2;
  --focus-ring: #5FD3DC;
  --shadow-sm: 0 1px 0 rgb(0 0 0 / 0.5);
  --shadow-md: 4px 4px 0 rgb(47 183 194 / 0.55);
  --shadow-lg: 8px 8px 0 rgb(0 0 0 / 0.7);
  --shadow-glow: 0 0 0 1px rgb(240 90 154 / 0.45), 0 0 24px rgb(240 90 154 / 0.3);
  --art-placeholder-from: #F4F2F1;
  --art-placeholder-to: #E6D3C3;
  --art-silhouette: rgb(42 36 32 / 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-primary: #141110;
    --bg-secondary: #1F1A17;
    --bg-elevated: #2A2420;
    --text-primary: #F4F2F1;
    --text-secondary: #B9ADA3;
    --border-color: #3A322C;
    --primary-color: #F05A9A;
    --primary-contrast: #141110;
    --secondary-color: #2FB7C2;
    --accent-color: #F05A9A;
    --glow-color: #2FB7C2;
    --focus-ring: #5FD3DC;
    --shadow-sm: 0 1px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 4px 4px 0 rgb(47 183 194 / 0.55);
    --shadow-lg: 8px 8px 0 rgb(0 0 0 / 0.7);
    --shadow-glow: 0 0 0 1px rgb(240 90 154 / 0.45), 0 0 24px rgb(240 90 154 / 0.3);
    --art-placeholder-from: #F4F2F1;
    --art-placeholder-to: #E6D3C3;
    --art-silhouette: rgb(42 36 32 / 0.14);
  }
}

/* === Variant layout (builder) === */

/* Theme-dependent literals that have no shared token */
:root {
  --hero-bg: #F4F2F1;           /* light: hero is the art's own plate */
  --band-btn-bg: #F05A9A;       /* CTA band uses the other theme's magenta */
  --band-btn-text: #141110;
  --band-focus: #5FD3DC;
  --wordmark-stroke: rgb(42 36 32 / 0.9);
}
[data-theme="dark"] {
  --hero-bg: var(--bg-primary);
  --band-btn-bg: #C2185B; --band-btn-text: #FFFFFF; --band-focus: #17707A;
  --wordmark-stroke: rgb(244 242 241 / 0.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hero-bg: var(--bg-primary);
    --band-btn-bg: #C2185B; --band-btn-text: #FFFFFF; --band-focus: #17707A;
    --wordmark-stroke: rgb(244 242 241 / 0.35);
  }
}

/* ---------- Print-style shared overrides ---------- */
:focus-visible { outline-width: 3px; }
.site-header { position: relative; background: var(--hero-bg); backdrop-filter: none; border-bottom: 1.5px solid var(--text-primary); }
.btn { border-radius: var(--radius-md); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) ease, color var(--duration-fast) ease; }
.btn--primary:hover { background: #A8144F; transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--text-primary); }
[data-theme="dark"] .btn--primary:hover { background: #F47AAE; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--primary:hover { background: #F47AAE; } }
.btn:active { transform: translate(0, 0); box-shadow: none; }
.btn--secondary { border-width: 1.5px; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
a:not(.btn):not(.brand):not(.site-nav__link) { text-underline-offset: 4px; }

/* ---------- Hero ---------- */
.hero {
  background: var(--hero-bg);
  border-bottom: 1px solid var(--text-primary);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-8) var(--space-12);
}
.wordmark {
  position: absolute;
  inset: var(--space-8) 0 auto;
  display: grid;
  justify-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 25vw, 18rem);
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--wordmark-stroke);
  user-select: none;
  pointer-events: none;
}
.wordmark__o { position: relative; display: inline-block; }
.wordmark__o svg { position: absolute; inset: 8% 0; width: 100%; height: 84%; overflow: visible; }
.wordmark__o line {
  stroke: var(--primary-color); stroke-width: 6; vector-effect: non-scaling-stroke; stroke-linecap: square;
  stroke-dasharray: 200; stroke-dashoffset: 200;
  animation: slash 500ms var(--ease-out) 300ms forwards;
}
@keyframes slash { to { stroke-dashoffset: 0; } }

.hero__art { position: relative; z-index: 1; width: 85%; max-width: 24rem; margin-inline: auto; margin-top: 19vw; overflow: visible; }
.hero__tick {
  position: absolute; right: 2%; top: 46%;
  padding-left: 40px;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-secondary);
}
.hero__tick::before { content: ""; position: absolute; left: 0; top: 50%; width: 32px; height: 1px; background: var(--glow-color); }
.hero__art.is-missing .hero__tick { display: none; }
[data-theme="dark"] .hero__art { background: #F4F2F1; outline: 1px solid #F4F2F1; box-shadow: 8px 8px 0 var(--glow-color); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__art { background: #F4F2F1; outline: 1px solid #F4F2F1; box-shadow: 8px 8px 0 var(--glow-color); }
}

.hero__copy { position: relative; z-index: 2; display: grid; gap: var(--space-5); justify-items: start; }
.hero h1 { font-weight: 700; letter-spacing: -0.03em; max-width: 14ch; }
.hero .lead { color: var(--text-secondary); font-size: var(--text-lg); max-width: 44ch; }
.hero__kana { display: none; }

/* ---------- Numbered sections ---------- */
.section--rule { border-top: 1px solid var(--border-color); }
.numbered { display: grid; gap: var(--space-6); }
.numbered__num { display: flex; align-items: baseline; gap: var(--space-4); }
.num {
  font-family: var(--font-mono); font-weight: 500; font-size: clamp(3rem, 6vw, 5rem); line-height: 1;
  color: var(--primary-color); font-variant-numeric: tabular-nums;
  padding-bottom: var(--space-2);
  background: linear-gradient(var(--text-primary), var(--text-primary)) left bottom / 40px 2px no-repeat;
}
.numbered__body { display: grid; gap: var(--space-5); align-content: start; min-width: 0; }
.numbered__body h2 { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3rem); max-width: 18ch; }

.manifesto p { font-size: var(--text-lg); max-width: 62ch; color: var(--text-secondary); }
.manifesto p + p { margin-top: 0; }
.principles { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); font-family: var(--font-display); font-size: var(--text-2xl); }
.principles strong { font-weight: 700; color: var(--text-primary); }
.principles span { color: var(--primary-color); font-weight: 700; }

.moves { display: grid; margin-top: var(--space-4); }
.move { display: grid; gap: var(--space-2); align-content: start; padding-block: var(--space-6); border-top: 1.5px solid var(--text-primary); }
.move__index { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--primary-color); }
.move h3 { font-size: var(--text-3xl); font-weight: 700; }
.move p { color: var(--text-secondary); max-width: 32ch; }
.move__metric { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--secondary-color); letter-spacing: var(--tracking-mono); text-transform: uppercase; }

/* ---------- Use-case strip ---------- */
.strip-head { grid-template-columns: 1fr auto; align-items: end; }
.strip-nav { display: flex; gap: var(--space-2); }
.strip-nav[hidden] { display: none; }
.strip-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: transparent; color: var(--text-primary);
  border: 1.5px solid var(--text-primary); border-radius: 0;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.strip-btn svg { width: 20px; height: 20px; }
.strip-btn:hover:not(:disabled) { background: var(--text-primary); color: var(--bg-primary); }
.strip-btn:disabled { opacity: 0.35; cursor: default; }
.strip {
  margin-top: var(--space-10);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--strip-pad);
  --strip-pad: max(var(--gutter), calc((100vw - var(--container-xl)) / 2 + var(--gutter)));
  padding-block: var(--space-2) var(--space-6);
  scrollbar-width: thin;
}
ul.strip__list { display: flex; gap: var(--space-4); padding-inline: var(--strip-pad); width: max-content; }
.strip__list li { scroll-snap-align: start; width: min(80vw, 22rem); }
.poster {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4);
  aspect-ratio: 3 / 4;
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1.5px solid var(--text-primary);
  border-radius: var(--radius-sm);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.poster::after { content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 28px; background: var(--accent-color); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.poster:hover { transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--primary-color); }
.poster__num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-secondary); }
.poster h3 { margin-top: auto; font-size: var(--text-2xl); font-weight: 600; max-width: 12ch; }
.poster__out { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--secondary-color); text-transform: uppercase; letter-spacing: var(--tracking-mono); }
.strip { margin-top: var(--space-8); }

/* ---------- Proof ---------- */
.proof { display: grid; gap: var(--space-8); align-items: center; }
.proof__stat { display: grid; gap: var(--space-3); padding: var(--space-8); background: var(--bg-elevated); border: 1.5px solid var(--text-primary); }
.proof__big { font-family: var(--font-display); font-weight: 700; font-size: clamp(6rem, 18vw, 13rem); line-height: 0.85; letter-spacing: -0.04em; color: var(--primary-color); }
.proof__quote { display: grid; gap: var(--space-4); padding-left: var(--space-6); border-left: 2px solid var(--primary-color); }
.proof__quote blockquote p { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: var(--leading-snug); }
.proof__quote figcaption { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-secondary); }
.marks { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-10); margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--border-color); }
.marks li { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--text-secondary); opacity: 0.7; }

/* ---------- 05 Inverted ink band ---------- */
.band { background: var(--text-primary); color: var(--bg-primary); padding-block: var(--section-y); }
.band .eyebrow, .band .lead { color: color-mix(in srgb, var(--bg-primary) 80%, var(--text-primary)); }
.band .num { color: var(--band-btn-bg); background-image: linear-gradient(var(--bg-primary), var(--bg-primary)); }
.band .btn--primary { background: var(--band-btn-bg); color: var(--band-btn-text); }
.band .btn--primary:hover { background: var(--band-btn-bg); box-shadow: 4px 4px 0 var(--bg-primary); }
.band .btn--secondary { color: var(--bg-primary); border-color: var(--bg-primary); }
.band .btn--secondary:hover { background: var(--bg-primary); color: var(--text-primary); }
.band :focus-visible { outline-color: var(--band-focus); }

/* ---------- Footer ---------- */
.site-footer { padding-block: var(--space-10); font-size: var(--text-sm); }
.footer__inner { position: relative; display: grid; gap: var(--space-4); }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.footer__links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--text-primary); text-decoration: none; }
.footer__links a:hover { color: var(--primary-color); text-decoration: underline; }
.footer__legal { color: var(--text-secondary); }
.footer__vert { display: none; }

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .wordmark { -webkit-text-stroke-width: 2px; }
  .strip__list li { width: min(45vw, 22rem); }
}
@media (min-width: 768px) {
  .moves { grid-template-columns: repeat(3, 1fr); }
  .move { border-top: 0; border-left: 1.5px solid var(--text-primary); padding: 0 var(--space-6); }
  .move:first-child { border-left: 0; padding-left: 0; }
  .proof { grid-template-columns: 5fr 7fr; }
  .footer__inner { grid-template-columns: auto 1fr; align-items: center; }
  .footer__links { justify-content: flex-end; }
  .footer__legal { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-6);
    padding-block: var(--space-10) var(--space-12);
    min-height: min(calc(100svh - var(--header-h)), 54rem);
  }
  /* RONIN across the top, GRID behind the legs (bottom right); copy sits under RONIN */
  .wordmark { inset: var(--space-8) 0 var(--space-12); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; }
  .wordmark > span:last-child { align-self: flex-end; }
  .hero__art { grid-column: 6 / 12; grid-row: 1; width: 100%; max-width: 30rem; margin: 0 auto; align-self: center; }
  .hero__copy { grid-column: 1 / 6; grid-row: 1; padding-top: 16rem; }
  .hero__kana {
    display: block; grid-column: 12; grid-row: 1; align-self: start; justify-self: end;
    writing-mode: vertical-rl; letter-spacing: 0.3em; font-size: var(--text-sm); font-weight: 500;
    color: var(--text-secondary); opacity: 0.8; padding-top: 64px; position: relative; z-index: 2; margin: 0;
  }
  .hero__kana::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 48px; background: var(--glow-color); }

  .numbered { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
  .numbered__num { grid-column: 1 / 3; flex-direction: column; gap: var(--space-3); }
  .numbered__body { grid-column: 3 / 13; }
  .strip__list li { width: 22rem; }

  .footer__vert {
    display: block; position: absolute; right: 0; bottom: 0;
    writing-mode: vertical-rl; font-family: var(--font-mono); font-size: var(--text-xs);
    letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-secondary);
  }
  .footer__inner { padding-right: var(--space-10); }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark__o line { animation: none; stroke-dashoffset: 0; }
  .btn--primary:hover, .poster:hover { transform: none; }
}