/**
 * Miller Carter — design tokens
 *
 * Palette: white surface, grey structure, #F4C73E accent.
 *
 * CONTRAST RULE (enforced, not stylistic):
 *   --mc-yellow on white = 1.6:1  -> unreadable, WCAG fail. NEVER use as text on white.
 *   --mc-yellow as fill with --mc-ink on top = 11.9:1 -> excellent.
 *   For yellow-toned TEXT on white, use --mc-gold (5.0:1, passes AA).
 */

:root {
  /* Surfaces */
  --mc-white:     #FFFFFF;
  --mc-gray-50:   #FAFAFA;
  --mc-gray-100:  #F2F2F3;
  --mc-gray-200:  #E4E4E7;
  --mc-gray-400:  #9A9AA2;
  --mc-gray-600:  #52525B;
  --mc-gray-900:  #18181B;

  /* Semantic */
  --mc-ink:            var(--mc-gray-900);
  --mc-text:           var(--mc-gray-900);
  --mc-text-muted:     var(--mc-gray-600);
  /* 2.79:1 on white — decorative/disabled ONLY, never body copy. Use --mc-text-muted for text. */
  --mc-text-subtle:    var(--mc-gray-400);
  --mc-surface:        var(--mc-white);
  --mc-surface-subtle: var(--mc-gray-50);
  --mc-surface-panel:  var(--mc-gray-100);
  --mc-border:         var(--mc-gray-200);

  /* Accent — brand yellow. Logo mark uses #F2C72F; brand spec is #F4C73E. */
  --mc-yellow:       #F4C73E;
  --mc-yellow-hover: #E8B824;
  --mc-gold:         #8A6A00;  /* yellow-toned TEXT on white, AA 5.0:1 */

  /* Type */
  --mc-font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mc-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Fluid type scale */
  --mc-text-xs:   0.8125rem;
  --mc-text-sm:   0.9375rem;
  --mc-text-base: 1.0625rem;
  --mc-text-lg:   clamp(1.125rem, 0.4vw + 1.05rem, 1.375rem);
  --mc-text-xl:   clamp(1.5rem,  1.1vw + 1.25rem, 2rem);
  --mc-text-2xl:  clamp(2rem,    2.4vw + 1.4rem,  3rem);
  --mc-text-3xl:  clamp(2.75rem, 5vw   + 1.25rem, 5.5rem);

  /* Tracking — large display type needs negative tracking to read as one shape */
  --mc-track-display: -0.035em;
  --mc-track-tight:   -0.018em;
  --mc-track-wide:     0.14em;

  /* Space */
  --mc-space-1: 0.25rem; --mc-space-2: 0.5rem;  --mc-space-3: 0.75rem;
  --mc-space-4: 1rem;    --mc-space-6: 1.5rem;  --mc-space-8: 2rem;
  --mc-space-12: 3rem;   --mc-space-16: 4rem;   --mc-space-24: 6rem;
  --mc-space-32: 8rem;

  /* Layout */
  --mc-container: 1120px;
  --mc-gutter:    clamp(1.25rem, 4vw, 3rem);

  --mc-radius-sm: 8px;
  --mc-radius:    14px;
  --mc-radius-lg: 22px;
  --mc-radius-pill: 999px;

  --mc-shadow-sm: 0 1px 2px rgba(24,24,27,.06), 0 1px 3px rgba(24,24,27,.04);
  --mc-shadow:    0 4px 16px rgba(24,24,27,.07), 0 1px 3px rgba(24,24,27,.05);
  --mc-shadow-lg: 0 18px 48px rgba(24,24,27,.11), 0 4px 12px rgba(24,24,27,.05);

  --mc-ease:      cubic-bezier(.22,.61,.36,1);
  --mc-ease-out:  cubic-bezier(.16,1,.3,1);
  --mc-dur:       .5s;
  --mc-dur-fast:  .22s;

  --mc-nav-h: 56px;
}

/* Dark sections — Apple-style alternating light/dark bands.
   Applied per-section via .mc-invert, not a global theme toggle. */
.mc-invert {
  --mc-text:           var(--mc-white);
  --mc-text-muted:     #A1A1AA;
  --mc-text-subtle:    #71717A;
  --mc-surface:        #050505;
  --mc-surface-subtle: #0E0E10;
  --mc-surface-panel:  #1A1A1D;
  --mc-border:         #27272A;
  /* On dark, the brand yellow IS readable as text (9.4:1) — no gold substitute needed */
  --mc-gold:           var(--mc-yellow);
  color: var(--mc-text);
  background: var(--mc-surface);
}