/* ============================================================
   PARAMOUNT ASIA (PASIA) — Design Tokens
   The shared design system every mock-up is built from.
   Deep-green "mountain" identity + gold, on a warm calm canvas.
   International corporate · rooted in trust · direct for HK.

   Colours are derived from the PASIA badge logo:
     deep forest #082f2a / #0e4038, gold #c99a47 / #d4a650,
     sage peak #829182, silver ridge #bfc2c0, white snow.

   Never redefine a token inside a page. Add page-scoped classes
   instead. Type base stays >= 16px for fast, easy HK reading.
   ============================================================ */

:root {
  /* ---------- BRAND · greens (mountain, carries the page) ---------- */
  --deep-forest:  #082f2a;   /* darkest ground · badge outer, footers */
  --forest:       #0e4038;   /* PRIMARY · brand soul, badge inner */
  --pine:         #16564b;   /* interactive green · hovers, links */
  --sage:         #7f9186;   /* muted peak green · secondary, quiet fills */

  /* ---------- BRAND · gold (accent, premium, "rooted in trust") --- */
  --gold:         #c99a47;   /* PRIMARY accent · the one warm moment */
  --gold-bright:  #d8b25e;   /* highlights, hover on gold, underlines */
  --gold-deep:    #8f6f38;   /* gold text on light · meets contrast */

  /* ---------- SUPPORT ---------- */
  --silver:       #bfc2c0;   /* cool "snow ridge" grey · fine UI accents */

  /* ---------- NEUTRALS · warm surfaces + text ---------- */
  --paper:        #ffffff;   /* cards, primary surface */
  --mist:         #f7f4ee;   /* warm off-white · page background */
  --surface-2:    #efeadd;   /* raised warm fill · quiet bands */
  --ink:          #14231f;   /* body text · green-black */
  --ink-soft:     #45524d;   /* secondary text */
  --ink-faint:    #6f7b76;   /* captions, meta, placeholders */
  --line:         #e5e0d4;   /* warm hairlines, borders */

  /* ---------- TINTS (translucent brand, for bands + chips) -------- */
  --forest-tint-05: rgba(14,64,56,.05);
  --forest-tint-10: rgba(14,64,56,.10);
  --forest-tint-20: rgba(14,64,56,.20);
  --gold-tint-10:   rgba(201,154,71,.12);
  --gold-tint-20:   rgba(201,154,71,.22);

  /* ---------- SEMANTIC ---------- */
  --price:        #1c6b4a;   /* rate/salary green (HK job-card style) */
  --price-bg:     #e6f4ec;
  --success:      #1c6b4a;
  --warning:      #b4791f;
  --danger:       #b23b2e;
  --info:         var(--pine);

  /* ---------- TYPE FAMILIES ----------
     Display: Fraunces — a warm, optical old-style serif. Premium,
              institutional, distinctive; pairs with gold.
     Body/UI: Inter — clean, neutral, international, fast to read.
     Chinese (Phase 1): fall through to system CJK below.        */
  --display: "Fraunces", "Times New Roman", Georgia, serif;
  --sans: "Inter", -apple-system, "Segoe UI", "Noto Sans SC",
          "Noto Sans TC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  /* ---------- FLUID TYPE SCALE (min 16px body) ---------- */
  --text-xs:    clamp(.75rem, .72rem + .12vw, .8125rem);   /* 12–13 */
  --text-sm:    clamp(.8125rem, .78rem + .16vw, .9375rem); /* 13–15 */
  --text-base:  clamp(1rem, .96rem + .2vw, 1.125rem);      /* 16–18 */
  --text-lg:    clamp(1.125rem, 1.05rem + .34vw, 1.375rem);/* 18–22 */
  --text-xl:    clamp(1.3rem, 1.15rem + .7vw, 1.75rem);    /* 21–28 */
  --text-2xl:   clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);     /* 26–38 */
  --text-3xl:   clamp(2rem, 1.5rem + 2.3vw, 3.25rem);      /* 32–52 */
  --text-hero:  clamp(2.5rem, 1.6rem + 4.2vw, 5rem);       /* 40–80 */

  --leading-tight: 1.08;
  --leading-snug:  1.28;
  --leading-body:  1.65;

  /* ---------- SPACING (8px base rhythm) ---------- */
  --s-1: .5rem;  --s-2: .75rem; --s-3: 1rem;   --s-4: 1.5rem;
  --s-5: 2rem;   --s-6: 3rem;   --s-7: 4.5rem; --s-8: 7rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(3.5rem, 7vw, 7rem);
  --container-width: 1200px;
  --container-narrow: 760px;

  /* ---------- RADII ---------- */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 100px;

  /* ---------- ELEVATION (warm-tinted, soft) ---------- */
  --shadow-s:     0 1px 2px rgba(20,35,31,.06), 0 2px 6px rgba(20,35,31,.05);
  --shadow-m:     0 8px 24px -12px rgba(20,35,31,.22);
  --shadow-lift:  0 22px 48px -24px rgba(20,35,31,.32);
  --shadow-green: 0 14px 32px -16px rgba(14,64,56,.5);
  --shadow-gold:  0 12px 30px -14px rgba(201,154,71,.5);

  /* ---------- MOTION ---------- */
  --dur-fast:   150ms;
  --dur-normal: 300ms;
  --dur-slow:   600ms;
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
}

/* ============================================================
   BASE RESET + PRIMITIVES
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--pine); text-decoration: none; }
a:hover { color: var(--forest); }

img, svg, video { display: block; max-width: 100%; }

strong, b { font-weight: 600; color: var(--ink); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ============================================================
   SHARED UTILITY PRIMITIVES (safe to use across all mock-ups)
   ============================================================ */

/* Eyebrow / kicker */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1.5px;
  background: var(--gold); flex: none;
}
.eyebrow.on-dark { color: var(--gold-bright); }
.eyebrow.on-dark::before { background: var(--gold-bright); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sans); font-weight: 600; font-size: var(--text-base);
  line-height: 1; padding: .95em 1.7em;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out-soft),
              background-color var(--dur-normal) ease,
              color var(--dur-normal) ease,
              box-shadow var(--dur-normal) ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--forest); color: #fff; box-shadow: var(--shadow-green); }
.btn-primary:hover { background: var(--deep-forest); color: #fff; }
.btn-gold { background: var(--gold); color: var(--deep-forest); box-shadow: var(--shadow-gold); }
.btn-gold:hover { background: var(--gold-bright); color: var(--deep-forest); }
.btn-ghost { border-color: var(--forest); color: var(--forest); }
.btn-ghost:hover { background: var(--forest-tint-05); }
.btn-ghost.on-dark { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-ghost.on-dark:hover { background: rgba(255,255,255,.12); }

/* Pills / tags (HK job-card style) */
.tag {
  display: inline-block;
  font-family: var(--sans); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .01em; padding: .42em 1em; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-soft);
}
.tag--active { background: var(--gold-tint-20); color: var(--gold-deep); font-weight: 700; }
.tag--new    { background: var(--price-bg); color: var(--price); font-weight: 700; }
.tag--forest { background: var(--forest-tint-10); color: var(--forest); }

/* Price chip (range-based rate cards / salary) */
.price {
  font-family: var(--sans); font-weight: 700; color: var(--price);
  background: linear-gradient(transparent 62%, var(--price-bg) 62%);
  padding: 0 .15em;
}

/* Layout helpers */
.container { max-width: var(--container-width); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }

/* Reduced motion: honour it everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}