/* =====================================================================
   LUCID Portraits · Colors & Type
   露晞映相所 — premium AI portraits for Asians
   ===================================================================== */

/* --- Fonts --- */
/* Brand font: Source Han Serif SC — headings and wordmark only.
   Served as a SUBSET (451KB) rather than the full 21MB variable font: the
   whole site needs 766 codepoints, not the full CJK repertoire. The complete
   file stays in fonts/ as the regeneration source — see fonts/README.md
   before editing Chinese copy. Weight axis is preserved (250–900). */
@font-face {
  font-family: 'Source Han Serif SC';
  src: url('fonts/SourceHanSerifSC-subset.woff2') format('woff2');
  font-weight: 250 900;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ---------- Neutral foundation ---------- */
  --cream-50:  #FBF5E6;   /* page / hero surface */
  --cream-100: #F6ECD2;   /* subtle tint */
  --cream-200: #EADFC2;   /* divider on cream */
  --ivory:     #FFFDF7;   /* card surface on cream */
  --paper:     #FFFFFF;

  --ink-900:   #15212A;   /* deepest type on cream */
  --ink-800:   #1F3644;   /* PRIMARY navy — signature brand color */
  --ink-700:   #2E4858;
  --ink-600:   #3E5566;   /* slate wordmark color from logo v3 */
  --ink-500:   #5A6F7E;
  --ink-400:   #8497A2;
  --ink-300:   #AEBCC4;
  --ink-200:   #D2DBE0;
  --ink-100:   #E8EDF0;
  --ink-50:    #F2F5F6;

  /* ---------- Brand spectrum (from the Penrose mark) ----------
     Six hues, sampled from the logo gradient. Use SPARINGLY —
     one accent at a time, never as a rainbow. */
  --spectrum-coral:    #E85C3B;   /* top */
  --spectrum-amber:    #E8A63B;   /* upper-left */
  --spectrum-olive:    #8AA24A;   /* lower-left */
  --spectrum-teal:     #4FA69B;   /* bottom */
  --spectrum-sky:      #6E94C4;   /* lower-right */
  --spectrum-lavender: #8A89C6;   /* upper-right */

  /* ---------- Semantic accents (muted, premium) ---------- */
  --accent:        var(--ink-800);           /* primary CTA surface */
  --accent-on:     var(--cream-50);          /* text on accent */
  --accent-hover:  #17303F;
  --accent-press:  #0F2733;

  --gold:          #B89968;                  /* premium/pricing accent */
  --gold-soft:     #D9C29B;
  --gold-ink:      #6B5530;

  --success:       #4F7A5C;
  --warning:       #C08A3A;
  --danger:        #B0513A;
  --info:          var(--spectrum-sky);

  /* ---------- Surfaces & semantic tokens ---------- */
  --bg:            var(--cream-50);
  --bg-alt:        var(--cream-100);
  --bg-inverse:    var(--ink-800);

  --surface:       var(--ivory);
  --surface-raised:#FFFFFF;
  --surface-sunken:var(--cream-100);

  --fg-1:          var(--ink-900);   /* primary text */
  --fg-2:          var(--ink-700);   /* secondary text */
  --fg-3:          var(--ink-500);   /* tertiary / meta */
  --fg-4:          var(--ink-400);   /* placeholder */
  --fg-on-dark:    var(--cream-50);

  --border-hair:   rgba(31, 54, 68, 0.08);   /* cards, inputs */
  --border-soft:   rgba(31, 54, 68, 0.14);
  --border-strong: rgba(31, 54, 68, 0.28);
  --divider:       var(--cream-200);

  /* ---------- Radius (soft, editorial) ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

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

  /* ---------- Shadow (soft, elevated; never harsh) ---------- */
  --shadow-xs: 0 1px 2px rgba(21, 33, 42, 0.04);
  --shadow-sm: 0 2px 6px rgba(21, 33, 42, 0.06);
  --shadow-md: 0 10px 24px -12px rgba(21, 33, 42, 0.18),
               0 2px 6px rgba(21, 33, 42, 0.04);
  --shadow-lg: 0 30px 60px -30px rgba(21, 33, 42, 0.28),
               0 8px 20px -12px rgba(21, 33, 42, 0.10);
  --shadow-portrait: 0 40px 80px -40px rgba(21, 33, 42, 0.45),
                     0 12px 24px -16px rgba(21, 33, 42, 0.15);
  --shadow-inset: inset 0 0 0 1px rgba(31, 54, 68, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-entry:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     160ms;
  --dur-base:     260ms;
  --dur-slow:     480ms;
  --dur-reveal:   780ms;

  /* ---------- Type families ----------
     Three type roles, by job — not by taste:
       --font-zh      宋体  · brand + headings (Eastern, editorial)
       --font-sans    黑体  · body, UI, labels (screen legibility; Inter leads
                              for Latin, PingFang/YaHei picks up the Chinese)
       --font-display Playfair · Latin-only decoration (italic sublines, numerals)
     --font-serif is no longer used for body copy; kept for editorial pull-quotes. */
  --font-display: 'Playfair Display', 'Source Han Serif SC', 'Songti SC', Georgia, serif;
  --font-sans:    'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
                  'Source Han Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:   'Source Serif 4', 'Source Han Serif SC', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;
  /* Fallbacks cover both desktops while the 21MB web font is still in flight
     (or if it fails): Songti SC on macOS, SimSun on Windows — both Song faces,
     so the headline keeps its character instead of dropping to a Latin serif. */
  --font-zh:      'Source Han Serif SC', 'Songti SC', 'SimSun', 'Noto Serif CJK SC', serif;

  /* ---------- Type scale ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;

  /* ---------- Letter-spacing ---------- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;   /* small caps / eyebrow */
  --tracking-widest: 0.22em;   /* logo-echo */
}

/* =====================================================================
   Base element styles (semantic)
   ===================================================================== */

html {
  color-scheme: light;
  /* In-page jumps (nav + FAQ index) glide instead of teleporting. */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  /* `auto` keeps subpixel rendering on light backgrounds — `antialiased`
     thins every stroke by roughly a weight, which is what made the Song
     face read as flimsy. Dark panels flip back below. */
  -webkit-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

/* Light-on-dark reverses the trade: subpixel rendering fattens pale glyphs,
   so antialiasing is the crisper choice there. */
.on-dark {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Headings (display serif, tight, rich) ---------- */

h1, .h1 {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: 1.28;
  letter-spacing: 0.02em;
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.35;
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-md);
  line-height: 1.35;
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

/* Eyebrow / kicker — serif, tracked, uppercase */
.eyebrow, .kicker {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lede {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--fg-2);
  font-weight: 400;
}

.meta, small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.caption {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--fg-3);
}

.quote, blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--fg-1);
  margin: 0;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-2);
  background: var(--cream-100);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

a {
  color: var(--ink-800);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--spectrum-coral); }

hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: var(--space-8) 0;
}

::selection { background: var(--gold-soft); color: var(--ink-900); }