/* ============================================================================
   TAI CHI GLOBE — DESIGN TOKENS + BASE TYPE
   colors_and_type.css
   Source of truth: WelchWellbeingHub-deploy/tcg-vision.html + ww-hub-theme.css
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=DM+Sans:wght@400;500;600;700&family=Cinzel:wght@400;600;700&display=swap');

:root {
  /* ── CORE BRAND PALETTE (public TCG) ── */
  --tcg-forest:       #2c5f2d;
  --tcg-jade:         #3d7068;
  --tcg-sage:         #6b8f6b;
  --tcg-gold:         #DAA520;
  --tcg-gold-light:   #e8d5a3;
  --tcg-cream:        #f8f4eb;
  --tcg-soft-green:   #f0f7f0;
  --tcg-dark:         #0d1117;
  --tcg-deep:         #1a1a2e;
  --tcg-body:         #2d2d2d;
  --tcg-white:        #fafcfa;

  /* ── HUB DARK PALETTE (internal ops) ── */
  --hub-bg-primary:   #0f1117;
  --hub-bg-secondary: #181b24;
  --hub-bg-tertiary:  #1e2230;
  --hub-bg-accent:    #1a1e2a;
  --hub-border:       #2a2e3a;
  --hub-border-light: #333849;
  --hub-text-primary: #e8e6e1;
  --hub-text-secondary:#9a978f;
  --hub-text-muted:   #5e5c56;
  --hub-gold:         #c9a84c;
  --hub-gold-dim:     #9a7a2e;
  --hub-sage:         #6b8f71;
  --hub-warm:         #b07d4f;
  --hub-blue:         #5a7fa0;
  --hub-rose:         #a06060;

  /* ── SEMANTIC (maps onto public TCG by default) ── */
  --fg-1:     var(--tcg-body);          /* body text on light bg */
  --fg-2:     #5e6a5f;                  /* secondary text */
  --fg-3:     #8a9389;                  /* tertiary / muted */
  --fg-on-dark: var(--tcg-white);
  --bg-page:  var(--tcg-cream);
  --bg-surface: #ffffff;
  --bg-tint:  var(--tcg-soft-green);
  --border:   #e8ede8;
  --border-cream: #ede8df;
  --accent:   var(--tcg-forest);
  --accent-2: var(--tcg-jade);
  --accent-gold: var(--tcg-gold);

  /* ── FONT FAMILIES ── */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif;
  --font-ui:      'DM Sans', system-ui, -apple-system, sans-serif;    /* Hub internal */
  --font-cere:    'Cinzel', Georgia, serif;                            /* Inner Kingdom only */
  --font-mono:    'Monaco', 'Courier New', monospace;

  /* ── TYPE SCALE (public) ── */
  --fs-display:   clamp(2.8rem, 6vw, 5.5rem); /* hero */
  --fs-h1:        clamp(2.2rem, 4.5vw, 3.5rem);
  --fs-h2:        clamp(2rem, 4vw, 3rem);
  --fs-h3:        1.5rem;
  --fs-h4:        1.25rem;
  --fs-lead:      1.1rem;
  --fs-body:      1rem;
  --fs-small:     0.9rem;
  --fs-eyebrow:   0.7rem;    /* 11.2px — wide-tracked label */
  --fs-micro:     0.75rem;

  /* ── SPACING SCALE ── */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 2.5rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-12: 6rem;
  --s-16: 100px; /* section vertical */

  /* ── RADII ── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.2);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.3);
  --shadow-hover-green: 0 12px 40px rgba(44,95,45,0.1);
  --shadow-hover-gold:  0 8px 32px rgba(218,165,32,0.25);
  --shadow-cta-hover:   0 8px 32px rgba(44,95,45,0.4);

  /* ── MOTION ── */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;
  --dur-slower: 600ms;

  /* ── GRADIENTS ── */
  --grad-cta:    linear-gradient(135deg, var(--tcg-forest), var(--tcg-jade));
  --grad-rule:   linear-gradient(90deg, var(--tcg-forest), var(--tcg-jade), var(--tcg-gold));
  --grad-quote:  linear-gradient(135deg, var(--tcg-forest) 0%, var(--tcg-jade) 50%, var(--tcg-forest) 100%);
  --grad-hero-radials:
      radial-gradient(ellipse at 30% 20%, rgba(44,95,45,0.25) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(61,112,104,0.20) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 50%, rgba(218,165,32,0.08) 0%, transparent 60%);
}

/* ============================================================================
   BASE TYPE
   ============================================================================ */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--fg-1);
}

h1 { font-size: var(--fs-h1); font-weight: 300; letter-spacing: -1px; }
h2 { font-size: var(--fs-h2); font-weight: 400; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--tcg-gold);
  font-weight: 300;
}

p { margin-bottom: var(--s-2); }
p:last-child { margin-bottom: 0; }

strong { font-weight: 600; color: var(--fg-1); }
em     { font-style: italic; }
small  { font-size: var(--fs-small); color: var(--fg-2); }

a {
  color: var(--tcg-forest);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--tcg-gold); }

::selection { background: rgba(218,165,32,0.25); color: var(--tcg-dark); }

/* ============================================================================
   SEMANTIC UTILITY CLASSES
   ============================================================================ */

/* Eyebrow / section label — UPPERCASE, wide-tracked, gold */
.eyebrow,
.section-label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--tcg-gold);
}

/* Hero display */
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -1px;
}

/* Lead paragraph */
.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 640px;
}

/* Quote — display serif, italic */
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  line-height: 1.8;
  color: var(--tcg-gold-light);
}

/* Caption */
.caption {
  font-size: var(--fs-micro);
  color: var(--fg-3);
  letter-spacing: 0.5px;
}

/* Monospace / code */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(44,95,45,0.08);
  border-radius: var(--r-xs);
  padding: 0.1em 0.4em;
}

/* Wordmark in Chinese — used in footer / brand moments */
.wordmark-cn {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.15em;
}

/* Dark-surface overrides */
.on-dark {
  color: var(--fg-on-dark);
}
.on-dark .lead { color: rgba(250,252,250,0.6); }
.on-dark a { color: var(--tcg-gold-light); }
.on-dark a:hover { color: var(--tcg-gold); }

/* Hub internal context */
.hub {
  font-family: var(--font-ui);
  background: var(--hub-bg-primary);
  color: var(--hub-text-primary);
}
.hub h1, .hub h2, .hub h3, .hub h4 { font-family: var(--font-display); color: var(--hub-text-primary); }
.hub .eyebrow { color: var(--hub-gold); }
.hub a { color: var(--hub-gold); }
.hub a:hover { color: #e6c366; }