/* ============================================================
   CoLe's Heart — Design Tokens (from Claude Design System b7fb4f)
   Source of truth: claude.ai/design project "Design System".
   Mirrors tokens/colors|typography|spacing|effects.css (consolidated).
   Fonts are loaded locally via brand-fonts.css (NOT Google CDN).
   ============================================================ */

/* ---- Colors: warm gold-on-cream ---- */
:root {
  --ch-gold-50:  #FBF3E0;
  --ch-gold-100: #F6E6C2;
  --ch-gold-200: #EFCE89;
  --ch-gold-300: #E8B752;
  --ch-gold-400: #E0A526;   /* PRIMARY brand gold */
  --ch-gold-500: #C98E1C;
  --ch-gold-600: #A87317;
  --ch-gold-700: #835914;

  --ch-metallic-light: #ECC873;
  --ch-metallic:       #C99A3D;
  --ch-metallic-deep:  #A87C2E;
  --ch-gradient-gold:      linear-gradient(135deg, #ECC873 0%, #D7AA4A 45%, #B98A30 100%);
  --ch-gradient-gold-soft: linear-gradient(135deg, #F3D88E 0%, #E0A526 100%);

  --ch-cream:      #FBF6ED;  /* page background */
  --ch-cream-deep: #F4EAD6;  /* alternating sections */
  --ch-white:      #FFFFFF;  /* cards */

  --ch-ink:      #3E3A33;
  --ch-ink-soft: #6E665A;
  --ch-ink-mute: #9C9384;
  --ch-line:     #EAE0CE;
  --ch-line-soft:#F0E8D8;

  --ch-wc-pink:   #F4C9D0;
  --ch-wc-blue:   #BBD3E0;
  --ch-wc-yellow: #F7E4A6;
  --ch-wc-green:  #C9DCC1;

  --ch-success: #5E9A6B;
  --ch-warning: #E0A526;
  --ch-danger:  #C25B4E;
  --ch-info:    #6E97B8;

  --ch-bg:            var(--ch-cream);
  --ch-bg-alt:        var(--ch-cream-deep);
  --ch-surface-card:  var(--ch-white);
  --ch-primary:       var(--ch-gold-400);
  --ch-primary-hover: var(--ch-gold-500);
  --ch-primary-press: var(--ch-gold-600);
  --ch-on-primary:    #FFFFFF;
  --ch-text:          var(--ch-ink);
  --ch-text-soft:     var(--ch-ink-soft);
  --ch-text-mute:     var(--ch-ink-mute);
  --ch-border:        var(--ch-line);
  --ch-focus-ring:    rgba(224, 165, 38, 0.45);
}

/* ---- Typography ---- */
:root {
  --ch-font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --ch-font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ch-font-script:  'Dancing Script', 'Brush Script MT', cursive;

  --ch-w-light: 300; --ch-w-regular: 400; --ch-w-medium: 500;
  --ch-w-semibold: 600; --ch-w-bold: 700;

  --ch-text-xs:.75rem; --ch-text-sm:.875rem; --ch-text-base:1rem; --ch-text-lg:1.125rem;
  --ch-text-xl:1.375rem; --ch-text-2xl:1.75rem; --ch-text-3xl:2.25rem; --ch-text-4xl:3rem;
  --ch-text-5xl:4rem; --ch-text-6xl:5.5rem;

  --ch-leading-tight:1.08; --ch-leading-snug:1.25; --ch-leading-normal:1.55; --ch-leading-relaxed:1.75;

  --ch-tracking-tight:-0.01em; --ch-tracking-normal:0; --ch-tracking-wide:0.04em; --ch-tracking-eyebrow:0.18em;
}

/* ---- Spacing & layout (4px grid) ---- */
:root {
  --ch-space-0:0; --ch-space-1:.25rem; --ch-space-2:.5rem; --ch-space-3:.75rem;
  --ch-space-4:1rem; --ch-space-5:1.5rem; --ch-space-6:2rem; --ch-space-7:2.5rem;
  --ch-space-8:3rem; --ch-space-9:4rem; --ch-space-10:5rem; --ch-space-12:7.5rem;

  --ch-container:1180px; --ch-container-narrow:760px; --ch-gutter:1.5rem;
  --ch-section-y:5rem; --ch-section-y-lg:7.5rem;
}

/* ---- Effects: radii, shadows, borders, motion ---- */
:root {
  --ch-radius-sm:8px; --ch-radius-md:14px; --ch-radius-lg:22px; --ch-radius-xl:32px; --ch-radius-pill:999px;

  --ch-shadow-xs:0 1px 2px rgba(95,70,20,.06);
  --ch-shadow-sm:0 2px 8px rgba(95,70,20,.07);
  --ch-shadow-md:0 8px 24px rgba(95,70,20,.10);
  --ch-shadow-lg:0 18px 48px rgba(95,70,20,.13);
  --ch-shadow-gold:0 10px 26px rgba(224,165,38,.32);

  --ch-border-width:1px;
  --ch-border-card:1px solid var(--ch-line);
  --ch-ring-gold:0 0 0 3px var(--ch-focus-ring);

  --ch-ease:cubic-bezier(0.33,0,0.2,1);
  --ch-ease-out:cubic-bezier(0.16,1,0.3,1);
  --ch-dur-fast:140ms; --ch-dur:240ms; --ch-dur-slow:420ms;
}