/* ============================================================
   GPF Hong Kong · Design Tokens
   Institutional finance editorial — McKinsey/Bloomberg register
   ============================================================ */

:root {
  /* ---- Brand · restrained steel/ice accent ---- */
  --brand-cyan: #2E9BC9;          /* calmer, less neon */
  --brand-cyan-bright: #6FC2E4;   /* ice accent */
  --brand-cyan-dim: #1C6E94;
  --brand-ice: #CFE6F2;
  --brand-aurora: #A9D6E8;        /* cool platinum-ice (no green) */
  --brand-platinum: #DCE6EE;

  /* ---- Dark (default) · deep institutional navy ---- */
  --bg-0: #050E18;
  --bg-1: #081523;
  --bg-2: #0C1E30;
  --bg-3: #13293E;
  --bg-4: #1D3650;

  --text-0: #F2F7FB;
  --text-1: #C9D6E2;
  --text-2: #8FA3B6;
  --text-3: #8294A7;   /* raised for AA contrast on dark surfaces */

  --border-1: rgba(155, 185, 210, 0.16);
  --border-2: rgba(155, 185, 210, 0.30);
  --border-3: rgba(207, 230, 242, 0.50);

  --panel-grad: linear-gradient(155deg, rgba(12, 30, 48, 0.90), rgba(7, 16, 27, 0.97));
  --panel-glass: linear-gradient(155deg, rgba(16, 34, 54, 0.62), rgba(8, 18, 30, 0.78));
  --panel-border: rgba(155, 185, 210, 0.18);
  --glow-cyan: 0 20px 44px rgba(0, 0, 0, 0.45);   /* elevation, not neon */
  --accent-line: rgba(111, 194, 228, 0.55);
  --accent-ink: #05101A;   /* ink on bright accent fills (dark theme: dark ink on ice) */

  --video-opacity: 0.78;
  --video-filter: contrast(1.08) brightness(0.92) saturate(1.1) hue-rotate(-4deg);
  /* strong behind the left headline, clears in the middle so the video shows, slight at the right (panel has its own backing) */
  --hero-scrim: linear-gradient(95deg, rgba(5, 14, 24, 0.94) 0%, rgba(5, 14, 24, 0.86) 34%, rgba(5, 14, 24, 0.40) 52%, rgba(5, 14, 24, 0.08) 68%, rgba(5, 14, 24, 0.26) 100%);
  --metallic-grad: linear-gradient(100deg, #DCE6EE 0%, #6FC2E4 17%, #FFFFFF 33%, #AFC9D8 49%, #FFFFFF 65%, #6FC2E4 82%, #DCE6EE 100%);

  /* ---- Semantic ---- */
  --ok: #2FAE6B;
  --warn: #D9A441;
  --bad: #D8584F;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  /* ---- Layout ---- */
  --max-w: 1320px;
  --gutter: clamp(20px, 4vw, 88px);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  /* ---- Fluid type scale ---- */
  --fs-display: clamp(46px, 8vw, 132px);
  --fs-h2: clamp(30px, 4.4vw, 58px);
  --fs-h3: clamp(21px, 2.2vw, 31px);
  --fs-lede: clamp(17px, 1.5vw, 22px);
  --fs-body: clamp(15px, 1vw, 16.5px);
  --fs-num: clamp(38px, 5vw, 76px);

  /* ---- Fonts · editorial serif + institutional grotesque ---- */
  /* Manrope everywhere (self-hosted). Chinese falls back to system CJK. */
  --font-display: "Manrope", "Noto Sans HK", "PingFang HK", "Microsoft JhengHei", "Segoe UI", -apple-system, sans-serif;
  --font-sans: var(--font-display);
  --font-serif: var(--font-display);   /* legacy aliases — single family now */
  --font-mono: ui-monospace, "SF Mono", "Consolas", monospace;
}

/* ---------- Light theme · editorial paper ---------- */
[data-theme="light"] {
  --bg-0: #F4F2EC;          /* warm paper, not stark white */
  --bg-1: #EDEBE4;
  --bg-2: #FFFFFF;
  --bg-3: #FAF9F5;
  --bg-4: #E4E1D8;

  --text-0: #0A1A26;
  --text-1: #1B2C3A;
  --text-2: #45576A;
  --text-3: #6A7B8C;

  --border-1: rgba(20, 45, 65, 0.16);
  --border-2: rgba(20, 45, 65, 0.32);
  --border-3: rgba(20, 45, 65, 0.50);

  --brand-cyan: #0B5E86;
  --brand-cyan-bright: #0A4E70;
  --brand-cyan-dim: #053650;
  --brand-ice: #0B3D5C;
  --brand-aurora: #1C6E94;
  --brand-platinum: #2A4255;

  --panel-grad: linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(248, 247, 242, 0.99));
  --panel-glass: linear-gradient(155deg, rgba(255, 255, 255, 0.90), rgba(247, 246, 241, 0.94));
  --panel-border: rgba(20, 45, 65, 0.16);
  --glow-cyan: 0 18px 40px rgba(15, 35, 55, 0.12);
  --accent-line: rgba(11, 94, 134, 0.45);
  --accent-ink: #FFFFFF;   /* light theme: accent fills are navy → white ink */

  --video-opacity: 0.55;
  --video-filter: contrast(1.04) brightness(1.05) saturate(1.08);
  --hero-scrim: linear-gradient(95deg, rgba(244, 242, 236, 0.95) 0%, rgba(244, 242, 236, 0.88) 34%, rgba(244, 242, 236, 0.46) 52%, rgba(244, 242, 236, 0.12) 68%, rgba(244, 242, 236, 0.34) 100%);
  --metallic-grad: linear-gradient(100deg, #14202C 0%, #0B5E86 24%, #38566B 42%, #0B5E86 60%, #14202C 100%);
}