/* ═══════════════════════════════════════════════════════════
   Design Tokens — brand custom properties, both surfaces
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Brand palette */
  --color-espresso: #2C1810;
  --color-roast: #5C3D2E;
  --color-brew: #7A5C4F;
  --color-copper: #C67D3E;
  --color-copper-light: #D4985E;
  --color-copper-dark: #A0612E;
  --color-amber: #E8A84C;
  --color-cream: #FAF6F0;
  --color-latte: #F0E8DD;
  --color-parchment: #E8DFD2;
  --color-steam: #D4C9BA;
  --color-ink: #2A1F14;
  --color-muted: #8B7D6B;
  --color-success: #4A7A3E;
  --color-error: #B83B2B;

  /* Typography */
  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Menlo", monospace;

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

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Layout */
  --content-max: 1120px;
  /* Single-column measure widths (max-inline-size on cards/forms/alerts), ascending.
     Repeated per-surface widths; one-off page widths stay inline. */
  --measure-narrow: 400px;
  --measure-form: 420px;
  --measure-card: 480px;
  --measure-diag: 520px;
  --measure-wide: 560px;
  --measure-panel: 600px;
  --measure-content: 640px;
  --measure-page: 720px;

  /* Transitions */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 300ms var(--ease-out);

  /* Semantic surfaces */
  --color-surface: var(--color-cream);
  --color-danger: var(--color-error);
  --color-error-bg: #fef2f2;
  --color-error-text: var(--color-error);
  --color-muted-accessible: #6B5D4F;
  /* Fondos de aviso y confirmacion con su texto legible. Vivian solo en la hoja del
     personal, y primitives.css —que cargan todas las bases— ya los pedia: en las
     pantallas del comprador no existian. Los tonos de texto son los que los distintivos
     ya habian validado sobre estos mismos fondos: 4.61:1 el verde y 4.63:1 el de aviso, AA 4.5. */
  --color-success-bg: #E8F0E5;
  --color-success-accessible: #46763A;
  --color-warning-bg: #FAF0E4;
  --color-warning-accessible: #966124;
  /* Cobre legible: 4.72:1 como texto sobre --color-parchment, 5.78:1 con --color-cream
     encima y 6.22:1 con blanco. El cobre de marca se lee a 2.49 y 3.28 en esos pares. */
  --color-copper-accessible: #8A5424;

  /* Aliases */
  --text-secondary: var(--color-muted);
  --color-border: var(--color-parchment);
  --bg-secondary: var(--color-latte);
}