/* Generado por `bin/rails design:tokens` desde design/tokens.json. No se edita a mano. */

:root {
  color-scheme: light;
  --canvas: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --receipt-paper: #ffffff;
  --receipt-ink: #000000;
  --border-subtle: #e2e8f0;
  --border-control: #64748b;
  --secondary: #0f172a;
  --text-muted: #475569;
  --primary: #047857;
  --primary-deep: #065f46;
  --primary-border: #047857;
  --primary-pressed: #065f46;
  --primary-tint: #d1fae5;
  --info: #3b82f6;
  --info-deep: #1d4ed8;
  --info-tint: #dbeafe;
  --accent: #f59e0b;
  --accent-tint: #fef3c7;
  --accent-deep: #92400e;
  --success: #10b981;
  --success-deep: #047857;
  --success-tint: #d1fae5;
  --danger: #ef4444;
  --danger-deep: #b91c1c;
  --danger-tint: #fee2e2;
  --on-primary: #ffffff;
  --on-accent: #0f172a;
  --on-info: #0f172a;
  --header-bg: #0f172a;
  --on-header: #f8fafc;
  --on-header-muted: #cbd5e1;
  --on-header-danger: #f87171;
  --header-ok: #10b981;
  --header-pending: #f59e0b;
  --focus: #2563eb;
  --tile-grey: #e2e8f0;
  --tile-red: #fecaca;
  --tile-pink: #fbcfe8;
  --tile-orange: #fed7aa;
  --tile-yellow: #fde68a;
  --tile-green: #bbf7d0;
  --tile-blue: #bfdbfe;
  --tile-purple: #ddd6fe;
  --tile-grey-strong: #64748b;
  --tile-red-strong: #ef4444;
  --tile-pink-strong: #ec4899;
  --tile-orange-strong: #ea580c;
  --tile-yellow-strong: #a16207;
  --tile-green-strong: #16a34a;
  --tile-blue-strong: #3b82f6;
  --tile-purple-strong: #8b5cf6;
  --shadow-card: 0 1px 2px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.06);
  --shadow-sheet: 0 8px 32px rgba(15,23,42,0.18);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --touch: 56px;
  --tile: 160px;
  --tile-height: 150px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Inter", "Roboto", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #020617;
    --surface: #0f172a;
    --surface-2: #1e293b;
    --receipt-paper: #ffffff;
    --receipt-ink: #000000;
    --border-subtle: #334155;
    --border-control: #64748b;
    --secondary: #f8fafc;
    --text-muted: #94a3b8;
    --primary: #047857;
    --primary-deep: #6ee7b7;
    --primary-border: #34d399;
    --primary-pressed: #064e3b;
    --primary-tint: #022c22;
    --info: #60a5fa;
    --info-deep: #60a5fa;
    --info-tint: #172554;
    --accent: #fbbf24;
    --accent-tint: #451a03;
    --accent-deep: #fbbf24;
    --success: #34d399;
    --success-deep: #34d399;
    --success-tint: #064e3b;
    --danger: #f87171;
    --danger-deep: #f87171;
    --danger-tint: #450a0a;
    --on-primary: #ffffff;
    --on-accent: #0f172a;
    --on-info: #0f172a;
    --header-bg: #0f172a;
    --on-header: #f8fafc;
    --on-header-muted: #cbd5e1;
    --on-header-danger: #f87171;
    --header-ok: #10b981;
    --header-pending: #f59e0b;
    --focus: #60a5fa;
    --tile-grey: #334155;
    --tile-red: #7f1d1d;
    --tile-pink: #831843;
    --tile-orange: #7c2d12;
    --tile-yellow: #713f12;
    --tile-green: #14532d;
    --tile-blue: #1e3a8a;
    --tile-purple: #4c1d95;
    --tile-grey-strong: #94a3b8;
    --tile-red-strong: #f87171;
    --tile-pink-strong: #f472b6;
    --tile-orange-strong: #fb923c;
    --tile-yellow-strong: #facc15;
    --tile-green-strong: #4ade80;
    --tile-blue-strong: #60a5fa;
    --tile-purple-strong: #a78bfa;
    --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.4);
    --shadow-sheet: 0 8px 32px rgba(0,0,0,0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #020617;
  --surface: #0f172a;
  --surface-2: #1e293b;
  --receipt-paper: #ffffff;
  --receipt-ink: #000000;
  --border-subtle: #334155;
  --border-control: #64748b;
  --secondary: #f8fafc;
  --text-muted: #94a3b8;
  --primary: #047857;
  --primary-deep: #6ee7b7;
  --primary-border: #34d399;
  --primary-pressed: #064e3b;
  --primary-tint: #022c22;
  --info: #60a5fa;
  --info-deep: #60a5fa;
  --info-tint: #172554;
  --accent: #fbbf24;
  --accent-tint: #451a03;
  --accent-deep: #fbbf24;
  --success: #34d399;
  --success-deep: #34d399;
  --success-tint: #064e3b;
  --danger: #f87171;
  --danger-deep: #f87171;
  --danger-tint: #450a0a;
  --on-primary: #ffffff;
  --on-accent: #0f172a;
  --on-info: #0f172a;
  --header-bg: #0f172a;
  --on-header: #f8fafc;
  --on-header-muted: #cbd5e1;
  --on-header-danger: #f87171;
  --header-ok: #10b981;
  --header-pending: #f59e0b;
  --focus: #60a5fa;
  --tile-grey: #334155;
  --tile-red: #7f1d1d;
  --tile-pink: #831843;
  --tile-orange: #7c2d12;
  --tile-yellow: #713f12;
  --tile-green: #14532d;
  --tile-blue: #1e3a8a;
  --tile-purple: #4c1d95;
  --tile-grey-strong: #94a3b8;
  --tile-red-strong: #f87171;
  --tile-pink-strong: #f472b6;
  --tile-orange-strong: #fb923c;
  --tile-yellow-strong: #facc15;
  --tile-green-strong: #4ade80;
  --tile-blue-strong: #60a5fa;
  --tile-purple-strong: #a78bfa;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-sheet: 0 8px 32px rgba(0,0,0,0.6);
}

.hero {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 48px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.title {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
}

.section {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
}

.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.body-strong {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.tile-name {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.button {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
}

.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.total {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 44px;
  font-weight: 600;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}

.price {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.folio {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.moni-amount {
  font-variant-numeric: tabular-nums;
}