/* =========================================================================
   Momiji — brand foundation
   Built on the Loopwise design system (ink-on-paper, Geist, mono eyebrows,
   hairline cards, dotted grid) with the single accent reskinned lime → maple.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --ink:        #0A0A0A;
  --paper:      #FAFAF7;
  --paper-pure: #FFFFFF;

  /* Warm-grey neutrals */
  --n-50:  #F5F5F2; --n-100: #ECECE7; --n-150: #DEDEDA; --n-200: #D2D2CD;
  --n-300: #B5B5AF; --n-400: #8E8E88; --n-500: #6B6B66; --n-600: #4A4A46;
  --n-700: #2F2F2C; --n-800: #1C1C1A; --n-900: #0F0F0E;

  /* Accent — maple. Replaces Loopwise lime in every accent role:
     CTAs, live/active states, the REPL cursor, "agent"-style pills. */
  --maple:      #D23B2B;   /* primary maple-red */
  --maple-ink:  #FFFFFF;   /* text sitting ON maple */
  --maple-deep: #9E1F16;   /* pressed / deep */
  --maple-soft: #FBE7E2;   /* faint wash (light) */
  --ruby:       #A8203A;   /* deeper ruby — the "Ruby" lineage */
  --amber:      #DD8B2B;   /* autumn companion */
  --gold:       #C99A2E;

  /* Semantic */
  --success: #3DAA5A; --warning: #E8A33D; --danger: #D8483A; --info: var(--ink);

  /* Surface aliases */
  --bg: var(--paper); --bg-elev: var(--paper-pure); --bg-muted: var(--n-50);
  --fg: var(--ink); --fg-muted: var(--n-500); --fg-subtle: var(--n-400);
  --border: var(--n-200); --border-strong: var(--n-300); --divider: var(--n-150);

  /* Type */
  --font-sans: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --t-12:12px; --t-14:14px; --t-16:16px; --t-20:20px; --t-25:25px;
  --t-31:31px; --t-39:39px; --t-49:49px; --t-61:61px; --t-76:76px;
  --t-96:96px; --t-120:120px;
  --lh-tight:1.1; --lh-display:1.15; --lh-body:1.55; --lh-mono:1.5;
  --tr-display:-0.02em; --tr-body:0; --tr-mono:0.02em; --tr-eyebrow:0.08em;
  --w-regular:400; --w-medium:500; --w-semibold:600;

  /* Spacing — 4px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* Radius */
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-pill:9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10,10,10,0.04);
  --shadow-md: 0 8px 24px -8px rgba(10,10,10,0.12);
  --shadow-lg: 0 24px 64px -16px rgba(10,10,10,0.18);
  --shadow-focus: 0 0 0 3px rgba(210,59,43,0.40);

  /* Motion */
  --ease: cubic-bezier(0.2,0,0,1);
  --dur-fast:100ms; --dur:150ms; --dur-slow:220ms;

  /* Layout */
  --content-max:1200px; --read-max:680px; --nav-h:64px;
}

[data-theme="dark"] {
  --ink:        #FAFAF7;
  --paper:      #0E0C0B;     /* warm near-black, faint maple undertone */
  --paper-pure: #000000;
  --n-50:#1A1715; --n-100:#211E1B; --n-150:#2B2724; --n-200:#3B3530;
  --n-300:#544E48; --n-400:#7C746C; --n-500:#A39A90; --n-600:#C4BBB1;
  --n-700:#E0D8CF; --n-800:#ECE6DE; --n-900:#F5F0E9;
  --maple:      #F0594A;     /* brighter so it pops on dark */
  --maple-soft: #2A100B;
  --ruby:       #E2566E;
  --amber:      #ECA242;
  --shadow-md:  0 8px 24px -8px rgba(0,0,0,0.6);
  --shadow-lg:  0 24px 64px -16px rgba(0,0,0,0.7);
  --shadow-focus: 0 0 0 3px rgba(240,89,74,0.45);
}

/* ---- Base ---- */
*{ box-sizing:border-box; }
html{
  font-family:var(--font-sans); font-size:var(--t-16); line-height:var(--lh-body);
  color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body{ margin:0; }
h1,h2,h3,h4{ margin:0; letter-spacing:var(--tr-display); line-height:var(--lh-display); font-weight:var(--w-semibold); }
h1{ font-size:var(--t-61); } h2{ font-size:var(--t-39); } h3{ font-size:var(--t-25); }
h4{ font-size:var(--t-20); font-weight:var(--w-medium); letter-spacing:-0.01em; }
p{ margin:0; }

code,kbd,samp,pre,.mono{ font-family:var(--font-mono); font-feature-settings:"ss01","cv11"; }
.eyebrow{
  font-family:var(--font-mono); font-size:var(--t-12); font-weight:var(--w-medium);
  text-transform:uppercase; letter-spacing:var(--tr-eyebrow); color:var(--fg-muted);
}
a{ color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
   transition:text-decoration-thickness var(--dur) var(--ease); }
a:hover{ text-decoration-thickness:2px; }
a.plain,a.btn{ text-decoration:none; }
::selection{ background:var(--maple); color:var(--maple-ink); }
:focus-visible{ outline:none; box-shadow:var(--shadow-focus); border-radius:var(--r-sm); }

/* ---- Shared components ---- */
.container{ max-width:var(--content-max); margin:0 auto; padding:0 var(--s-6); }

.btn{
  font-family:var(--font-sans); font-size:var(--t-14); font-weight:var(--w-medium);
  height:44px; padding:0 var(--s-5); border-radius:var(--r-md); border:1px solid transparent;
  display:inline-flex; align-items:center; gap:var(--s-2); cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn .arr{ font-family:var(--font-mono); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:var(--n-800); }
.btn-primary:active{ transform:translateY(0.5px); }
.btn-maple{ background:var(--maple); color:var(--maple-ink); }
.btn-maple:hover{ background:var(--maple-deep); }
[data-theme="dark"] .btn-maple:hover{ background:var(--maple); filter:brightness(1.12); }
.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--border); }
.btn-ghost:hover{ background:var(--n-100); border-color:var(--border-strong); }

.pill{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-mono); font-size:var(--t-12); letter-spacing:var(--tr-mono);
  height:26px; padding:0 var(--s-3); border-radius:var(--r-pill); border:1px solid var(--border);
  color:var(--fg-muted);
}
.pill-live{ border-color:var(--maple); color:var(--maple); }
.pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--maple); }

.card{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-md); }
.card:hover{ border-color:var(--border-strong); }

.leaf{ display:inline-block; color:var(--maple); }
.leaf svg{ display:block; }

/* Dotted grid background (hero / empty states) */
.dotgrid{
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Hairline divider */
.rule{ height:1px; background:var(--divider); border:0; }

/* [data-reveal] kept as a hook; content is always visible (no fragile
   hide-then-animate that can get stuck in non-animating render contexts). */
[data-reveal]{ opacity:1; }

/* ---- Code syntax theme (maple-tinted) ---- */
.tok-com{ color:var(--n-400); font-style:italic; }
.tok-kw{ color:var(--maple); }
.tok-str{ color:var(--amber); }
[data-theme="dark"] .tok-str{ color:#E7B26A; }
.tok-num{ color:var(--ruby); }
.tok-cls{ color:var(--fg); font-weight:var(--w-medium); }
.tok-fn{ color:var(--n-600); }
.tok-var{ color:var(--n-500); }
.tok-punct{ color:var(--n-400); }

/* ---- REPL / playground ---- */
.repl{
  border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg-elev); box-shadow:var(--shadow-md); display:flex; flex-direction:column;
}
.repl-bar{
  display:flex; align-items:center; gap:var(--s-3); height:42px; padding:0 var(--s-4);
  border-bottom:1px solid var(--border); background:var(--bg-muted);
}
.repl-dots{ display:flex; gap:6px; }
.repl-dots i{ width:10px; height:10px; border-radius:50%; background:var(--n-200); display:block; }
.repl-tabs{ display:flex; gap:2px; margin-left:var(--s-2); flex:1; }
.repl-tab{
  font-family:var(--font-mono); font-size:var(--t-12); letter-spacing:var(--tr-mono);
  color:var(--fg-muted); background:transparent; border:0; cursor:pointer;
  padding:6px 12px; border-radius:var(--r-sm); transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.repl-tab:hover{ background:var(--n-100); color:var(--fg); }
.repl-tab.active{ background:var(--ink); color:var(--paper); }
.repl-ver{ font-family:var(--font-mono); font-size:var(--t-12); color:var(--fg-subtle); }
@media (max-width:520px){ .repl-ver, .repl-dots{ display:none; } .repl-tabs{ margin-left:0; overflow-x:auto; } }
.repl-main{ display:grid; grid-template-columns:1fr 1fr; min-height:280px; }
@media (max-width:720px){ .repl-main{ grid-template-columns:1fr; } }
.repl-editor, .repl-out{ padding:var(--s-5); font-family:var(--font-mono); font-size:13.5px; line-height:1.6; overflow:auto; }
.repl-editor{ border-right:1px solid var(--divider); white-space:pre; tab-size:2; }
@media (max-width:720px){ .repl-editor{ border-right:0; border-bottom:1px solid var(--divider); } }
.repl-out{ background:var(--bg-muted); white-space:pre-wrap; color:var(--n-700); position:relative; }
.repl-out .label{ position:absolute; top:10px; right:14px; font-size:11px; letter-spacing:var(--tr-mono); color:var(--fg-subtle); text-transform:uppercase; }
.repl-out .ok{ color:var(--success); } .repl-out .trap{ color:var(--maple); }
.repl-foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-3) var(--s-4); border-top:1px solid var(--border); background:var(--bg-elev);
}
.repl-run{
  font-family:var(--font-sans); font-weight:var(--w-medium); font-size:var(--t-14);
  background:var(--maple); color:var(--maple-ink); border:0; border-radius:var(--r-md);
  height:36px; padding:0 18px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:filter var(--dur) var(--ease), background var(--dur) var(--ease);
}
.repl-run:hover{ background:var(--maple-deep); }
[data-theme="dark"] .repl-run:hover{ background:var(--maple); filter:brightness(1.12); }
.repl-run:disabled{ opacity:.5; cursor:default; }
.repl-timing{ font-family:var(--font-mono); font-size:var(--t-12); color:var(--fg-muted); display:flex; align-items:center; gap:14px; }
.repl-timing b{ color:var(--maple); font-weight:var(--w-medium); }
.repl-prog{ height:2px; background:var(--maple); width:0; transition:width .42s var(--ease); }
.cursor{ display:inline-block; width:8px; height:1.05em; background:var(--maple); vertical-align:text-bottom; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.caret{ animation:blink 1s steps(1) infinite; color:var(--maple); }