/* ztpawn design tokens — single source of truth
 * Direction: Stripe / Linear modern SaaS, but with mid-age user adjustments:
 *   - body font min 16px on mobile
 *   - CTA always solid block (never text-only link)
 *   - no over-pale colors / no over-thin borders
 *
 * Rule: every magic number in CSS or HTML must come from here.
 */

:root {
  /* ----- color ----- */
  --color-bg:               #FAFAF8;       /* off-white, warmer than #FFF, less clinical */
  --color-bg-elevated:      #FFFFFF;
  --color-bg-soft:          #F2F2EE;
  --color-bg-dark:          #202135;       /* origin's deep navy-grey */
  --color-bg-dark-soft:     #2A2C44;

  --color-text:             #1A1F2A;
  --color-text-strong:      #0F1419;
  --color-text-muted:       #5E6470;
  --color-text-faint:       #8A8F99;
  --color-text-on-dark:     #F2F2EE;
  --color-text-muted-on-dark: #A8AEB8;

  --color-border:           #E4E2DC;
  --color-border-strong:    #C8C5BC;
  --color-border-on-dark:   #2A323D;

  /* brand: traditional Taiwanese pawnshop orange — energetic, trustworthy, in-line with origin site */
  --color-brand:            #C85A1A;       /* refined from origin's #E76E1F — slightly less neon */
  --color-brand-hover:      #A84610;
  --color-brand-soft:       #FDEEE3;
  --color-brand-fg:         #FFFFFF;

  /* accent: warm gold — origin site secondary, retained for headings + dividers */
  --color-accent:           #B99038;       /* origin gold */
  --color-accent-hover:     #9A782C;
  --color-accent-soft:      #F7EDD4;

  /* semantic (small footprint, mostly unused on a landing site) */
  --color-success:          #16794F;
  --color-warning:          #B8761E;
  --color-error:            #B82E2E;

  /* ----- typography ----- */
  --font-sans:              "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont,
                            "Segoe UI", "PingFang TC", "Heiti TC", "Microsoft JhengHei",
                            sans-serif;
  --font-display:           "Inter", "Noto Sans TC", sans-serif;

  --fw-regular:             400;
  --fw-medium:              500;
  --fw-semibold:            600;
  --fw-bold:                700;

  /* sizes — mobile minimum 16px enforced */
  --fs-display:             clamp(36px, 5.5vw, 56px);
  --fs-h1:                  clamp(30px, 4.5vw, 44px);
  --fs-h2:                  clamp(24px, 3.2vw, 34px);
  --fs-h3:                  clamp(20px, 2.4vw, 24px);
  --fs-body-lg:             18px;
  --fs-body:                16px;
  --fs-small:               14px;
  --fs-eyebrow:             13px;

  --lh-tight:               1.15;
  --lh-snug:                1.3;
  --lh-normal:              1.55;
  --lh-relaxed:             1.7;

  --tracking-tight:         -0.02em;
  --tracking-normal:        0;
  --tracking-wide:          0.08em;

  /* ----- spacing (8pt grid) ----- */
  --space-1:                4px;
  --space-2:                8px;
  --space-3:                12px;
  --space-4:                16px;
  --space-5:                24px;
  --space-6:                32px;
  --space-7:                48px;
  --space-8:                64px;
  --space-9:                96px;
  --space-10:               128px;

  /* ----- radius ----- */
  --radius-sm:              6px;
  --radius-md:              12px;
  --radius-lg:              24px;
  --radius-full:            9999px;

  /* ----- shadow ----- */
  --shadow-1:               0 1px 2px rgba(15, 20, 25, 0.06),
                            0 0 0 1px rgba(15, 20, 25, 0.04);
  --shadow-2:               0 4px 16px rgba(15, 20, 25, 0.08),
                            0 0 0 1px rgba(15, 20, 25, 0.04);
  --shadow-3:               0 16px 40px rgba(15, 20, 25, 0.14);

  /* ----- motion ----- */
  --motion-fast:            120ms;
  --motion-normal:          220ms;
  --motion-slow:            360ms;
  --ease-standard:          cubic-bezier(0.2, 0, 0, 1);

  /* ----- layout ----- */
  --container-max:          1180px;
  --container-px:           20px;
  --section-py:             clamp(64px, 9vw, 120px);
  --header-h:               72px;
  --mobile-cta-h:           64px;

  /* ----- breakpoints (reference only — CSS uses values literally) ----- */
  --bp-sm:                  640px;
  --bp-md:                  768px;
  --bp-lg:                  1024px;
  --bp-xl:                  1280px;
}

/* ============== dark theme ============== */
/* Applied when <html data-theme="dark"> (set by main.js based on localStorage / prefers-color-scheme).
 * Brand orange (#C85A1A) + gold (#B99038) carry across both themes — they're the identity.
 * Surfaces / text / borders flip; "always-dark" tokens (--color-bg-dark, --color-text-on-dark) stay unchanged. */

:root[data-theme="dark"] {
  --color-bg:               #14181F;       /* deepest surface */
  --color-bg-elevated:      #1F262F;       /* cards / panels */
  --color-bg-soft:          #1A2028;       /* alt section bg */

  --color-text:             #E8E8EA;
  --color-text-strong:      #F7F7F8;
  --color-text-muted:       #A5ACB7;
  --color-text-faint:       #6E7480;

  --color-border:           #2A323D;
  --color-border-strong:    #3A4452;

  /* brand identity stays — orange/gold still hits AA on dark */
  --color-brand-soft:       #3A1F12;       /* dark contextual tint of brand */
  --color-accent-soft:      #2E2515;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:          0ms;
    --motion-normal:        0ms;
    --motion-slow:          0ms;
  }
}