@import url("fonts.css");

:root {
  --zyme-black: #222222;
  --zyme-gold: #ca9330;
  --zyme-cream: #efeae3;
  --zyme-warm-cream: #e4d8c5;
  --zyme-sand: #c2ad8b;
  --zyme-wheat: #ae8546;
  --zyme-caramel: #8d5b33;
  --zyme-olive: #726f4b;
  --zyme-burnt-orange: #c45824;
  --zyme-bread: #af823c;
  --zyme-olive-dark: #706e46;
  --zyme-brown: #88552f;
  --zyme-teal: #475f5b;
  --zyme-wine: #5a3c45;

  --zyme-font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --zyme-font-body: "Inter", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Tokens añadidos por la capa premium (dorado del logo) */
  --zyme-gold-text: #8a6011;
  --zyme-on-gold: #241a08;
  --zyme-gold-bright: #ca9330;

  --zyme-surface: #fffaf3;
  --zyme-surface-strong: #ffffff;
  --zyme-input-bg: #fffdf8;
  --zyme-soft: #f5efe6;
  --zyme-alert-bg: #fff4e7;
  --zyme-success-bg: #eef1ea;
  --zyme-danger-bg: #fbebe4;
  --zyme-border: var(--zyme-warm-cream);
  --zyme-border-strong: var(--zyme-sand);
  --zyme-muted: #6f665c;
  --zyme-shadow-soft: 0 16px 42px rgba(34, 34, 34, .08);
  --zyme-shadow-flat: 0 1px 0 rgba(34, 34, 34, .08);
  --zyme-radius: 8px;
  --zyme-focus: 0 0 0 3px rgba(202, 147, 48, .28);
}

.zyme-button-primary,
.zyme-button-secondary,
.zyme-button-danger,
.zyme-card,
.zyme-product-card,
.zyme-input,
.zyme-select,
.zyme-badge,
.zyme-summary-card,
.zyme-admin-table,
.zyme-alert,
.zyme-section-title {
  font-family: var(--zyme-font-body);
}

.zyme-card,
.zyme-product-card,
.zyme-summary-card {
  background: var(--zyme-surface);
  border: 1px solid var(--zyme-border);
  border-radius: var(--zyme-radius);
  box-shadow: var(--zyme-shadow-soft);
}

.zyme-button-primary {
  background: var(--zyme-gold);
  color: var(--zyme-black);
}

.zyme-button-secondary {
  background: transparent;
  color: var(--zyme-black);
  border: 1px solid var(--zyme-border-strong);
}

.zyme-button-danger {
  background: var(--zyme-burnt-orange);
  color: var(--zyme-surface-strong);
}

.zyme-input,
.zyme-select {
  background: var(--zyme-input-bg);
  border: 1px solid var(--zyme-border);
  color: var(--zyme-black);
}

.zyme-badge {
  background: var(--zyme-olive);
  color: var(--zyme-surface-strong);
}

.zyme-alert {
  background: var(--zyme-alert-bg);
  border: 1px solid var(--zyme-sand);
  color: var(--zyme-brown);
}

.zyme-section-title h1,
.zyme-section-title h2,
.zyme-section-title h3 {
  font-family: var(--zyme-font-display);
}