/* ===========================================================
   GC Clinic — Design Tokens
   Source: Brand Guideline v1 Final, Tone of Voice v1
   Map these to WP theme.json / CSS custom properties.
   =========================================================== */

:root {
  /* ── Brand colours ── */
  --gc-navy:         #0F1B35;   /* Primary ink, H1, secondary CTA bg */
  --gc-navy-80:      rgba(15, 27, 53, 0.80);
  --gc-navy-60:      rgba(15, 27, 53, 0.60);
  --gc-navy-10:      rgba(15, 27, 53, 0.10);

  --gc-gold:         #C5A47E;   /* Champagne — primary CTA bg, accent */
  --gc-gold-hover:   #B08D68;
  --gc-gold-soft:    #E8DAC4;
  --gc-gold-10:      rgba(197, 164, 126, 0.10);

  --gc-cream:        #FAF7F2;   /* Primary surface */
  --gc-bej:          #F0EBE3;   /* Secondary surface, alternating bands */
  --gc-white:        #FFFFFF;

  --gc-grey:         #6B7280;   /* Secondary text */
  --gc-grey-light:   #E5E7EB;   /* Dividers, borders */
  --gc-grey-soft:    #F3F4F6;

  --gc-state-warn:   #B45309;
  --gc-state-err:    #B91C1C;
  --gc-state-ok:     #047857;

  /* ── Typography ── */
  --gc-font-serif:   'Playfair Display', 'Times New Roman', Georgia, serif;
  --gc-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gc-fs-display:   56px;   /* H1 hero */
  --gc-fs-h1:        44px;
  --gc-fs-h2:        36px;
  --gc-fs-h3:        26px;
  --gc-fs-h4:        20px;
  --gc-fs-eyebrow:   11px;   /* uppercase label */
  --gc-fs-body:      16px;
  --gc-fs-body-lg:   18px;
  --gc-fs-small:     14px;
  --gc-fs-caption:   12px;

  --gc-lh-tight:     1.1;
  --gc-lh-snug:      1.3;
  --gc-lh-normal:    1.6;
  --gc-lh-relaxed:   1.8;

  --gc-ls-eyebrow:   0.18em;  /* 2-3px @ 11px */
  --gc-ls-caps:      0.08em;

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

  /* ── Layout ── */
  --gc-container-max: 1200px;
  --gc-container-narrow: 920px;
  --gc-container-text: 720px;

  /* ── Borders & radius ── */
  /* Editorial, not Silicon-Valley-softened: minimal radius. */
  --gc-radius-0:   0;
  --gc-radius-xs:  2px;
  --gc-radius-sm:  4px;
  --gc-border:     1px solid var(--gc-grey-light);
  --gc-border-ink: 1px solid var(--gc-navy);

  /* ── Shadow — used sparingly ── */
  --gc-shadow-sm:   0 1px 2px rgba(15, 27, 53, 0.04);
  --gc-shadow-md:   0 4px 12px rgba(15, 27, 53, 0.06);
  --gc-shadow-lg:   0 8px 32px rgba(15, 27, 53, 0.10);

  /* ── Motion ── */
  --gc-ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --gc-dur-fast:    120ms;
  --gc-dur-base:    200ms;
  --gc-dur-slow:    320ms;

  /* ── Z-index scale ── */
  --gc-z-base:      1;
  --gc-z-header:    100;
  --gc-z-overlay:   200;
  --gc-z-modal:     300;
  --gc-z-toast:     400;
}

/* Mobile breakpoints applied via media queries in components.css */