/* ============================================================
   憨人＋ HAN LAB +  ·  Design Tokens
   Mother-brand of 明日生活 / 再見好物中心.
   Voice: 把憨事，做成方法 — bold, hand-drawn, civic, lab-like.
   Visual core: warm cream paper · charcoal line-art · coral pop.
   ============================================================ */

@font-face {
  font-family: 'JF Jinxuan';
  src: url('../fonts/jf-jinxuan-3.0-book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;900&family=Inter:wght@400;500;600;700;800;900&family=Caveat:wght@500;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ============ HAN LAB + brand color (coral / paper / ink) ============
     Pulled directly from the user mockup — not from 明日生活 (which is teal).
     The coral is the activist red-orange of campaign posters; paper is a
     warm un-bleached cream; ink is near-black for fearless line-art. */

  --coral-900: #8a2a18;
  --coral-700: #c63d22;
  --coral-600: #e0451f;     /* primary HAN LAB + */
  --coral-500: #ee5a2c;     /* hover / lighter actions */
  --coral-400: #f57b50;
  --coral-300: #f9a583;
  --coral-200: #fbc8b1;
  --coral-100: #fde2d3;
  --coral-050: #fdeee5;

  /* secondary — mustard kept (cross-brand link to 明日生活's mustard) */
  --mustard-600: #c89324;
  --mustard-500: #e2ac3c;
  --mustard-300: #f0cd7a;
  --mustard-100: #fbf0d2;

  /* INK — warm-cool charcoal */
  --ink-900: #14110e;       /* line-art / display */
  --ink-800: #25211c;
  --ink-700: #3a342c;
  --ink-500: #6b6359;
  --ink-400: #8e857a;
  --ink-300: #b9b1a6;
  --ink-200: #ddd5c8;
  --ink-150: #ebe4d6;
  --ink-100: #f1ebdd;

  /* PAPER — un-bleached cream */
  --paper:        #f5efe2;     /* page bg */
  --paper-warm:   #efe6d0;     /* deeper section wash */
  --paper-cool:   #faf5ea;     /* lifted surface */
  --white:        #ffffff;

  /* Cross-experiment accent palette — each experiment has its own color
     so subpages feel like distinct sub-brands inside HAN LAB + */
  --x-goodbye:   #1f8a86;   /* 再見好物中心 → teal (links to 明日生活) */
  --x-meet:      #c84a8e;   /* 良善相逢 → magenta */
  --x-window:    #4a7bd2;   /* 明日窗戶 → cobalt */
  --x-shelter:   #d97726;   /* 暖心相蓬 → amber */
  --x-resilience:#5a7a3e;   /* 明日韌性圈 → moss */

  /* ============ Semantic ============ */
  --primary: var(--coral-600);
  --primary-hover: var(--coral-700);
  --primary-press: var(--coral-900);

  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-muted: var(--ink-400);
  --fg-on-dark: var(--paper);
  --fg-on-coral: #fff7f0;

  --bg-page: var(--paper);
  --bg-surface: var(--paper-cool);
  --bg-surface-2: var(--white);
  --bg-section: var(--paper-warm);
  --bg-inverse: var(--ink-900);
  --bg-coral: var(--coral-600);

  --border-subtle: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-ink: var(--ink-900);

  /* ============ TYPE ============ */
  --font-display: 'JF Jinxuan', 'Noto Sans TC', system-ui, sans-serif;
  --font-body:    'JF Jinxuan', 'Noto Sans TC', system-ui, sans-serif;
  --font-latin:   'Inter', 'JF Jinxuan', system-ui, sans-serif;
  --font-script:  'Caveat', 'JF Jinxuan', cursive;
  --font-mono:    'DM Mono', ui-monospace, Menlo, monospace;

  /* Bold scale — this brand wants BIG */
  --fs-mega:       9rem;     /* 144 — hero "憨人＋" */
  --fs-display-xl: 6rem;     /* 96  */
  --fs-display-lg: 4.5rem;   /* 72  */
  --fs-display:    3.25rem;  /* 52  */
  --fs-h1:         2.25rem;  /* 36  */
  --fs-h2:         1.625rem; /* 26  */
  --fs-h3:         1.25rem;  /* 20  */
  --fs-h4:         1.0625rem;/* 17  */
  --fs-body:       1rem;     /* 16  */
  --fs-body-sm:    0.9375rem;/* 15  */
  --fs-caption:    0.8125rem;/* 13  */
  --fs-tiny:       0.75rem;  /* 12  */

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.65;
  --lh-loose: 1.85;

  --tracking-tight: -0.02em;
  --tracking-cjk:    0.02em;
  --tracking-wide:   0.18em;

  /* ============ SPACING (4px) ============ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;
  --sp-32: 128px;

  /* RADII — squarer than 明日生活. The brand is about earnest plain shapes. */
  --r-xs: 2px; --r-sm: 6px; --r-md: 10px;
  --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* ELEVATION — paper-shadow, lower than teal brand */
  --shadow-1: 0 1px 0 rgba(20,17,14,0.05), 0 1px 2px rgba(20,17,14,0.04);
  --shadow-2: 0 4px 12px rgba(20,17,14,0.08), 0 2px 4px rgba(20,17,14,0.04);
  --shadow-3: 0 16px 36px rgba(20,17,14,0.12), 0 4px 8px rgba(20,17,14,0.05);
  --shadow-coral: 0 8px 24px rgba(224,69,31,0.28);
  --shadow-press: inset 0 2px 0 rgba(20,17,14,0.18);

  /* MOTION */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: light; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  letter-spacing: var(--tracking-cjk);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; }

.t-mega    { font: 800 var(--fs-mega)/var(--lh-tight)       var(--font-display); letter-spacing: -0.04em; }
.t-display-xl { font: 800 var(--fs-display-xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.t-display-lg { font: 800 var(--fs-display-lg)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.t-display    { font: 800 var(--fs-display)/var(--lh-snug)    var(--font-display); letter-spacing: var(--tracking-tight); }

.eyebrow {
  font-family: var(--font-latin);
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--coral-600);
}
.eyebrow.is-ink  { color: var(--ink-900); }
.eyebrow.is-paper{ color: var(--paper); }

.lede {
  font-size: 1.125rem;
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

p { margin: 0 0 var(--sp-4); color: var(--fg-2); }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }
.script { font-family: var(--font-script); font-size: 1.6rem; color: var(--coral-600); font-weight: 700; }
.mono { font-family: var(--font-mono); letter-spacing: 0; }

a {
  color: var(--ink-900);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--dur-2) var(--ease-standard);
}
a:hover { color: var(--coral-600); }

::selection { background: var(--coral-600); color: var(--paper); }

/* ============================================================
   Layout helpers
   ============================================================ */
.page { min-height: 100vh; }
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--sp-10);
}
.container-narrow {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--sp-10);
}

.section { padding: var(--sp-24) 0; }
.section-tight { padding: var(--sp-16) 0; }

.divider-rule { height: 1px; background: var(--ink-900); width: 100%; opacity: 0.15; }
.divider-thick { height: 2px; background: var(--ink-900); width: 100%; }

/* ============================================================
   Buttons — paper / press / coral.
   No inner-shadow chrome. Squared with a 2px ink stroke.
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: var(--tracking-cjk);
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 2px solid var(--ink-900);
  background: var(--ink-900);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-standard), background var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); color: var(--paper); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-press); }

.btn-coral {
  background: var(--coral-600);
  border-color: var(--coral-600);
  color: var(--paper);
}
.btn-coral:hover { background: var(--coral-700); border-color: var(--coral-700); box-shadow: var(--shadow-coral); }

.btn-ghost {
  background: transparent;
  color: var(--ink-900);
}
.btn-ghost:hover { background: var(--ink-900); color: var(--paper); }

.btn-paper {
  background: var(--paper);
  color: var(--ink-900);
  border-color: var(--ink-900);
}

.btn-lg { padding: 18px 28px; font-size: 1.0625rem; }

/* ============================================================
   Pills / tags
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-cjk);
  background: var(--ink-100);
  color: var(--ink-900);
  border: 1.5px solid var(--ink-900);
}
.pill-coral  { background: var(--coral-600); color: var(--paper); border-color: var(--coral-600); }
.pill-paper  { background: var(--paper); color: var(--ink-900); }
.pill-ghost  { background: transparent; }

/* ============================================================
   Card
   ============================================================ */
.card {
  background: var(--bg-surface);
  border: 1.5px solid var(--ink-900);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* ============================================================
   Utility
   ============================================================ */
.stack { display: flex; flex-direction: column; }
.row   { display: flex; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); } .gap-10{ gap: var(--sp-10); }
.gap-12{ gap: var(--sp-12); }
.center { display: flex; align-items: center; justify-content: center; }
.between{ display: flex; align-items: center; justify-content: space-between; }

.mute  { color: var(--fg-3); }
.ink   { color: var(--ink-900); }
.coral { color: var(--coral-600); }

.numeral {
  font-family: var(--font-latin);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* keep CJK spacing tight in display */
.cjk-tight { letter-spacing: -0.02em; }

/* small focus */
:focus-visible { outline: 2px solid var(--coral-600); outline-offset: 3px; border-radius: 4px; }