/* Tokens de diseño — identidad marfil, verde y dorado (aprobada en el lienzo de Claude Design). */
:root {
  /* Superficies */
  --ivory: #FAF7F0;
  --sand: #F3EFE4;
  --surface: #FFFFFF;
  --line: #E7E1D3;
  --line-soft: #EFE9DB;
  --line-strong: #D9D2C0;

  /* Texto */
  --ink: #23291F;
  --ink-2: #4A5246;
  --muted: #6B7265;
  --faint: #A8AA9E;

  /* Verde (acciones y navegación) */
  --sage: #4F6F57;
  --sage-dark: #3F5C47;
  --sage-deep: #2F4A37;
  --sage-soft: #E4ECE4;
  --sage-tint: #F6F9F5;

  /* Oro (puntos y recompensas) */
  --gold: #C9A24B;
  --gold-soft: #F3E9CF;
  --gold-tint: #FBF3DF;
  --gold-ink: #8A6A1E;
  --gold-deep: #4A3A0E;

  /* Estados */
  --danger: #8E3A27;
  --danger-soft: #F8E8E3;
  --warn-ink: #6B5014;
  --info-soft: #E3EAF2;
  --info-ink: #2D4A6B;
  --neutral-soft: #EFEDE6;

  /* Tipografía */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Forma y espacio */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-pill: 999px;
  --touch: 44px;
  --sidebar-w: 248px;
  --gutter: 16px;

  --focus: 0 0 0 3px rgba(79, 111, 87, 0.35);
}