@import url("/chinese/src/styles/fonts-noto-sc.css?v=20260719-r8imp"); /* self-hosted CJK — see that file */
/* =============================================================
 * iSpirits Cloud — Colors & Type
 * Two themes coexist: Standard (dark, default) and Cozy (cream paper).
 * Activate Cozy with `data-ux-mode="cozy"` on :root (or body).
 * =========================================================== */

/* Self-hosted brand fonts — see fonts/fonts.css */
@import url('./fonts/fonts.css?v=20260719-r8imp');

/* -----------------------------------------------------------
 * FONT FAMILIES — base tokens
 * --------------------------------------------------------- */
:root {
  /* Chinese mirror — CJK glyphs come from Noto Sans SC / Noto Serif SC
     fallbacks. Latin glyphs still use Inter / Poppins / Fraunces / Lexend.
     The cascade works because Inter ships no CJK glyphs, so the browser
     walks down to Noto Sans SC (or PingFang SC / Microsoft YaHei on
     Apple / Windows) for those codepoints. */
  --font-sans:        'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display:     'Poppins', 'Noto Sans SC', 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-serif:       'Fraunces', 'Noto Serif SC', 'Songti SC', 'SimSun', 'PingFang SC', 'Microsoft YaHei', Georgia, 'Times New Roman', serif;
  --font-body-cozy:   'Lexend', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
  /* --font-wordmark was removed 2026-07-30: zero usages anywhere (checked
     fallback-tolerantly for `var(--font-wordmark,`). The Cormorant Garamond
     family it named is still loaded by fonts/fonts.css and still used by
     literal name in inline-legal.css / hero-video.css — that import stays. */
}

/* -----------------------------------------------------------
 * STANDARD (dark) — default palette
 * Navy-slate background, cyan→purple accents, glassmorphism.
 * --------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-body:          radial-gradient(1200px 800px at 50% -20%, #0f172a 0%, #0b0f14 40%, #0b0f14 100%);
  --bg-solid:         #0b0f14;
  --surface-1:        rgba(8, 13, 26, 0.75);   /* glass */
  --surface-2:        rgba(15, 23, 42, 0.85);  /* assistant bubble */
  --surface-raised:   rgba(15, 23, 42, 0.92);  /* nav, headers */
  --surface-flat:     #0f172a;

  /* Text */
  --fg:               #e6edf3;
  --fg-strong:        #ffffff;
  --fg-muted:         #94a3b8;
  /* 0.6 composited to ~#5f6b7e on dark cards = 3.3:1 (failed AA). 0.85 → ~5:1. */
  --fg-faded:         rgba(148, 163, 184, 0.85);

  /* Borders */
  --border:           #1f2937;
  --border-subtle:    rgba(148, 121, 255, 0.22);
  --border-strong:    rgba(79, 172, 254, 0.35);

  /* Brand accents */
  --accent-cyan:      #4FACFE;  /* primary nav / link */
  --accent-purple:    #9479FF;  /* secondary / memory citations */
  --accent-blue:      #4c8dff;  /* legacy accent */
  --accent-blue-2:    #7aa2ff;

  /* Semantic */
  --success:          #34d399;
  --warning:          #f59e0b;
  --danger:           #ef4444;
  --info:             #60a5fa;

  /* Chat bubbles */
  --bubble-user:           linear-gradient(135deg, #1e5fbf 0%, #3b82f6 100%);
  --bubble-user-text:      #ffffff;
  --bubble-assistant:      rgba(15, 23, 42, 0.85);
  --bubble-assistant-text: #e6edf3;

  /* Brand gradient — text/icon flourish */
  /* Stops darkened 2026-06-10 (VIS-M1): white 14px/600 .btn-primary labels sat
     at 2.4:1 on the old #4FACFE stop. #2273D6→4.68:1, #7355E2→5.09:1 — both
     clear WCAG AA (4.5:1) for normal-weight text while keeping the hue. */
  --gradient-brand:    linear-gradient(135deg, #2273D6 0%, #7355E2 100%);
  --gradient-hero:     linear-gradient(145deg, rgba(79,172,254,0.12), rgba(148,121,255,0.08));
  /* Wordmark gradient — used ONLY on the iSpirits Cloud logo lockup and
     Empire-stage hero moments. Do not use on buttons. Added 2026-05-16. */
  --gradient-mark:     linear-gradient(135deg, #8B5CF6 0%, #E8B86D 100%);
  --brand-violet:      #8B5CF6;
  --brand-gold:        #E8B86D;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md:   0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-lg:   0 8px 28px rgba(0, 0, 0, 0.35);
  --shadow-xl:   0 20px 48px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 8px 32px rgba(79, 172, 254, 0.25);

  /* Radii */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Spacing scale (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Type — base sizes */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lift:  18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-hero:  44px;
  --text-display: 64px;

  --line-tight: 1.15;
  --line-snug:  1.35;
  --line-body:  1.6;
  --line-loose: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* Semantic alias — components */
  --h1-size:   var(--text-hero);
  --h1-weight: 700;
  --h1-family: var(--font-display);
  --h1-lh:     var(--line-tight);

  --h2-size:   var(--text-2xl);
  --h2-weight: 700;
  --h2-family: var(--font-display);

  --h3-size:   var(--text-xl);
  --h3-weight: 600;
  --h3-family: var(--font-display);

  --body-size: var(--text-base);
  --body-lh:   var(--line-body);
  --body-family: var(--font-sans);

  --mono-size: var(--text-sm);
  --mono-family: var(--font-mono);

  --caps-size: var(--text-xs);
  --caps-tracking: var(--tracking-caps);
  --caps-weight: 600;
}

/* -----------------------------------------------------------
 * COZY — "Warm Letter" theme
 * Activated via data-ux-mode="cozy". Cream paper, navy ink,
 * Fraunces serif, Lexend body, 20px base, 1.75 line-height.
 * --------------------------------------------------------- */
:root[data-ux-mode="cozy"],
[data-ux-mode="cozy"] {
  color-scheme: light;

  /* Surfaces */
  --bg-body:        radial-gradient(1200px 800px at 50% -20%, hsl(30,25%,98%) 0%, hsl(30,20%,96%) 40%, hsl(30,18%,94%) 100%);
  --bg-solid:       #F7EFE0; /* aged cream */
  --surface-1:      #FFFBF2; /* elevated paper */
  --surface-2:      #FFFBF2;
  --surface-raised: #FFFBF2;
  --surface-flat:   #F7EFE0;

  /* Text */
  --fg:         #1A2438; /* navy ink */
  --fg-strong:  #0E1730;
  --fg-muted:   #5A5540; /* warm graphite */
  /* 0.55 composited to ~#81858c on cream = 3.6:1 (failed AA). 0.70 → ~5.4:1. */
  --fg-faded:   rgba(26, 36, 56, 0.70);

  /* Borders — warm hairlines */
  --border:         rgba(166, 130, 85, 0.20);
  --border-subtle:  rgba(166, 130, 85, 0.20);
  --border-strong:  rgba(166, 130, 85, 0.45);

  /* Brand accents — cozy palette */
  --accent-rose:        #C66B6B;  /* primary CTA */
  --accent-rose-dark:   #A85555;  /* hover */
  --accent-gold:        #B69763;  /* dividers, flourishes */
  --accent-gold-soft:   rgba(182, 151, 99, 0.35);
  --accent-sage:        #7E9777;  /* success / done */

  /* Re-point generic accents to cozy values */
  --accent-cyan:    var(--accent-rose);
  --accent-purple:  var(--accent-gold);
  --accent-blue:    var(--accent-rose);
  --accent-blue-2:  var(--accent-rose-dark);

  /* Chat bubbles — serif italic for iSpirit */
  --bubble-user:           #FFFBF2;
  --bubble-user-text:      #1A2438;
  --bubble-assistant:      linear-gradient(180deg, #FFFBF2 0%, #FCF4E2 100%);
  --bubble-assistant-text: #1A2438;

  /* Brand gradient — warm on cream */
  --gradient-brand:  linear-gradient(135deg, #B69763 0%, #C66B6B 100%);
  --gradient-hero:   linear-gradient(135deg, #FFF5E1 0%, #FCEDD4 100%);
  /* Wordmark gradient — same violet→gold across themes (it's the brand mark
     itself, not a per-theme accent). Added 2026-05-16. */
  --gradient-mark:   linear-gradient(135deg, #8B5CF6 0%, #E8B86D 100%);
  --brand-violet:    #8B5CF6;
  --brand-gold:      #E8B86D;

  /* Shadows — warm earth tone, not black */
  --shadow-sm:   0 1px 2px rgba(90, 60, 30, 0.06);
  --shadow-md:   0 6px 18px rgba(90, 60, 30, 0.10);
  --shadow-lg:   0 14px 36px rgba(90, 60, 30, 0.18);
  --shadow-xl:   0 20px 48px rgba(90, 60, 30, 0.22);
  --shadow-glow: 0 12px 30px rgba(198, 107, 107, 0.32);

  /* Radii — softer */
  --radius-md:  18px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  /* Type overrides — larger base, generous line-height */
  --text-base: 20px;
  --text-lift: 22px;
  --text-lg:   24px;
  --text-xl:   28px;
  --text-2xl:  42px;
  --text-hero: 56px;
  --line-body: 1.75;

  --body-family: var(--font-body-cozy);
  --body-size:   var(--text-base);
  --body-lh:     var(--line-loose);

  --h1-family: var(--font-serif);
  --h1-size:   var(--text-hero);
  --h1-weight: 600;
  --h2-family: var(--font-serif);
  --h2-size:   var(--text-2xl);
  --h2-weight: 600;
  --h3-family: var(--font-serif);
  --h3-size:   var(--text-xl);
}

/* -----------------------------------------------------------
 * MOOD PALETTES — overlay on Standard only (not Cozy)
 * Applied via body class on the Spirit Pet home surface.
 * The :not() guard is what makes "not Cozy" true: these set a
 * near-black --bg-solid ON BODY, and custom properties resolve
 * from the nearest ancestor — so without the guard they beat
 * cozy's remap on <html> even mid-cozy, and anything pairing
 * --fg (cozy navy ink) with --bg-solid rendered ink-on-ink
 * (page-guide pill + tooltip, ~1.05:1 on chat.html, where
 * persona-sweet is applyPersonaTheme's default branch).
 * Guarded per-selector, NOT via a counter-rule after the block:
 * a counter-rule needs higher specificity forever, while a
 * selector that never matches can't be resurrected by the
 * late-@import cascade trap (see cozy-theme.css §font tokens).
 * --------------------------------------------------------- */
:root:not([data-ux-mode="cozy"]) body.persona-sweet   { --bg-solid: #1a0f08; --accent-cyan: #ff7a3d; --accent-purple: #ff9a5c; }
:root:not([data-ux-mode="cozy"]) body.persona-rose    { --bg-solid: #10070a; --accent-cyan: #ff6fa1; --accent-purple: #ff9dc4; }
:root:not([data-ux-mode="cozy"]) body.persona-azure   { --bg-solid: #05080f; --accent-cyan: #60a5fa; --accent-purple: #93c5fd; }
:root:not([data-ux-mode="cozy"]) body.persona-forest  { --bg-solid: #06140d; --accent-cyan: #34d399; --accent-purple: #6ee7b7; }
:root:not([data-ux-mode="cozy"]) body.persona-dusk    { --bg-solid: #0a0c1a; --accent-cyan: #38bdf8; --accent-purple: #c084fc; }

/* -----------------------------------------------------------
 * ELEMENT DEFAULTS — apply semantic tokens
 * --------------------------------------------------------- */
html, body {
  background: var(--bg-body);
  background-color: var(--bg-solid);
  color: var(--fg);
  font-family: var(--body-family);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  margin: 0;
}

h1 { font-family: var(--h1-family); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--line-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); }
h2 { font-family: var(--h2-family); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--line-snug); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); }
h3 { font-family: var(--h3-family); font-size: var(--h3-size); font-weight: 600; line-height: var(--line-snug); margin: 0 0 var(--space-3); }
h4 { font-family: var(--h3-family); font-size: var(--text-lift); font-weight: 500; line-height: var(--line-snug); margin: 0 0 var(--space-2); }
p  { margin: 0 0 var(--space-3); }
small { font-size: var(--text-sm); color: var(--fg-muted); }
code { font-family: var(--mono-family); font-size: var(--mono-size); }

.eyebrow {
  font-family: var(--body-family);
  font-size: var(--caps-size);
  font-weight: var(--caps-weight);
  letter-spacing: var(--caps-tracking);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Cozy-only: serif italic for iSpirit voice */
[data-ux-mode="cozy"] .voice-ispirit {
  font-family: var(--font-serif);
  font-style: italic;
}