/* ============================================================
   Super Mascota — Theme tokens & base
   Diseñado para portar a WordPress + WooCommerce theme.
   CSS nativo, cero frameworks, custom properties.
   ============================================================ */

:root {
  /* Brand palette — cálido y cercano */
  --c-primary: #FFB800;
  --c-primary-deep: #E6A600;
  --c-primary-soft: #FFF4D1;
  --c-primary-tint: #FFFAEB;

  --c-navy: #0B192C;
  --c-navy-2: #1A2A44;

  --c-cream: #FDFCF8;
  --c-cream-2: #F5F0E2;
  --c-paper: #FFFFFF;
  --c-line: #ECE7DA;
  --c-line-2: #DDD5C2;

  --c-text: #0B192C;
  --c-muted: #6B6657;
  --c-soft: #8F8975;

  --c-success: #2E8B57;
  --c-success-soft: #E8F5EC;
  --c-danger: #C8362E;

  /* Type */
  --f-display: "Fraunces", Georgia, serif;
  --f-body: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --sh-card: 0 1px 2px rgba(11,25,44,.04), 0 8px 24px -10px rgba(11,25,44,.08);
  --sh-pop: 0 14px 40px -12px rgba(11,25,44,.18);

  /* Layout */
  --maxw: 1240px;
  --gutter: 24px;
}

[data-theme="dark"] {
  --c-cream: #14110A;
  --c-cream-2: #1B1810;
  --c-paper: #1E1B12;
  --c-line: #2A2618;
  --c-line-2: #3A3422;
  --c-text: #F4EFDF;
  --c-muted: #B8B098;
  --c-soft: #918A75;
  --c-navy: #FFF4D1;
  --c-navy-2: #FFE9A0;
  --sh-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -10px rgba(0,0,0,.5);
}

/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
ul { margin: 0; padding: 0; list-style: none; }