/* ============================================================
   REVO JURIS / 億誠國際法律顧問有限公司 — Foundations
   Palette aligned to the official Brand Identity Guide (2025):
            Jurisprudence Navy · Institutional Gold ·
            Charcoal Slate · Parchment White.
   Type:    Hanken Grotesk (Latin) · Noto Sans HK (中文) —
            per client direction (modern sans, not the guide's serif).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=Noto+Sans+HK:wght@300;400;500;700;900&display=swap');

:root {
  /* ---- Type families ---------------------------------------- */
  --font-display: 'Hanken Grotesk', 'Noto Sans HK', system-ui, -apple-system, sans-serif;
  --font-serif:   'Hanken Grotesk', 'Noto Sans HK', system-ui, sans-serif;
  --font-sans:    'Hanken Grotesk', 'Noto Sans HK', system-ui, -apple-system, sans-serif;
  --font-cjk:     'Noto Sans HK', 'Hanken Grotesk', system-ui, sans-serif;
  /* Mixed EN + 中文 runs use --font-sans; HK glyphs fall through to Noto Sans HK. */

  /* ---- Brand: Jurisprudence Navy (#0F2040 anchor) ----------- */
  --navy-950: #081225;
  --navy-900: #0F2040;   /* PRIMARY brand colour */
  --navy-800: #16294D;
  --navy-700: #1F3760;
  --navy-600: #2C4773;
  --navy-500: #3C5888;

  /* ---- Brand: Institutional Gold (#A4854B accent) ----------- */
  --gold-800: #6E5829;
  --gold-700: #846A38;
  --gold-600: #957842;
  --gold-500: #A4854B;   /* PRIMARY accent */
  --gold-400: #C9A96E;   /* gold-light (guide) */
  --gold-300: #E8D5B0;   /* gold-pale (guide) */
  --gold-100: #F3EAD7;

  /* ---- Parchment / paper (warm, never stark white) ---------- */
  --paper-50:  #F9F9F6;  /* Parchment White (guide) */
  --paper-100: #F0EFEA;  /* parchment-dark (guide) */
  --paper-200: #E8E8E2;
  --paper-300: #DCDBD2;

  /* ---- Charcoal Slate / neutral ink ramp -------------------- */
  --ink-900: #1C1C1C;
  --ink-800: #292929;
  --ink-700: #333333;    /* Charcoal Slate — body copy (guide) */
  --ink-600: #555555;
  --ink-500: #777777;
  --ink-400: #999999;
  --ink-300: #BBBBBB;
  --ink-200: #DCDBD2;
  --ink-100: #ECECE6;

  /* ---- Semantic accents (used sparingly) -------------------- */
  --urgent-700: #8C2A26;
  --urgent-600: #A6332E;
  --urgent-500: #B23A30;   /* criminal hotline — muted, not neon */
  --urgent-100: #F2E2E0;
  --success-600: #2F6E4F;
  --success-500: #4CAF82;  /* guide "do" accent */
  --success-100: #E3F0E8;

  /* ---- Surfaces & semantic mapping -------------------------- */
  --bg:            var(--paper-50);
  --surface:       #FFFFFF;
  --surface-2:     var(--paper-100);
  --surface-ink:   var(--navy-900);
  --border:        #E5E3DA;   /* warm hairline on light */
  --border-strong: #D6D3C7;
  --border-on-dark: rgba(164, 133, 75, 0.22);

  /* text */
  --fg-1: var(--ink-700);     /* charcoal — primary text on light */
  --fg-2: var(--ink-600);
  --fg-3: var(--ink-500);
  --fg-brand: var(--navy-900);
  --fg-accent: var(--gold-700);
  --fg-on-dark-1: #F4F1E9;
  --fg-on-dark-2: rgba(244, 241, 233, 0.70);
  --fg-on-dark-3: rgba(244, 241, 233, 0.45);

  /* ---- Radii (restrained — institutional, near-square) ------ */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius:    4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ---- Elevation (soft, navy-tinted, low) ------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 32, 64, 0.05);
  --shadow-sm: 0 2px 10px rgba(15, 32, 64, 0.07);
  --shadow-md: 0 10px 30px rgba(15, 32, 64, 0.10);
  --shadow-lg: 0 22px 55px rgba(15, 32, 64, 0.14);
  --shadow-xl: 0 34px 80px rgba(8, 18, 37, 0.24);
  --shadow-gold: 0 10px 30px rgba(164, 133, 75, 0.26);
  --ring-gold: 0 0 0 3px rgba(164, 133, 75, 0.30);

  /* ---- Spacing (4px base) ----------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  /* ---- Motion (measured, no bounce) ------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur: 260ms; /* @kind other */
  --dur-slow: 520ms; /* @kind other */

  /* ---- Layout ----------------------------------------------- */
  --container: 1200px;
  --container-narrow: 880px;
  --gutter: 24px;
}

/* ============================================================
   Semantic type — EB Garamond display, lighter weights for the
   elegant serif look the guide calls for (400–600, not 800).
   ============================================================ */

.display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--navy-900);
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--navy-900);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(25px, 2.8vw, 32px);
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--navy-900);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}
.h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.34;
  letter-spacing: -0.006em;
  color: var(--navy-900);
}
/* Caps display subheading */
.display-caps {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--navy-900);
}
.body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.62;
  color: var(--fg-2);
}
.body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
}
.body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-3);
}
/* Overline / eyebrow */
.overline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-accent);
}
/* CJK display — Noto Sans HK */
.cjk-display {
  font-family: var(--font-cjk);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.32;
}
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }