:root {
  /* Base palette — from KIT DE MARCA @LASOCIAYYO */
  --color-ink: #1C2121;       /* verde-negro */
  --color-mauve: #A38F85;     /* malva */
  --color-cream: #E6D7C9;     /* crema */
  --color-ivory: #EEE9E3;     /* marfil */
  --color-blush: #D2B5B1;     /* rosa empolvado */
  --color-sage: #A8B69B;      /* salvia */
  --color-white: #FFFFFF;

  /* Tints/shades for hover & depth — derived via oklch, not invented hues */
  --color-ink-90: color-mix(in oklch, var(--color-ink) 90%, white);
  --color-ink-70: color-mix(in oklch, var(--color-ink) 70%, white);
  --color-mauve-dark: color-mix(in oklch, var(--color-mauve) 80%, black);
  --color-mauve-light: color-mix(in oklch, var(--color-mauve) 40%, white);
  --color-sage-dark: color-mix(in oklch, var(--color-sage) 75%, black);
  --color-blush-dark: color-mix(in oklch, var(--color-blush) 80%, black);

  /* Semantic surface */
  --surface-page: var(--color-ivory);
  --surface-card: var(--color-white);
  --surface-card-alt: var(--color-cream);
  --surface-inverse: var(--color-ink);
  --surface-accent: var(--color-mauve);

  /* Semantic text */
  --text-primary: var(--color-ink);
  --text-secondary: color-mix(in oklch, var(--color-ink) 65%, transparent);
  --text-inverse: var(--color-ivory);
  --text-muted: color-mix(in oklch, var(--color-ink) 45%, transparent);

  /* Semantic action */
  --action-primary: var(--color-ink);
  --action-primary-hover: var(--color-ink-90);
  --action-secondary: var(--color-mauve);
  --action-secondary-hover: var(--color-mauve-dark);
  --action-on-primary: var(--color-ivory);

  /* Borders */
  --border-soft: color-mix(in oklch, var(--color-ink) 12%, transparent);
  --border-strong: color-mix(in oklch, var(--color-ink) 30%, transparent);
}