/* Amor y Amistad con 4 patas — tokens de diseño.
   Dirección "álbum de sala": fotos impresas con cinta sobre tablón, crema cálido, serif con carácter.
   Un solo look claro deliberado. Los componentes no usan hex sueltos: todo sale de aquí. */

:root {
  color-scheme: light;

  /* Superficies */
  --color-bg: #fff6ec;
  --color-paper: #fbefe1;
  --color-surface: #fffdf9;
  --color-print: #fffdf9;

  /* Marca y acción */
  --color-primary: #c8412b;          /* CTA; texto claro encima 4,9:1 */
  --color-primary-strong: #a93321;   /* hover / active */
  --color-on-primary: #fffdf9;
  --color-coral: #e8573f;            /* decorativo, nunca fondo de texto */
  --color-orange: #f28c28;           /* decorativo */
  --gradient-brand: linear-gradient(90deg, #f28c28, #e8573f);
  --color-brand-blue: #449fdb;       /* solo íconos y decoración */

  /* Texto */
  --color-heading: #5a1a2b;          /* vino, 12:1 sobre crema */
  --color-text: #2e2320;
  --color-muted: #6b5b53;            /* 6:1 sobre crema */
  --color-link: #1f6fa8;
  --color-link-strong: #16547f;
  --color-on-dark: #fff6ec;
  --color-on-dark-muted: #ecd6c6;    /* 9:1 sobre vino */

  /* Madera y cinta */
  --color-wood: #a0673d;
  --color-wood-dark: #6e4122;
  --color-wood-light: #d9a877;
  --color-tape: rgba(246, 214, 200, 0.85);

  /* Bordes */
  --color-border: #ead9c6;           /* divisores */
  --color-border-input: #a3846a;     /* contorno de controles, 3,4:1 sobre blanco */

  /* Estados: siempre con ícono y texto, nunca solo color */
  --color-success: #2f7d4f;
  --color-success-strong: #25663f;
  --color-success-bg: #e5f3ea;
  --color-error: #b3261e;
  --color-error-bg: #fce8e6;
  --color-warning-bg: #fff1c9;
  --color-warning-text: #6b4a00;
  --color-focus: #1f6fa8;
  --color-scrim: rgba(46, 20, 12, 0.6);
  --color-selection: #f6d6c8;

  /* Tipografía */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-hero: clamp(2.5rem, 1.6rem + 4.5vw, 4.75rem);
  --text-h2: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --text-h3: 1.375rem;
  --text-code: clamp(3.5rem, 2rem + 8vw, 6rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-body: 1.6;

  /* Espacio: escala de 4 px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --space-section: clamp(3.5rem, 2rem + 6vw, 7rem);
  --space-gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  --width-page: 70rem;
  --width-form: 40rem;
  --width-prose: 42rem;
  --tap-min: 48px;

  /* Radios */
  --radius-input: 12px;
  --radius-pill: 999px;
  --radius-print: 3px;
  --radius-card: 20px;
  --radius-board: 10px;

  /* Sombras */
  --shadow-print: 0 1px 0 rgba(0, 0, 0, 0.04), 0 14px 28px -10px rgba(90, 26, 43, 0.28);
  --shadow-print-lift: 0 1px 0 rgba(0, 0, 0, 0.04), 0 24px 40px -14px rgba(90, 26, 43, 0.36);
  --shadow-card: 0 6px 18px -8px rgba(46, 35, 32, 0.18);
  --shadow-dialog: 0 30px 60px -20px rgba(46, 20, 8, 0.45);
  --shadow-board: inset 0 0 0 3px var(--color-wood-dark), inset 0 3px 18px rgba(46, 20, 8, 0.35);

  /* Motion: solo transform y opacity */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* Capas */
  --z-header: 10;
  --z-sticky: 20;
  --z-modal: 100;
  --z-toast: 1000;
}