:root {
  /* Base tokens */
  --copper: #b36633;
  --martinique: #1f3338;
  --kashmir-blue: #90b9b4;
  --redwood: #5b1f11;
  --gold-sand: #e7ba80;
  --ink: #1f1f1f;
  --paper: #ffffff;
  --mist: #f4f4f4;

  /* Tokens semánticos */
  --bg: var(--gold-sand);
  --fg: var(--martinique);
  --brand: var(--copper);
  --accent: var(--kashmir-blue);
  --danger: var(--redwood);
  --surface: var(--paper);
  --surface-muted: var(--mist);
  --surface-contrast: var(--ink);
  --surface-contrast-strong: color-mix(in oklab, var(--surface-contrast), black 18%);
  --text-soft: color-mix(in oklab, var(--fg), white 72%);
  --text-muted: color-mix(in oklab, var(--fg), white 42%);
  --text-strong: color-mix(in oklab, var(--fg), black 22%);
  --text-inverse: var(--paper);
  --border: color-mix(in oklab, var(--fg), white 78%);
  --border-strong: color-mix(in oklab, var(--fg), white 64%);
  --border-soft: color-mix(in oklab, var(--fg), white 86%);
  --focus-surface: color-mix(in oklab, var(--surface), var(--fg) 6%);
  --focus-ring: color-mix(in oklab, black, transparent 40%);
  --focus-text: color-mix(in oklab, var(--accent), black 10%);
  --link: var(--accent);
  --link-visited: color-mix(in oklab, var(--danger), var(--fg) 35%);
  --link-hover: color-mix(in oklab, var(--accent), var(--fg) 35%);
  --mark-bg: color-mix(in oklab, var(--gold-sand), white 35%);

  /* Derivados */
  --brand-weak: color-mix(in oklab, var(--brand), white 50%);
  --brand-strong: color-mix(in oklab, var(--brand), black 15%);
  --accent-weak: color-mix(in oklab, var(--accent), white 50%);
  --accent-strong: color-mix(in oklab, var(--accent), black 15%);


  --gold-sand-soft: color-mix(in oklab, var(--gold-sand), white 80%);

}




/* dark mode por atributo */
[data-theme="dark"] {
  --bg: #0f111a;
  --fg: #e8eaf2;
  --brand: #d57a3d;
  --accent: #6f92c7;
  --danger: #c44a33;
  --surface: #171923;
  --surface-muted: #202331;
  --surface-contrast: #06070b;
  --surface-contrast-strong: #000000;
  --text-soft: color-mix(in oklab, var(--fg), black 36%);
  --text-muted: color-mix(in oklab, var(--fg), black 24%);
  --text-strong: #ffffff;
  --text-inverse: #ffffff;
  --border: color-mix(in oklab, var(--fg), black 72%);
  --border-strong: color-mix(in oklab, var(--fg), black 60%);
  --border-soft: color-mix(in oklab, var(--fg), black 80%);
  --focus-surface: color-mix(in oklab, var(--surface), white 10%);
  --focus-ring: color-mix(in oklab, black, transparent 20%);
  --focus-text: color-mix(in oklab, var(--accent), white 10%);
  --link: var(--accent);
  --link-visited: color-mix(in oklab, var(--danger), white 20%);
  --link-hover: color-mix(in oklab, var(--accent), white 20%);
  --mark-bg: color-mix(in oklab, var(--gold-sand), black 30%);
}