/* ============================================================
   Melody Drapery — Colors & Type
   A warm, atelier-grade neutral palette. Sheer linen, warm
   taupe, raw silk, cream; anchored by a deep walnut ink.
   ============================================================ */

/* ---------- Fonts (Google Fonts fallback, flagged in README) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600&family=Noto+Sans+SC:wght@300;400;500&display=swap');

:root {
  /* ---------------- Color: Canvas (warm whites & creams) ---------------- */
  --canvas-raw:       #FBF7F0;  /* raw silk — app background */
  --canvas-linen:     #F5EFE4;  /* undyed linen — section surface */
  --canvas-parchment: #EFE6D6;  /* parchment — cards, panels */
  --canvas-sand:      #E6D9C2;  /* light sand — dividers, quiet fills */

  /* ---------------- Color: Neutrals (taupe / stone) ---------------- */
  --stone-50:  #F0EBE2;
  --stone-100: #E2D9C9;
  --stone-200: #C8BBA5;
  --stone-300: #A89880;
  --stone-400: #8C7A61;
  --stone-500: #6F5F4A;
  --stone-600: #544633;
  --stone-700: #3C3122;
  --stone-800: #2A2116;

  /* ---------------- Color: Ink (deep walnut / espresso) ---------------- */
  --ink-1: #2A2116;   /* primary text, logo */
  --ink-2: #4B3E2C;   /* secondary text */
  --ink-3: #8C7A61;   /* tertiary / metadata */
  --ink-4: #B6A88E;   /* muted / placeholder */

  /* ---------------- Color: Accent (aged brass, subtle) ---------------- */
  --brass:       #A07A3D;
  --brass-soft:  #C9A46B;
  --brass-tint:  #EFE1C4;

  /* ---------------- Color: Foliage (used sparingly) ---------------- */
  --sage:        #7A8264;
  --sage-soft:   #B9BFA6;

  /* ---------------- Color: Semantic ---------------- */
  --success: #6B7F4D;
  --warning: #B88838;
  --danger:  #A94C3E;
  --info:    #6C7A8C;

  /* ---------------- Foreground / background tokens ---------------- */
  --fg-1: var(--ink-1);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: var(--ink-4);
  --fg-on-dark: var(--canvas-raw);

  --bg-1: var(--canvas-raw);
  --bg-2: var(--canvas-linen);
  --bg-3: var(--canvas-parchment);
  --bg-ink: var(--ink-1);
  --bg-stone: var(--stone-600);

  --line-1: rgba(42, 33, 22, 0.10);     /* hairline on light */
  --line-2: rgba(42, 33, 22, 0.18);     /* stronger hairline */
  --line-3: rgba(42, 33, 22, 0.35);     /* emphasized */
  --line-on-dark: rgba(251, 247, 240, 0.18);

  /* ---------------- Shadows (soft, warm, never cool) ---------------- */
  --shadow-xs: 0 1px 2px rgba(60, 49, 34, 0.06);
  --shadow-sm: 0 2px 8px rgba(60, 49, 34, 0.06), 0 1px 2px rgba(60, 49, 34, 0.04);
  --shadow-md: 0 8px 24px rgba(60, 49, 34, 0.08), 0 2px 6px rgba(60, 49, 34, 0.05);
  --shadow-lg: 0 24px 60px rgba(60, 49, 34, 0.12), 0 6px 16px rgba(60, 49, 34, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(60, 49, 34, 0.04);

  /* ---------------- Radii (restrained) ---------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

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

  /* ---------------- Type families ----------------
     Display: Cormorant Garamond — high-contrast serif, used for
              the logo ("Melody Drapery"), hero words, section titles.
     Body:    Inter — quiet, slightly warm sans for UI and long copy.
     CJK-Display: Noto Serif SC — matches the editorial serif voice for
              Chinese headlines.
     CJK-Body: Noto Sans SC for Chinese body.
     ---------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Noto Serif SC', 'Songti SC', 'STSong', Georgia, serif;
  --font-body:    'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  --font-cjk-display: 'Noto Serif SC', 'Cormorant Garamond', 'Songti SC', serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

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

  /* line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* tracking — tighter for display, open for all-caps labels */
  --track-tight:   -0.02em;
  --track-normal:  0;
  --track-wide:    0.08em;
  --track-widest:  0.22em;

  /* ---------------- Motion ---------------- */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-drape:  cubic-bezier(0.32, 0.0, 0.18, 1);   /* like fabric settling */
  --dur-fast:    160ms;
  --dur-med:     320ms;
  --dur-slow:    640ms;
  --dur-drape:   900ms;

  /* ---------------- Layout ---------------- */
  --container-max: 1280px;
  --container-gut: 48px;
}

/* ==========================================================
   Semantic type — classes that read like a stylesheet spec
   ========================================================== */

.display-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  font-style: italic;
}

.display-1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-6xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.display-2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-4xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg-1);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-normal);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

.lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

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

.logotype {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  line-height: 0.95;
  color: var(--fg-1);
}

/* Base reset-ish */
html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}