/* ============================================================
   Q毛吉 Qmaoji — Design tokens
   Ported from the Claude Design handoff design-system
   (colors + typography + spacing/motion). These custom
   properties are the single source of truth for the site.

   品牌色彩 60-30-10：暖白/奶油 60% · 墨黑 30% · 招牌橘 10%。
   橘色是「識別點綴」，不是主色。
   ============================================================ */
:root {
  /* ---- Brand orange (true logo amber: sRGB 245,173,72) ---- */
  --qmj-orange:        #F5AD48;  /* 招牌琥珀 — signature identity colour, CTAs */
  --qmj-orange-deep:   #9C5E0A;  /* 深琥珀(文字用,已調深至 WCAG AA) — emphasis / price numerals / links */
  --qmj-orange-soft:   #FDEBCB;  /* 淺琥珀 — card fills, tags, soft blocks */

  /* ---- Cream / paper (logo's warm off-white family) ---- */
  --qmj-paper:         #FFFDF5;  /* 暖白紙 — primary page background */
  --qmj-cream:         #FAF4E2;  /* 奶油色 — block separation, alternating bg */
  --qmj-line:          #EDE4CE;  /* 細線 — hairline borders / dividers */
  --qmj-white:         #FFFFFF;
  --qmj-logo-cream:    #FFFFCC;  /* logo lettering colour on dark surfaces */

  /* ---- Ink (Apple-poster black/white elegance) ---- */
  --qmj-ink:           #161310;  /* 近黑墨 — primary text, primary button, logo black */
  --qmj-ink-70:        #4A453C;  /* 次墨 — body copy, secondary text */
  --qmj-ink-40:        #726A5B;  /* 輔助(已調深至 WCAG AA) — captions, meta, placeholders */

  /* ---- True logo colours (sampled from Q毛吉 artwork) ---- */
  --qmj-amber:         #F4AD4A;  /* logo background — golden amber */
  --qmj-cream-logo:    #F8F4D8;  /* logo lettering cream */
  --qmj-teal-ink:      #183838;  /* logo outline / drop-shadow — dark teal charcoal */

  /* ---- Semantic / status ---- */
  --qmj-danger:        #C8492B;
  --qmj-danger-soft:   #FBEBE6;
  --qmj-success:       #2F8F5B;
  --qmj-success-soft:  #E5F2EA;

  /* ---- Semantic aliases — reference these in components & screens ---- */
  --bg-page:           var(--qmj-paper);
  --bg-alt:            var(--qmj-cream);
  --surface-card:      var(--qmj-white);
  --surface-soft:      var(--qmj-orange-soft);
  --surface-ink:       var(--qmj-ink);

  --text-strong:       var(--qmj-ink);
  --text-body:         var(--qmj-ink-70);
  --text-muted:        var(--qmj-ink-40);
  --text-on-ink:       var(--qmj-orange-soft);
  --text-on-orange:    var(--qmj-ink);

  --accent:            var(--qmj-orange);
  --accent-strong:     var(--qmj-orange-deep);
  --accent-soft:       var(--qmj-orange-soft);
  --price:             var(--qmj-orange-deep);

  --border:            var(--qmj-line);
  --border-strong:     var(--qmj-ink);

  /* ============================================================
     Typography — 中文 Noto Sans TC；數字／規格用等寬 JetBrains Mono
     強化「報價透明」的工程感與專業可信。
     ============================================================ */
  --font-display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-body:    "Noto Sans TC", "PingFang TC", sans-serif;
  --font-mono:    "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  --fs-display:  clamp(34px, 6vw, 60px);
  --fs-h1:       clamp(30px, 5vw, 46px);
  --fs-h2:       clamp(24px, 3.6vw, 34px);
  --fs-h3:       20px;
  --fs-lead:     clamp(16px, 2.2vw, 19px);
  --fs-body:     17px;
  --fs-sm:       15px;
  --fs-caption:  13px;
  --fs-eyebrow:  13px;
  --fs-data:     20px;  /* prices / specs (mono) */

  --lh-tight:   1.1;
  --lh-heading: 1.15;
  --lh-snug:    1.4;
  --lh-body:    1.7;

  --ls-tight:    -0.01em;
  --ls-normal:   0;
  --ls-eyebrow:  0.32em;
  --ls-caption:  0.04em;

  /* ============================================================
     Spacing, radii, shadows, motion
     圓角呼應 logo 的圓潤感；陰影克制、偏暖。
     ============================================================ */
  --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;

  --gap:          clamp(16px, 3vw, 32px);
  --section-pad:  clamp(40px, 7vw, 72px);
  --wrap-max:     1080px;

  --r-sm:   8px;
  --r:      14px;   /* default card / input radius */
  --r-lg:   24px;   /* large cards, feature blocks */
  --r-pill: 999px;  /* buttons, badges, tags */

  --bw-hair:   1px;
  --bw-strong: 1.5px;

  --shadow-sm:   0 1px 2px rgba(22, 19, 16, 0.05);
  --shadow:      0 4px 16px rgba(22, 19, 16, 0.07);
  --shadow-lg:   0 12px 36px rgba(22, 19, 16, 0.10);
  --shadow-soft: 0 8px 28px rgba(221, 142, 31, 0.18); /* amber-tinted lift on CTA */

  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   0.15s;
  --dur:        0.22s;
  --dur-slow:   0.4s;
}