/* =========================================================
   CartaDigital SaaS — base de diseño
   Tokens compartidos por carta pública, panel y login.
   Mundo visual: ticket de pedido / boleta de mostrador.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* tinta y papel */
  --ink: #183244;
  --ink-soft: #4d6574;
  --ink-faint: #718794;
  --paper: #edf3f6;
  --paper-raised: #ffffff;
  --paper-line: #d8e3e9;
  --paper-line-strong: #c2d2dc;

  /* sellos / acentos fijos (no dependen del color del negocio) */
  --stamp-red: #ad4934;
  --stamp-red-bg: #fae9e3;
  --stamp-green: #286451;
  --stamp-green-bg: #e2f0eb;
  --stamp-gray: #627784;
  --stamp-gray-bg: #e7eef2;
  --gold: #cf6548;
  --gold-bg: #f9e8e1;

  /* panel (superficie de administración) */
  --panel-ink: #173244;
  --panel-ink-raised: #23465a;
  --panel-bg: #edf3f6;
  --panel-line: #d8e3e9;

  /* tipografía */
  --f-display: 'Fraunces', ui-serif, Georgia, serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 1px 2px rgba(33,29,24,0.04), 0 8px 24px -12px rgba(33,29,24,0.18);
  --shadow-pop: 0 12px 32px -8px rgba(33,29,24,0.28);

  color-scheme: light;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body{
  margin: 0;
  font-family: var(--f-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; }

button, input, select, textarea{ font-family: inherit; font-size: 1rem; }

h1, h2, h3{ font-family: var(--f-display); font-weight: 600; line-height: 1.15; margin: 0; }

/* foco visible y consistente en toda la app */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible{
  outline: 2.5px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection{ background: var(--gold); color: #fff; }

/* scrollbar discreta (donde el navegador lo soporta) */
*{ scrollbar-width: thin; scrollbar-color: var(--paper-line-strong) transparent; }
::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: var(--paper-line-strong); border-radius: 8px; }

/* sellos reutilizables (oferta / disponibilidad / estado) */
.stamp{
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .3em .6em;
  border-radius: 100px;
  line-height: 1;
  white-space: nowrap;
}
.stamp-red{ background: var(--stamp-red-bg); color: var(--stamp-red); }
.stamp-green{ background: var(--stamp-green-bg); color: var(--stamp-green); }
.stamp-gray{ background: var(--stamp-gray-bg); color: var(--stamp-gray); }
.stamp-gold{ background: var(--gold-bg); color: var(--gold); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}