/* ==========================================================================
   Design tokens — Pedigree Painter
   ========================================================================== */

:root {
  /* Color palette — warm charcoal + burnished bronze, derived from the mark */
  --color-ink: #1b1815;
  --color-ink-soft: #2b2621;
  --color-charcoal: #292420;
  --color-cream: #faf7f2;
  --color-cream-deep: #f2ece2;
  --color-white: #ffffff;

  --color-accent: #b1652f;
  --color-accent-dark: #8a4b21;
  --color-accent-light: #d98d4f;
  --color-gold: #ad8a56;

  --color-text: #241f1b;
  --color-text-muted: #6f665b;
  --color-text-inverse: #f6f1e9;
  --color-text-inverse-muted: #cabfae;

  --color-border: #e6ddcf;
  --color-border-dark: #3c352c;

  /* Typography */
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --tracking-wide: 0.14em;
  --tracking-wider: 0.22em;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 1.5rem;
  --header-height: 88px;
  --header-height-scrolled: 72px;

  /* Effects */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 10px rgba(27, 24, 21, 0.06);
  --shadow-md: 0 12px 32px rgba(27, 24, 21, 0.1);
  --shadow-lg: 0 24px 60px rgba(27, 24, 21, 0.16);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 220ms var(--ease-premium);
  --transition-med: 420ms var(--ease-premium);
}