/* Semantic aliases. Default ground is arena — never pure white. */
:root {
  --surface-page: var(--arena);
  --surface-card: var(--arena-100);
  --surface-sunken: var(--arena-300);
  --surface-ink: var(--petroleo);
  --surface-accent: var(--teal);
  --surface-secondary: var(--uva);
  --surface-highlight: var(--salmon);

  --text-body: var(--petroleo);
  --text-heading: var(--petroleo);
  --text-muted: var(--petroleo-a60);
  --text-on-ink: var(--arena);
  --text-on-accent: var(--arena);
  --text-on-highlight: var(--petroleo);
  --text-label: var(--teal);
  --text-link: var(--teal);
  --text-link-hover: var(--petroleo);

  --border-subtle: var(--petroleo-a08);
  --border-default: var(--petroleo-a16);
  --border-focus: var(--teal);
  --focus-ring: 0 0 0 3px rgba(47, 143, 134, 0.35); /* @kind shadow */

  /* The dot contrasts with its ground, always: salmón by default, arena on
     salmón, petróleo on teal (manual 03). */
  --dot-default: var(--salmon);
  --dot-on-salmon: var(--arena);
  --dot-on-teal: var(--petroleo);
  --dot-on-uva: var(--salmon);

  /* Interaction. Hover darkens the ink family, never lightens. */
  --accent-hover: var(--teal-700);
  --accent-active: var(--teal-700);
  --ink-hover: var(--petroleo-900);
  --highlight-hover: var(--salmon-700);

  /* EXTENSION: status colours. Drawn from the five so nothing foreign
     enters the palette; salmón carries alert, teal carries success. */
  --status-success: var(--teal);
  --status-warning: var(--salmon-700);
  --status-danger: #A63D28;
  --status-info: var(--uva);
}

/* Dark ground: petróleo page, arena ink. */
[data-ground="ink"] {
  --surface-page: var(--petroleo);
  --surface-card: var(--petroleo-700);
  --surface-sunken: var(--petroleo-900);
  --text-body: var(--arena);
  --text-heading: var(--arena);
  --text-muted: var(--arena-a70);
  --text-label: var(--salmon);
  --text-link: var(--salmon);
  --text-link-hover: var(--arena);
  --border-subtle: var(--arena-a16);
  --border-default: var(--arena-a16);
}
[data-ground="teal"] {
  --surface-page: var(--teal);
  --surface-card: var(--teal-700);
  --text-body: var(--arena);
  --text-heading: var(--arena);
  --text-muted: var(--arena-a70);
  --text-label: var(--petroleo);
  --dot-default: var(--dot-on-teal);
  --border-default: var(--arena-a16);
}
[data-ground="uva"] {
  --surface-page: var(--uva);
  --surface-card: var(--uva-700);
  --text-body: var(--arena);
  --text-heading: var(--arena);
  --text-muted: var(--arena-a70);
  --text-label: var(--salmon);
  --border-default: var(--arena-a16);
}
[data-ground="salmon"] {
  --surface-page: var(--salmon);
  --surface-card: var(--salmon-200);
  --text-body: var(--petroleo);
  --text-heading: var(--petroleo);
  --text-label: var(--petroleo);
  --dot-default: var(--dot-on-salmon);
}