/* ============================================================
   Hair by Petal — "Petal on Paper" design tokens
   Drop-in CSS custom properties.

   Direction: warm paper ground, emerald foliage, a whisper of
   petal — from the business name "Hair by Petal", reinforced by
   the owner's given name 菊 (jú, chrysanthemum): petals as the
   brand, emerald as the leaf.
   Mandarin-first, WeChat-safe (system fonts only, no downloads).

   Owner: Zhang Ju / 张菊 (English name Susan) — confirmed.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     FONT STACKS — system only. No @import, no web fonts.
     WeChat's X5/webview blocks or slow-loads external fonts and
     CJK web fonts are multi-MB; every glyph here is already on
     the device. Per-glyph fallback means Latin letters resolve
     to the Latin fonts and Han characters fall through to the
     CJK fonts regardless of order.
     ---------------------------------------------------------- */

  /* Chinese leads: CJK fonts first (consistent Han rendering). */
  --font-cjk: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
              "Noto Sans SC", "Heiti SC", "WenQuanYi Micro Hei",
              -apple-system, BlinkMacSystemFont, sans-serif;

  /* English companion: Latin system fonts first. */
  --font-latin: -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Mixed UI default: Latin-first with CJK fallback so any stray
     Han character still renders without a download. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei",
               "Hiragino Sans GB", "Noto Sans SC", "Heiti SC", sans-serif;

  /* ----------------------------------------------------------
     COLOUR — Paper ground
     Warm cream, never stark white. --paper is the page base.
     ---------------------------------------------------------- */
  --paper:       #FAF6EC;  /* page background — warm cream */
  --paper-soft:  #F4EDDD;  /* alternating section bands */
  --paper-sink:  #ECE3CE;  /* pressed/hover on paper, wells */
  --paper-line:  #E0D5BE;  /* hairline borders on paper */
  --surface:     #FFFDF7;  /* cards — lifts a touch above paper */

  /* Ink — warm green-charcoal, softer than pure black on cream */
  --ink:         #1F2A24;  /* headings + body            13.7:1 on paper */
  --ink-soft:    #3A4A40;  /* secondary text              8.7:1 on paper */
  --ink-muted:   #5F6E64;  /* captions / meta             5.0:1 on paper */

  /* Emerald — the brand. Foliage green. */
  --emerald-900: #063D2C;  /* deepest, rare */
  --emerald-700: #0B5A42;  /* emerald TEXT on paper (7.6:1) + pressed */
  --emerald-600: #0E7250;  /* PRIMARY fill (white label 5.9:1) */
  --emerald-500: #12805B;  /* mid / large accents */
  --emerald-300: #7FBFA3;  /* decorative borders, soft accents */
  --emerald-100: #DDEBE0;  /* tint surface — chips, hover on paper */
  --emerald-50:  #EEF5EF;  /* faint tint band */

  /* Petal — supporting accent. Soft chrysanthemum blush (菊),
     echoing the "Petal" in the name. Decorative only (dots,
     floral marks, badges). NOT body text. */
  --petal-700:   #A85860;  /* small accents needing contrast */
  --petal-500:   #D98A93;  /* accent */
  --petal-300:   #F0C4C8;  /* soft tint (badge bg) */
  --petal-100:   #F8E6E8;  /* faint */

  /* Semantic */
  --success:     #227A4E;
  --warn:        #B5811C;
  --error:       #B23B3B;  /* warm red, sits on cream (5.4:1) */
  --muted:       var(--ink-muted);

  /* ----------------------------------------------------------
     NAMED INTENT TOKENS — reference these in product code,
     not the raw ramps above.
     ---------------------------------------------------------- */
  --bg:            var(--paper);
  --bg-alt:        var(--paper-soft);
  --surface-1:     var(--surface);
  --text:          var(--ink);
  --text-2:        var(--ink-soft);
  --text-3:        var(--ink-muted);
  --brand:         var(--emerald-600);   /* fills, icons (large) */
  --brand-strong:  var(--emerald-700);   /* emerald text on paper, pressed */
  --brand-tint:    var(--emerald-100);
  --accent:        var(--petal-500);
  --on-brand:      #FFFFFF;               /* label on emerald fill */
  --border:        var(--paper-line);
  --focus:         var(--emerald-600);

  /* ----------------------------------------------------------
     TYPE SCALE — mobile-first, H1 capped at 44px.
     clamp(min, fluid, max): grows from phone up to the cap.
     ---------------------------------------------------------- */
  --fs-display:    clamp(30px, 7.5vw, 44px);  /* hero H1 (CJK lead) */
  --fs-h2:         clamp(22px, 5vw, 30px);
  --fs-h3:         clamp(19px, 3.5vw, 22px);
  --fs-body-lg:    18px;   /* Chinese lead paragraph */
  --fs-body:       16px;   /* base — minimum for primary reading */
  --fs-companion:  14px;   /* English companion line (secondary) */
  --fs-caption:    13px;
  --fs-kicker:     12px;   /* eyebrow label, letter-spaced */

  /* Line-height — CJK runs looser than Latin for readability */
  --lh-cjk-display: 1.25;
  --lh-cjk:         1.75;  /* CJK body */
  --lh-latin:       1.5;   /* Latin body */
  --lh-tight:       1.2;

  /* Letter-spacing — NEVER apply negative tracking to CJK.
     Latin display may tighten slightly; kickers track open. */
  --ls-display:  -0.01em;  /* Latin display only */
  --ls-kicker:    0.12em;
  --ls-cjk:       0;        /* CJK: zero or slightly positive only */

  /* Weights (system fonts expose 400/500/600/700) */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ----------------------------------------------------------
     SPACING — 4 / 8 based
     ---------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --container:      760px;   /* reading column (single-column site) */
  --container-wide: 1080px;  /* full-bleed hero / media rows */
  --gutter:         20px;    /* base side padding */

  /* Tap targets — WeChat mobile, generous */
  --tap-min:  44px;   /* absolute minimum (WCAG) */
  --tap-comfy: 48px;  /* buttons / primary CTAs */

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --radius-sm:   10px;
  --radius-md:   14px;   /* buttons, cards */
  --radius-lg:   20px;   /* media, panels */
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — soft, warm-tinted, low. Paper is matte.
     ---------------------------------------------------------- */
  --shadow-card:  0 1px 2px rgba(31,42,36,.05), 0 8px 24px rgba(31,42,36,.06);
  --shadow-pop:   0 2px 6px rgba(31,42,36,.08), 0 14px 34px rgba(31,42,36,.10);
  --shadow-focus: 0 0 0 2px var(--paper), 0 0 0 5px var(--emerald-600);

  /* ----------------------------------------------------------
     MOTION — restrained. Honoured only when the user allows it.
     ---------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur-med:  220ms;
  --ease:     cubic-bezier(.2,.7,.3,1);

  /* Breakpoints (documentation — CSS reads them in @media below) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}

/* Reduced motion: strip transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}