/* yoshi brand layer — shared across all yoshi.site pages (s01-902201, tokens v2 s01-54836e).
   THE token source-of-truth: primitives (neutrals + accent family) + semantic tokens +
   self-hosted fonts + lockup/nav/footer components. Pages keep LAYOUT css only — any
   :root color/font/motion token belongs HERE, not in a page.
   Lockup GEOMETRY is injected by egg-logo.js (golden grammar, per-visitor egg ink).
   System writeup: yoshi-platform/marketing/brand/logo/concepts/01-egg-wordmark/README.md */

/* ── fonts — SELF-HOSTED (first-party only: no fonts.googleapis request; GDPR/Law 25,
      matches visitor-theme.js "no third-party anything"). Latin subsets cover FR accents
      (U+0000-00FF). Instrument Sans is a VARIABLE font (wght 400–700). ── */
@font-face {
  font-family: "Instrument Sans";
  src: url(/fonts/instrument-sans-latin.woff2) format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url(/fonts/inter-tight-800-latin.woff2) format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens: primitives ─────────────────────────────────────────────────────── */
:root {
  /* neutrals — warm paper (the yoshi surface; static, NOT per-visitor) */
  --bg: #fdfbf7;
  --paper: #fffaf2;
  --paper2: #fffdf9;
  --line: #ece4d8;
  --fg: #2a2622;
  --ink-display: #211d19;
  --ink-body: #4f463c;   /* long-form reading text (legal pages) */
  --dim: #6e655a;
  /* accent family — DEFAULT = yoshi green. visitor-theme.js repaints these per visitor
     BEFORE first paint (oklch, hue from the visitor's egg key — see egg.js eggPalette).
     Contrast law (egg.js note): --accent (L=.56) is large-text/fills/borders ONLY (≥3:1);
     --accent-ink (L=.48) clears WCAG 4.5:1 on white AND accent-soft for ALL hues —
     body-size accent text + button backgrounds live there. */
  --accent: #18a55c;
  --accent-ink: #117340;
  --accent-soft: #d9f2e4;
  /* type */
  --ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  --display: "Instrument Sans", var(--ui);
  --brand-font: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", monospace;
  /* motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ── tokens: semantic (pages consume these; they map onto the primitives above,
      so the per-visitor repaint cascades through everything) ── */
:root {
  --link: var(--accent-ink);
  --cta-bg: var(--accent-ink);   /* AA with white text at every visitor hue */
  --cta-fg: #fff;
  --badge-bg: var(--accent-soft);
  --badge-fg: var(--accent-ink);
  --ok: var(--accent-ink);
  --err: #b3352b;
  --focus: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ── base type + a11y states (site-wide law) ── */
h1, h2, h3 { font-family: var(--display); }
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* ── shared atoms ── */
/* stroke-icon language (the .art svgs on why/how-it-works + replay cards) */
.art * { vector-effect: non-scaling-stroke; }
.ln { fill: none; stroke: var(--accent); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.fl { fill: var(--accent-soft); }
.badge { display: inline-block; font: 600 .72rem var(--ui); letter-spacing: .08em; text-transform: uppercase;
  color: var(--badge-fg); background: var(--badge-bg); padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1.1rem; }

/* ── lockups ── */
.lockup-domain, .lockup-lead, .lockup-idot {
  font-family: var(--brand-font); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1; color: var(--ink-display);
}
:root { --lockup-header-size: 1.3rem; --lockup-footer-size: 1.05rem; }
.lockup-domain, .lockup-lead { display: inline-flex; align-items: baseline; }
.lockup-idot { display: inline-block; position: relative; }
.brand .lockup-lead { font-size: var(--lockup-header-size); }
footer .lockup-idot, footer .lockup-domain { font-size: var(--lockup-footer-size); }
.lockup-domain svg, .lockup-lead svg, .lockup-idot svg { width: 100%; height: 100%; display: block; }

/* ── components: <yoshi-nav> / <yoshi-footer> ───────────────────────────────── */
.yn { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  flex-wrap: wrap; margin-bottom: 2.6rem; font: 600 .9rem var(--ui); }
.yn-links { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; justify-content: center; }
.yn a { color: var(--dim); text-decoration: none; transition: color .15s; }
.yn a:hover, .yn a[aria-current="page"] { color: var(--link); }
.yn a.try { color: var(--cta-fg); background: var(--cta-bg); padding: .36rem .8rem;
  border-radius: 999px; transition: filter .15s; }
.yn a.try:hover { filter: brightness(1.1); color: var(--cta-fg); }
.yn-brand { text-decoration: none; }
@media (max-width: 560px) {
  .yn { gap: .8rem 1rem; justify-content: center; }
  .yn-links { gap: .6rem .9rem; font-size: .85rem; }
}

/* footer v2 — a structured closing CARD (matches the site's card language):
   brand block + link columns + bottom bar. Markup in components/yoshi-footer.js. */
.yf { display: block; background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 18px; margin-top: 4rem; padding: 2.2rem 2.2rem 1.2rem;
  text-align: left; font: 500 .9rem var(--ui); color: var(--dim); }
.yf a { text-decoration: none; }
.yf-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem 2.4rem;
  padding-bottom: 1.9rem; }
.yf-brand .yf-lockup { font-size: 1.6rem; }
.yf-tagline { margin-top: .75rem; font: 600 .95rem/1.45 var(--display); color: var(--fg); }
.yf-col { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.yf-col h4 { font: 600 .68rem var(--ui); letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim); margin: 0 0 .25rem; }
.yf-col a { color: var(--ink-body); transition: color .15s; }
.yf-col a:hover { color: var(--link); }
.yf-cta { color: var(--cta-fg) !important; background: var(--cta-bg);
  padding: .42rem 1.05rem; border-radius: 999px; font-weight: 600; transition: filter .15s;
  display: inline-flex; align-items: center; min-height: 44px; }
.yf-cta:hover { filter: brightness(1.1); }
.yf-beta { font-size: .78rem; line-height: 1.45; color: var(--dim); margin: 0; }
.yf-bottom { display: flex; justify-content: space-between; align-items: center; gap: .8rem 1.2rem;
  flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.yf-left { display: inline-flex; align-items: center; gap: .7rem; }
.yf-tag { font-size: .78rem; opacity: .85; }
.yf-legal { display: flex; gap: 1rem; }
.yf-legal a { color: var(--dim); font-size: .82rem; }
.yf-legal a:hover { color: var(--link); }
@media (max-width: 760px) {
  .yf { padding: 1.8rem 1.4rem 1rem; }
  .yf-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .yf-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) { .yf-grid { grid-template-columns: 1fr } }