/* ============================================================
   Pocket CEO — Colors & Type
   The single source of truth for the Pocket CEO visual system.
   Import this file into any surface (web, deck, doc, UI kit).
   ============================================================ */

/* ---- Webfonts (self-hosted, no third-party CDN) ----
   Inter, JetBrains Mono, General Sans, Noto Sans HK all ship from /fonts.
   See fonts/_fonts.css for the @font-face declarations.
   Self-hosting drops the runtime dependency on fonts.googleapis.com and
   api.fontshare.com (both blocked or slow in mainland China) and avoids
   tracking-cookie attribution from Google Fonts.
*/
@import url('fonts/_fonts.css');

:root {
  /* ========== CORE PALETTE — Tesla system ==========
     One chroma color (Electric Blue), pure white canvas, solid grays
     for text hierarchy. No secondary accent. No gradients. */
  --pc-navy:        #3E6AE1;  /* Electric Blue — sole CTA / accent color */
  --pc-navy-deep:   #171A20;  /* Carbon Dark — dark surfaces, final-CTA bg */
  --pc-orange:      #3E6AE1;  /* Deprecated — neutralized to Electric Blue */
  --pc-ink:         #171A20;  /* Carbon Dark — headings, primary text */
  --pc-off-white:   #FFFFFF;  /* Pure White — dominant canvas */
  --pc-surface:     #F4F4F4;  /* Light Ash — alternate section bg */

  /* Tesla solid-gray text scale (Tesla doesn't use alphas for hierarchy) */
  --pc-graphite:    #393C41;  /* Body text */
  --pc-pewter:      #5C5E62;  /* Tertiary / sub-links */
  --pc-silver-fog:  #8E8E8E;  /* Placeholders, disabled */
  --pc-cloud-gray:  #EEEEEE;  /* Light borders, dividers */
  --pc-pale-silver: #D0D1D2;  /* Subtle UI borders */

  /* Electric Blue tints for UI states (opacities on white) */
  --pc-navy-12:     rgba(62, 106, 225, 0.12);
  --pc-navy-08:     rgba(62, 106, 225, 0.08);
  --pc-navy-04:     rgba(62, 106, 225, 0.04);

  /* Amber — warm pair-accent for Operations OS (service-business pair).
     Used as a 2px stripe + dot. Reads "warm, hospitable" against the
     cooler Electric Blue used for the Insurance Practice Suite pair. */
  --pc-amber:       #C08A3E;
  --pc-amber-12:    rgba(192, 138, 62, 0.12);
  --pc-amber-08:    rgba(192, 138, 62, 0.08);
  --pc-amber-04:    rgba(192, 138, 62, 0.04);

  /* Carbon Dark tints — kept for backwards compat with existing components */
  --pc-ink-72:      rgba(23, 26, 32, 0.72);
  --pc-ink-56:      rgba(23, 26, 32, 0.56);
  --pc-ink-40:      rgba(23, 26, 32, 0.40);
  --pc-ink-12:      rgba(23, 26, 32, 0.12);
  --pc-ink-08:      rgba(23, 26, 32, 0.08);

  /* ========== SEMANTIC COLOR ROLES ========== */
  --pc-bg:          var(--pc-off-white);
  --pc-bg-alt:      var(--pc-surface);
  --pc-bg-final:    var(--pc-navy-deep);  /* dark surface / final CTA */
  --pc-fg:          var(--pc-ink);
  --pc-fg-muted:    var(--pc-graphite);   /* solid, not alpha — Tesla-style */
  --pc-fg-subtle:   var(--pc-pewter);
  --pc-fg-inverse:  var(--pc-off-white);
  --pc-accent:      var(--pc-navy);        /* Electric Blue — sole accent */
  --pc-accent-rare: var(--pc-navy);        /* Tesla has no rare accent — same blue */
  --pc-border:      var(--pc-cloud-gray);
  --pc-border-strong: var(--pc-pale-silver);
  --pc-eyebrow:     var(--pc-navy);
  --pc-link:        var(--pc-navy);
  --pc-link-hover:  var(--pc-ink);

  /* ========== TYPE FAMILIES ========== */
  --pc-font-display: "General Sans", "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --pc-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --pc-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Hero / section-head display face: Geist Mono (Vercel) carries the
     startup-coded engineering-led vibe at large sizes. Used only on the
     biggest display moments — .display-xl and .display-lg. Card h3 and
     smaller heads stay General Sans for legibility in dense content. */
  --pc-font-hero:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* ========== TYPE SCALE (1.25 major third, mildly compressed at top) ========== */
  --pc-text-xs:   12px;
  --pc-text-sm:   14px;
  --pc-text-base: 16px;
  --pc-text-md:   18px;
  --pc-text-lg:   22px;   /* lead / quote body */
  --pc-text-xl:   28px;   /* h4 */
  --pc-text-2xl:  36px;   /* h3 */
  --pc-text-3xl:  48px;   /* h2 */
  --pc-text-4xl:  64px;   /* h1 */
  --pc-text-5xl:  96px;   /* display / hero */

  /* Tracking */
  --pc-track-display: -0.025em;
  --pc-track-tight:   -0.015em;
  --pc-track-normal:   0;
  --pc-track-eyebrow:  0.12em;   /* mono eyebrows, ALL CAPS */

  /* Leading */
  --pc-lead-tight:   1.04;
  --pc-lead-snug:    1.15;
  --pc-lead-normal:  1.45;
  --pc-lead-loose:   1.6;

  /* ========== SPACING (4px base, geometric) ========== */
  --pc-space-1:   4px;
  --pc-space-2:   8px;
  --pc-space-3:  12px;
  --pc-space-4:  16px;
  --pc-space-5:  24px;
  --pc-space-6:  32px;
  --pc-space-7:  48px;
  --pc-space-8:  64px;
  --pc-space-9:  96px;
  --pc-space-10: 128px;

  /* ========== RADII ========== */
  --pc-radius-xs:  4px;
  --pc-radius-sm:  8px;
  --pc-radius-md: 12px;
  --pc-radius-lg: 16px;
  --pc-radius-xl: 24px;
  --pc-radius-pill: 999px;

  /* ========== ELEVATION (Tesla — minimal, neutral, near-imperceptible) ========== */
  --pc-shadow-xs: 0 1px 2px rgba(23, 26, 32, 0.04);
  --pc-shadow-sm: 0 1px 3px rgba(23, 26, 32, 0.05);
  --pc-shadow-md: 0 4px 12px rgba(23, 26, 32, 0.06);
  --pc-shadow-lg: 0 12px 32px rgba(23, 26, 32, 0.08);

  /* ========== MOTION ========== */
  --pc-ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --pc-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);  /* OutExpo-ish */
  --pc-dur-fast:    120ms;
  --pc-dur-base:    200ms;
  --pc-dur-slow:    320ms;
}

/* ============================================================
   Semantic primitives — drop these in instead of per-page overrides.
   ============================================================ */

html, body {
  background: var(--pc-bg);
  color: var(--pc-fg);
  font-family: var(--pc-font-body);
  font-size: var(--pc-text-base);
  line-height: var(--pc-lead-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .pc-h1 {
  font-family: var(--pc-font-display);
  font-weight: 600;
  font-size: var(--pc-text-4xl);
  line-height: var(--pc-lead-tight);
  letter-spacing: var(--pc-track-display);
  color: var(--pc-fg);
  margin: 0;
  text-wrap: balance;
}
h2, .pc-h2 {
  font-family: var(--pc-font-display);
  font-weight: 600;
  font-size: var(--pc-text-3xl);
  line-height: var(--pc-lead-tight);
  letter-spacing: var(--pc-track-display);
  margin: 0;
  text-wrap: balance;
}
h3, .pc-h3 {
  font-family: var(--pc-font-display);
  font-weight: 600;
  font-size: var(--pc-text-2xl);
  line-height: var(--pc-lead-snug);
  letter-spacing: var(--pc-track-tight);
  margin: 0;
}
h4, .pc-h4 {
  font-family: var(--pc-font-display);
  font-weight: 600;
  font-size: var(--pc-text-xl);
  line-height: var(--pc-lead-snug);
  letter-spacing: var(--pc-track-tight);
  margin: 0;
}
.pc-display {
  font-family: var(--pc-font-display);
  font-weight: 600;
  font-size: var(--pc-text-5xl);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
p, .pc-p {
  font-family: var(--pc-font-body);
  font-size: var(--pc-text-base);
  line-height: var(--pc-lead-normal);
  color: var(--pc-fg-muted);
  text-wrap: pretty;
  margin: 0;
}
.pc-lead {
  font-size: var(--pc-text-lg);
  line-height: var(--pc-lead-normal);
  color: var(--pc-fg-muted);
  text-wrap: pretty;
}
.pc-eyebrow {
  font-family: var(--pc-font-mono);
  font-weight: 500;
  font-size: var(--pc-text-xs);
  letter-spacing: var(--pc-track-eyebrow);
  text-transform: uppercase;
  color: var(--pc-eyebrow);
}
.pc-stat {
  font-family: var(--pc-font-mono);
  font-weight: 500;
  font-size: var(--pc-text-4xl);
  letter-spacing: -0.02em;
  color: var(--pc-navy);
  line-height: 1;
  font-feature-settings: "tnum" 1;
}
code, .pc-code {
  font-family: var(--pc-font-mono);
  font-size: 0.92em;
  background: var(--pc-navy-08);
  color: var(--pc-navy);
  padding: 0.08em 0.35em;
  border-radius: var(--pc-radius-xs);
}
a, .pc-link {
  color: var(--pc-link);
  text-decoration: none;
  border-bottom: 1px solid var(--pc-navy-12);
  transition: border-color var(--pc-dur-fast) var(--pc-ease-standard),
              color     var(--pc-dur-fast) var(--pc-ease-standard);
}
a:hover, .pc-link:hover {
  color: var(--pc-link-hover);
  border-bottom-color: currentColor;
}
hr, .pc-rule {
  border: 0;
  border-top: 1px solid var(--pc-border);
  margin: var(--pc-space-6) 0;
}
::selection {
  background: var(--pc-navy);
  color: var(--pc-off-white);
}

/* ============================================================
   CJK / Hong Kong Traditional Chinese (zh-Hant-HK)
   Latin glyphs fall through to Inter / General Sans; CJK glyphs
   resolve via the fallback chain below. CJK needs more leading,
   no negative tracking, and word-break: keep-all so phrases
   don't break mid-character.
   ============================================================ */
:lang(zh) {
  font-family: var(--pc-font-body), "Noto Sans HK", "PingFang HK",
               "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3,
:lang(zh) .pc-h1, :lang(zh) .pc-h2, :lang(zh) .pc-h3,
:lang(zh) .display-xl, :lang(zh) .display-lg, :lang(zh) .display-md {
  font-family: var(--pc-font-display), "Noto Sans HK", "PingFang HK",
               "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  letter-spacing: 0;
  line-height: 1.4;
}
/* CJK display (zh) needs to override Geist Mono (Latin-only) and the mono
   stylistic features. Tighter leading at display sizes than 1.4 — closer to 1.15
   so massive character-grids don't fly apart vertically. */
:lang(zh) .display-xl,
:lang(zh) .display-lg {
  font-family: "Noto Sans HK", "PingFang HK", "PingFang TC",
               "Microsoft JhengHei", "Heiti TC", "General Sans", sans-serif;
  line-height: 1.15;
  letter-spacing: 0;
  font-feature-settings: normal;
}
/* DE — compound words (Versicherungs-Brokerage) need hyphenation safety
   at display sizes to avoid horizontal overflow. */
:lang(de) .display-xl,
:lang(de) .display-lg {
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: normal;
}
:lang(zh) p, :lang(zh) .lede, :lang(zh) li {
  line-height: 1.75;
  letter-spacing: 0;
}
/* per-element tagging: any element that flips to zh via JS i18n
   gets the right typographic treatment even if its parent is en/de */
[lang="zh-Hant-HK"], [lang="zh-Hant"], [lang="zh-HK"], [lang="zh"] {
  font-family: var(--pc-font-body), "Noto Sans HK", "PingFang HK",
               "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}