/* ============================================================
   Tsuki Software — Colors & Type
   Foundation tokens. Import this first in any Tsuki artifact.
   ============================================================ */

/* ---------- Webfonts (self-hosted) ----------
   Files live in /fonts. See fonts/README.md for the download script
   if you need to re-fetch. Google Fonts CSS is kept as a fallback
   via <link> in each HTML shell so rendering never blocks. */
@font-face { font-family:'Space Grotesk';  font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 600; font-display:swap; src:url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:400 600; font-display:swap; src:url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype'); }
@font-face { font-family:'Noto Sans JP';   font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype'); }
@font-face { font-family:'Noto Serif JP';  font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/NotoSerifJP-VariableFont_wght.ttf') format('truetype-variations'), url('fonts/NotoSerifJP-VariableFont_wght.ttf') format('truetype'); }

:root {
  /* ---------- Brand core ---------- */
  --tsuki-moon:       #F5C518;  /* moon yellow — primary accent, cat eyes */
  --tsuki-moon-soft:  #E8D27A;  /* dimmed moon, for secondary accents */
  --tsuki-ink:        #0A0E1A;  /* night-sky ink, near black */
  --tsuki-ink-deep:   #05070F;  /* deepest night, backgrounds */
  --tsuki-indigo:     #1A2340;  /* ink blue, card surfaces */
  --tsuki-indigo-2:   #2A3556;  /* raised surfaces */
  --tsuki-washi:      #F3EEE3;  /* warm paper, light-mode bg */
  --tsuki-washi-2:    #E8E1D1;  /* secondary paper */
  --tsuki-sumi:       #1B1C1E;  /* sumi ink, light-mode fg */
  --tsuki-vermillion: #D93A2B;  /* torii red, rare alert accent */
  --tsuki-mist:       #8A95B2;  /* cool mist, muted fg on dark */
  --tsuki-dusk:       #5B6480;  /* dusk, borders on dark */

  /* ---------- Semantic (dark-mode default) ---------- */
  --bg-0:   var(--tsuki-ink-deep);     /* page */
  --bg-1:   var(--tsuki-ink);          /* section */
  --bg-2:   var(--tsuki-indigo);       /* card */
  --bg-3:   var(--tsuki-indigo-2);     /* raised */

  --fg-1:   #F3EEE3;                    /* primary text */
  --fg-2:   #B8C0D4;                    /* secondary text */
  --fg-3:   var(--tsuki-mist);          /* tertiary / captions */
  --fg-4:   var(--tsuki-dusk);          /* disabled / hint */

  --accent:       var(--tsuki-moon);
  --accent-soft:  var(--tsuki-moon-soft);
  --accent-fg:    var(--tsuki-ink-deep);

  --border-1:   rgba(243,238,227,0.08);
  --border-2:   rgba(243,238,227,0.16);
  --border-3:   rgba(245,197,24,0.40);  /* focus / active */

  --danger:   var(--tsuki-vermillion);
  --success:  #7BC47F;
  --warning:  #F5C518;
  --info:     #7CA5E0;

  /* ---------- Type stacks ---------- */
  --font-sans:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --font-jp:      'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --font-jp-serif:'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  --font-display: 'Space Grotesk', sans-serif;

  /* ---------- Type scale (balanced density) ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;
  --fs-6xl:  120px;

  --lh-tight:  1.08;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-relaxed:1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.02em;
  --tracking-caps:   0.16em;   /* small-caps labels */

  /* ---------- Spacing (8-pt base, with 4 for fine work) ---------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;

  /* ---------- Radii ---------- */
  --r-0:  0px;     /* surfaces: sharp */
  --r-1:  2px;     /* inputs, chips */
  --r-2:  4px;     /* small cards */
  --r-pill: 999px; /* pills, buttons, avatars */

  /* ---------- Borders ---------- */
  --bw-hair: 1px;
  --bw-1:    1px;
  --bw-2:    2px;

  /* ---------- Shadows (dark-mode tuned) ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.03) inset;
  --shadow-3: 0 24px 64px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset;
  --glow-moon: 0 0 24px rgba(245,197,24,0.35), 0 0 64px rgba(245,197,24,0.15);
  --glow-moon-sm: 0 0 8px rgba(245,197,24,0.5);

  /* ---------- Motion ---------- */
  --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   640ms;
  --dur-atmos: 1200ms;   /* atmospheric fades for hero elements */

  /* ---------- Layout ---------- */
  --container:    1200px;
  --container-wide: 1440px;
  --gutter:       32px;
}

/* ---------- Light mode (washi) ---------- */
[data-theme="light"] {
  --bg-0:  var(--tsuki-washi);
  --bg-1:  #EDE6D6;
  --bg-2:  #FFFFFF;
  --bg-3:  var(--tsuki-washi-2);

  --fg-1:  var(--tsuki-sumi);
  --fg-2:  #3D4250;
  --fg-3:  #6B7280;
  --fg-4:  #A0A6B4;

  --accent-fg:  var(--tsuki-ink-deep);

  --border-1:  rgba(27,28,30,0.08);
  --border-2:  rgba(27,28,30,0.16);
  --border-3:  rgba(27,28,30,0.40);

  --shadow-1: 0 1px 2px rgba(27,28,30,0.06);
  --shadow-2: 0 8px 24px rgba(27,28,30,0.08);
  --shadow-3: 0 24px 64px rgba(27,28,30,0.12);
  --glow-moon: 0 0 0 2px rgba(245,197,24,0.4);
}

/* ============================================================
   Semantic element defaults
   Apply with .tsuki-prose or scope via data-tsuki
   ============================================================ */

.tsuki-base, [data-tsuki] {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-0);
  font-feature-settings: "ss01", "cv01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tsuki-h1, [data-tsuki] h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 7vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg-1);
  margin: 0;
}

.tsuki-h2, [data-tsuki] h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg-1);
  margin: 0;
}

.tsuki-h3, [data-tsuki] h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg-1);
  margin: 0;
}

.tsuki-h4, [data-tsuki] h4 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 500;
  margin: 0;
}

.tsuki-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
  font-weight: 500;
}

.tsuki-p, [data-tsuki] p {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

.tsuki-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  max-width: 58ch;
}

.tsuki-code, [data-tsuki] code, [data-tsuki] kbd, [data-tsuki] pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
}

.tsuki-mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}

.tsuki-jp {
  font-family: var(--font-jp);
  font-weight: 400;
}

.tsuki-jp-vertical {
  font-family: var(--font-jp);
  writing-mode: vertical-rl;
  letter-spacing: 0.12em;
}

/* ---------- Selection ---------- */
::selection {
  background: var(--accent);
  color: var(--accent-fg);
}