/* ============================================================
   马佳艺 · Jiayi Ma — Design tokens
   Direction: ivory editorial. Warm paper, deep ink, oxblood.
   Composition follows the centred, type-led restraint of a
   product page: the words carry the page, the image supports.
   One dominant field (warm off-white), one accent (oxblood).
   ============================================================ */

:root {
  /* ---- surface ladder ---------------------------------- */
  --bg:          #F5F3EE;   /* warm paper */
  --bg-lift:     #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #FAF9F6;

  /* ---- ink ---------------------------------------------- */
  --ink:         #14161A;   /* 16.3:1 on --bg */
  --ink-soft:    #3D434B;   /*  9.0:1 */
  --muted:       #5F6670;   /*  5.2:1 — smallest text still AA */

  /* ---- accent: oxblood ---------------------------------- */
  --accent:      #8C1D2F;   /*  8.1:1 */
  --accent-text: #7A1526;   /*  9.6:1 — safe at any size */
  --accent-deep: #5E1224;

  /* ---- atmosphere & chrome ------------------------------
     Everything the eye reads as "the palette" lives in tokens,
     so a new colour scheme is a token swap and nothing else.
     ------------------------------------------------------ */
  --nav-bg:        rgba(245, 243, 238, 0.72);
  /* The field is deliberately flat. A radial wash would make the
     paper lighter in some places than others, and the portrait —
     whose own background is one flat ivory — would then read as a
     rectangular patch sitting on top of it. Flat paper, no patch. */
  --glow-a:        transparent;
  --glow-b:        transparent;
  --glow-c:        transparent;
  --noise-opacity: 0.018;
  --noise-blend:   multiply;
  --selection-bg:  #8C1D2F;
  --selection-ink: #ffffff;
  --btn-primary-hover: #751827;
  --scrim:         rgba(20, 22, 26, 0.72);

  /* ---- elevation ----------------------------------------
     Light surfaces need shadow, not borders, to separate. Two
     stacked shadows read as one soft, physical lift. */
  --shadow-card:   0 1px 2px rgba(28, 24, 16, 0.05),
                   0 8px 24px -12px rgba(28, 24, 16, 0.14);
  --shadow-lift:   0 2px 6px rgba(28, 24, 16, 0.06),
                   0 20px 44px -18px rgba(28, 24, 16, 0.20);
  --shadow-nav:    0 1px 0 rgba(28, 24, 16, 0.06);

  /* ---- rules -------------------------------------------- */
  --rule:        #DCD8CF;
  --rule-soft:   #E8E5DE;
  --rule-strong: #C3BDB1;

  /* ---- type faces --------------------------------------
     Deliberate two-face pairing, both system-resident: no
     webfont request, no render block, no CN CDN risk.
       sans — structure and body
       mono — every piece of metadata: dates, labels, counts
     The contrast between them, plus a wide scale range, is
     what carries the hierarchy — not a display typeface.
     ------------------------------------------------------ */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
          "Noto Sans CJK SC", "Source Han Sans SC", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Roboto Mono", "Courier New", monospace;

  /* ---- type scale (fluid) ------------------------------- */
  --t-display: clamp(3.1rem, 1.1rem + 8.2vw, 7.5rem);
  --t-h1:      clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
  --t-h2:      clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem);
  --t-h3:      clamp(1.08rem, 0.98rem + 0.42vw, 1.3rem);
  --t-lede:    clamp(1.04rem, 0.96rem + 0.42vw, 1.24rem);
  --t-body:    clamp(0.95rem, 0.92rem + 0.14vw, 1.02rem);
  --t-small:   0.875rem;
  --t-label:   clamp(0.7rem, 0.66rem + 0.15vw, 0.75rem);  /* mono labels */

  /* ---- tracking ----------------------------------------- */
  --track-display: -0.045em;
  --track-tight:   -0.02em;
  --track-label:    0.18em;

  /* ---- spacing rhythm (4px base, non-uniform on purpose) - */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --s-gutter:  clamp(1.25rem, 0.5rem + 3.2vw, 3.5rem);

  /* ---- measure ------------------------------------------ */
  --w-page:    1180px;
  --w-text:    62ch;

  /* ---- breakpoint scale ---------------------------------
     One system, used everywhere. CSS cannot read custom
     properties inside a media query, so these are recorded
     here as the single source of truth and written literally
     in the queries themselves.

        ≤ 479    phone, small      iPhone SE / mini
       480–767   phone, large      iPhone Pro Max, landscape
       768–1023  tablet            iPad portrait, iPad Air
      1024–1439  laptop            iPad landscape, MacBook Air
      1440–1799  desktop
        ≥ 1800   desktop, large    27"+ displays

     Layout changes happen at 480 / 768 / 1024 / 1800 only.
     ------------------------------------------------------ */
  --nav-h: 60px;

  /* ---- motion ------------------------------------------- */
  --dur-fast:   160ms;
  --dur-base:   320ms;
  --dur-slow:   720ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- shape -------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 980px;
}