/* ==========================================================================
   原木材料diy木工坊 — Colors & Type Tokens
   Cinematic · Textured · Handcrafted
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Serif+TC:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* --------------------------------------------------------------- COLORS */

  /* Base — warm coffee-brown foundation (old-photo sepia base) */
  --ink-900: #180f0a;         /* page bg, deepest — was pure black, now warm coffee */
  --ink-850: #1c130d;
  --ink-800: #221710;         /* bg-soft — lifted from cold black to warm brown */
  --ink-700: #2a1d14;
  --ink-600: #3a281a;

  /* Paper — warm ivory, slightly creamier for vintage feel */
  --paper-50:  #fffbf5;
  --paper-100: #fcf4e8;
  --paper-200: #f8ead9;       /* primary text on dark — warmer */
  --paper-300: #ead8be;
  --paper-400: #d4bc9a;

  /* Wood — brighter, more golden (lifted for old-photo brightness) */
  --wood-100: #efd4a8;        /* pale oak — brighter */
  --wood-300: #d8a976;        /* accent — teak / 柚木 — more saturated gold */
  --wood-500: #b38d5a;        /* walnut — lifted */
  --wood-700: #86603a;        /* dark walnut — still has warmth */
  --wood-900: #4a3020;        /* ebony / 紫檀 — warm brown, not pure black */

  /* Semantic — kept sparse, the brand avoids loud states */
  --ok:     #8fa47a;           /* moss */
  --warn:   #d4a24a;           /* amber */
  --danger: #b05a3c;           /* rust */

  /* Foreground tokens (for dark surfaces — adjusted for warmer bg) */
  --fg-1: var(--paper-200);                            /* body text */
  --fg-2: rgba(248, 234, 217, 0.78);                   /* muted — slightly more opaque on lighter bg */
  --fg-3: rgba(248, 234, 217, 0.60);                   /* tertiary */
  --fg-4: rgba(248, 234, 217, 0.32);                   /* quiet */
  --fg-accent: var(--wood-300);

  /* Background tokens — lifted to brown base */
  --bg-1: var(--ink-900);
  --bg-2: var(--ink-800);
  --bg-surface:        rgba(42, 29, 20, 0.75);         /* elevated card — warm brown */
  --bg-surface-strong: rgba(28, 19, 13, 0.92);         /* overlay panel */
  --bg-overlay-1:      rgba(20, 12, 6, 0.82);          /* heavy cinematic vignette — warm */
  --bg-overlay-2:      rgba(20, 12, 6, 0.48);

  /* Lines & soft fills — warmer tones */
  --line-1: rgba(248, 234, 217, 0.16);                 /* hairline on dark — slightly more visible */
  --line-2: rgba(248, 234, 217, 0.10);
  --soft-1: rgba(248, 234, 217, 0.14);                 /* chip/pill bg */
  --soft-2: rgba(255, 240, 210, 0.08);                 /* glass fill — warm tint */
  --soft-wood: rgba(216, 169, 118, 0.20);              /* accent tint — brighter wood */

  /* Shadows — softer, warmer for vintage feel (less pure black) */
  --shadow-sm: 0 8px 24px rgba(20, 10, 4, 0.38);
  --shadow-md: 0 20px 60px rgba(20, 10, 4, 0.45);
  --shadow-lg: 0 40px 120px rgba(20, 10, 4, 0.48);
  --shadow-inset-frame: inset 0 0 0 1px rgba(248, 234, 217, 0.06),
                        inset -80px 0 90px rgba(20, 10, 4, 0.48);
  --glow-accent: 0 0 28px rgba(216, 169, 118, 0.52);

  /* Radii — generous, never pill-crazy except for buttons/chips */
  --r-xs: 8px;
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 26px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing — used by section-shell etc */
  --space-1: 0.4rem;
  --space-2: 0.6rem;
  --space-3: 0.85rem;
  --space-4: 1.1rem;
  --space-5: 1.4rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(5rem, 10vw, 8rem);

  --max-width: 1240px;

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-strong:   cubic-bezier(0.16, 0.84, 0.24, 1);
  --dur-fast: 180ms;
  --dur-med:  420ms;
  --dur-slow: 720ms;

  /* --------------------------------------------------------------- TYPE */

  /* Font stacks */
  --font-sans:    'Manrope', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Noto Serif TC', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-display: 'Noto Serif TC', 'Cormorant Garamond', serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Display — the big cinematic h1s */
  --t-display-size:    clamp(3.9rem, 8vw, 6.8rem);
  --t-display-line:    1.04;
  --t-display-tracking: -0.01em;
  --t-display-weight:   600;

  /* H1 — section spines */
  --t-h1-size:    clamp(2.4rem, 5vw, 4.8rem);
  --t-h1-line:    1.08;
  --t-h1-weight:  600;

  /* H2 — chapter titles */
  --t-h2-size:    clamp(2.7rem, 5vw, 4.9rem);
  --t-h2-line:    1.08;
  --t-h2-weight:  600;

  /* H3 — group titles */
  --t-h3-size:    clamp(2rem, 3vw, 2.8rem);
  --t-h3-weight:  600;
  --t-h3-line:    1.12;

  /* Subtitle — serif, airy */
  --t-sub-size:   clamp(1.16rem, 2vw, 1.7rem);
  --t-sub-line:   1.5;

  /* Body — long-form Chinese reads better slightly loose */
  --t-body-size:  clamp(1rem, 1.45vw, 1.08rem);
  --t-body-line:  1.8;

  --t-body-sm-size: 0.94rem;
  --t-body-sm-line: 1.7;

  /* Kicker — the all-caps hairline eyebrow the brand loves */
  --t-kicker-size:     0.78rem;
  --t-kicker-tracking: 0.18em;
  --t-kicker-weight:   700;

  /* Numeric — the 01 · 02 · 03 chapter marks */
  --t-numeral-size:  clamp(6rem, 14vw, 14rem);
  --t-numeral-line:  0.9;

  /* Semantic utility classes */
}

/* ------------------------------------------------------------- SEMANTIC ---
   Consuming tokens. Use these class-less rules as base styles for the
   tag, or copy the declarations into your own selectors.
*/

.display,
h1.display {
  font-family: var(--font-display);
  font-size: var(--t-display-size);
  line-height: var(--t-display-line);
  font-weight: var(--t-display-weight);
  letter-spacing: var(--t-display-tracking);
  color: var(--fg-1);
}

h1 {
  font-family: var(--font-serif);
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-line);
  font-weight: var(--t-h1-weight);
  color: var(--fg-1);
  margin: 0;
}

h2 {
  font-family: var(--font-serif);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-line);
  font-weight: var(--t-h2-weight);
  color: var(--fg-1);
  margin: 0;
}

h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-line);
  font-weight: var(--t-h3-weight);
  color: var(--fg-1);
  margin: 0;
}

.subtitle {
  font-family: var(--font-serif);
  font-size: var(--t-sub-size);
  line-height: var(--t-sub-line);
  color: rgba(243, 231, 215, 0.92);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-line);
  color: var(--fg-2);
  margin: 0;
}

.body-sm { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-line); }

.kicker, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-sans);
  font-size: var(--t-kicker-size);
  letter-spacing: var(--t-kicker-tracking);
  font-weight: var(--t-kicker-weight);
  text-transform: uppercase;
  color: var(--fg-3);
}

.kicker::before {
  content: '';
  width: 3rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.numeral {
  font-family: var(--font-display);
  font-size: var(--t-numeral-size);
  line-height: var(--t-numeral-line);
  letter-spacing: 0.04em;
  color: rgba(243, 231, 215, 0.1);
}

.mono { font-family: var(--font-mono); }