/* DOG PPL — Color tokens
   Warm oranges + organic off-whites + earthy brown/taupe. Tonal depth, no borders:
   boundaries come from background shifts, not strokes. */
:root {
  /* --- Brand oranges --- */
  --orange-900: #E05C00; /* deepest — pressed / strong accent */
  --orange-700: #F47A1F; /* PRIMARY brand orange */
  --orange-500: #FFB347; /* leading light orange */
  --orange-300: #FFD080; /* leading gold */

  /* --- Organic off-whites & creams --- */
  --cream-300: #FFE4BC;  /* warm cream surface */
  --cream-100: #FFF5E8;  /* lightest paper */
  --stone-100: #ECEAE3;  /* cool light stone (philosophy/feature bg) */
  --paper-warm: #F6ECDD; /* mid warm container */

  /* --- Earth (structural darks & neutrals) --- */
  --brown-900: #3A1E00;  /* near-black warm brown — dark sections & headings */
  --brown-800: #4A2A08;  /* warm brown, slightly lifted (gradients) */
  --taupe-500: #A78B72;  /* mushroom / editorial background & muted accents */

  /* --- Ink & neutrals --- */
  --ink-900: #26261F;    /* body text */
  --ink-600: #6E6A5C;    /* muted text */
  --ink-400: #9A9587;    /* faint text / hairlines */

  /* ============ Semantic aliases ============ */
  /* Surfaces (tonal — pick by depth, never add a border) */
  --surface: var(--cream-100);
  --surface-container-low: var(--cream-300);
  --surface-container: var(--paper-warm);
  --surface-stone: var(--stone-100);
  --surface-brand: var(--orange-700);
  --surface-taupe: var(--taupe-500);
  --surface-dark: var(--brown-900);
  --surface-dark-alt: var(--brown-900);

  /* Text */
  --text-body: var(--ink-900);
  --text-heading: var(--brown-900);
  --text-muted: var(--ink-600);
  --text-faint: var(--ink-400);
  --text-brand: var(--orange-700);
  --text-on-dark: #F3F1E6;
  --text-on-dark-muted: #A7A897;
  --text-on-brand: var(--cream-100);

  /* Accents & links */
  --accent: var(--orange-700);
  --accent-strong: var(--orange-900);
  --link: var(--orange-900);
  --link-hover: var(--orange-700);

  /* Hairline (used sparingly — dotted dividers, not container borders) */
  --divider: color-mix(in srgb, var(--brown-900) 32%, transparent);
  --divider-on-dark: rgba(243,241,230,0.28);
  --focus-ring: color-mix(in srgb, var(--orange-700) 55%, transparent);
}