/* Roki — generated from tokens.json */
:root, [data-theme="light"] {
  --RokiRed: #8a0000; /* The brand red. Exact ink of every red logo file. Headline accent words on light grounds ("WRONG"), SHOP NOW on light, logo in red. On white it reads 10:1. Never as text on ink — it falls to 2:1 there; use signal-red instead. */
  --signal-red: #d52828; /* Sales red. Full-width CTA bars, promo tags (BLACK FRIDAY), the comic kicker line on black ("STILL THINKING ABOUT IT?"). White text on it holds 5:1. As text on ink it is 4:1, so only at 24px+ there. */
  --promo-yellow: #ffea00; /* Offer lines only ("BUY 3 GET 1 FREE"), on ink. Never on white or studio-grey — it disappears. One yellow line per ad at most. 16:1 on ink. */
  --ink: #080808; /* Near-black ground of the dark ads and the text colour of light ones. Logo black files sit on paper or studio-grey. */
  --paper: #ffffff; /* White ground of text-led ads ("Everything a cheap wrap gets wrong"), callout boxes, and white text on ink or photography. */
  --studio-grey: #e3e6e7; /* The flat-lay backdrop grey sampled from product shots. Ground for product-led ads; ink text on it holds 16:1. */
  --ink-muted: #5a5a5a; /* Secondary text and fine print on paper and studio-grey (6.9:1 on paper). Not on ink. */
  --surface: var(--paper); /* Default ground for a layout in each theme. */
  --on-surface: var(--ink); /* Headlines and body on surface in either theme. */
  --accent: var(--RokiRed); /* The one accent word or kicker line per layout. RokiRed on light, signal-red on dark (24px+ only). */
}
[data-theme="dark"] {
  --surface: var(--ink);
  --on-surface: var(--paper);
  --accent: var(--signal-red);
}
:root {
  --space-1: 16px; /* Gap between a headline and its CTA. */
  --space-2: 32px; /* Gap between stacked blocks inside an ad. */
  --space-3: 60px; /* Outer margin of a 1080px ad — logos and headlines sit on this line. */
  --space-4: 96px; /* Top margin above the first headline line. */
  --radius-none: 0; /* Everything. Roki is square: CTA bars, tags, callout boxes, photo frames. */
  --radius-patch: 6px; /* Only when drawing a wrap's velcro patch or a sticker shape. */
  --border-frame: 3px; /* White frame round photos in a collage, and the ink frame of callout boxes and code chips. */
  --border-panel: 8px; /* Manga panel gutter / frame weight. */
  --font-display: "Druk Wide", "Arial Black", sans-serif;
  --font-comic: "Anime Ace", "Comic Sans MS", cursive;
  --font-body: Poppins, "Helvetica Neue", Arial, sans-serif;
  --text-headline-xl: 700 88px/0.92 var(--font-display); /* Wide all-caps headline, 2–3 lines, on a 1080px-wide ad. */
  --text-headline-l: 700 64px/0.95 var(--font-display); /* Offer stacks and secondary headlines. */
  --text-headline-condensed: 700 72px/0.95 var(--font-display); /* Punchline headlines over photography, 2 lines, white on dark shots or ink on studio-grey. */
  --text-headline-stack: 700 150px/0.92 var(--font-display); /* One word per line, stacked down the left third (the "TO THE TOP" layout). */
  --text-comic-kicker: 700 32px/1.1 var(--font-comic); /* Manga-lettering kicker above a headline, or inside callout boxes. */
  --text-cta: 700 28px/1.1 var(--font-body); /* Bare all-caps CTA under a headline, no button shape. Poppins Bold — Poppins carries anything Druk Wide and Anime Ace aren't right for. */
  --text-body: 400 34px/1.3 var(--font-body); /* One or two lines of supporting copy, sentence case. */
  --text-caption: 400 24px/1.3 var(--font-body); /* Footer line opposite the logo. */
}
.headline-xl {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -1px;
}
.headline-l {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0;
}
.headline-condensed {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0;
}
.headline-stack {
  font-family: var(--font-display);
  font-size: 150px;
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: 0;
}
.comic-kicker {
  font-family: var(--font-comic);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}
.cta {
  font-family: var(--font-body);
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-body);
  font-size: 34px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-body);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Druk Wide";
  src: url("fonts/DrukWide-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anime Ace";
  /* Roki OS app: points at the italic cut, the only Anime Ace file supplied.
     The design system names fonts/AnimeAce-Bold.ttf. */
  src: url("fonts/AnimeAce-Italic.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}