/* Digito storefront design tokens */
:root {
  --radius: 1rem;
  --background: #ffffff;
  --foreground: #1e1b4b;
  --card: #ffffff;
  --card-foreground: #1e1b4b;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #f4f6fb;
  --secondary-foreground: #1e293b;
  --muted: #f4f6fb;
  --muted-foreground: #64748b;
  --accent: #10b981;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --border: #e8ecf4;
  --input: #e8ecf4;
  --ring: #2563eb;
  --shadow-soft: 0 4px 20px -8px rgba(30, 41, 102, 0.12);
  --shadow-card: 0 1px 3px rgba(30, 41, 102, 0.05), 0 8px 24px -12px rgba(30, 41, 102, 0.08);
}

* { box-sizing: border-box; border-color: var(--border); }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.bg-background { background: var(--background); }
.bg-card { background: var(--card); }
.bg-primary { background: var(--primary); }
.bg-secondary { background: var(--secondary); }
.bg-secondary\/30 { background: color-mix(in srgb, var(--secondary) 30%, transparent); }
.bg-secondary\/40 { background: color-mix(in srgb, var(--secondary) 40%, transparent); }
.bg-secondary\/50 { background: color-mix(in srgb, var(--secondary) 50%, transparent); }
.bg-secondary\/60 { background: color-mix(in srgb, var(--secondary) 60%, transparent); }
.bg-foreground { background: var(--foreground); }
.text-foreground { color: var(--foreground); }
.text-background { color: var(--background); }
.text-primary { color: var(--primary); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.border-border { border-color: var(--border); }
.shadow-soft { box-shadow: var(--shadow-soft); }
.shadow-card { box-shadow: var(--shadow-card); }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in-up { animation: fade-in-up 0.4s ease-out both; }
.animate-fade-in { animation: fade-in 0.3s ease-out both; }

.input {
  height: 3rem;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--background);
  padding: 0 1rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 10%, transparent);
}
.textarea { min-height: 6rem; padding-top: .75rem; padding-bottom: .75rem; resize: vertical; }
.label { font-size: 0.875rem; font-weight: 500; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  border-radius: 9999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 500;
  border: 0;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: opacity .15s, transform .15s;
}
.btn-primary:hover { opacity: .9; }
.btn-primary:disabled { opacity: .7; cursor: not-allowed; }

.flash {
  border-radius: 1rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  margin-bottom: 1rem;
}
.flash-success { background: #ecfdf5; color: #047857; }
.flash-error { background: #fef2f2; color: #b91c1c; }
.field-error { color: #dc2626; font-size: .75rem; margin-top: .25rem; }

.icon { width: 1rem; height: 1rem; display: inline-block; vertical-align: middle; }
.icon-lg { width: 1.25rem; height: 1.25rem; }