/**
 * Redilix Digital Core — design tokens & shared components
 * "Precision-Driven Growth" light commerce theme (pd- prefix avoids admin dark theme clash)
 */

@theme {
  /* ── Surfaces ── */
  --color-pd-background: #faf8ff;
  --color-pd-on-background: #131b2e;
  --color-pd-surface: #faf8ff;
  --color-pd-surface-bright: #faf8ff;
  --color-pd-surface-dim: #d2d9f4;
  --color-pd-surface-variant: #dae2fd;
  --color-pd-surface-container-lowest: #ffffff;
  --color-pd-surface-container-low: #f2f3ff;
  --color-pd-surface-container: #eaedff;
  --color-pd-surface-container-high: #e2e7ff;
  --color-pd-surface-container-highest: #dae2fd;
  --color-pd-on-surface: #131b2e;
  --color-pd-on-surface-variant: #424656;
  --color-pd-inverse-surface: #283044;
  --color-pd-inverse-on-surface: #eef0ff;
  --color-pd-surface-tint: #0054d6;

  /* ── Primary ── */
  --color-pd-primary: #0050cb;
  --color-pd-on-primary: #ffffff;
  --color-pd-primary-container: #0066ff;
  --color-pd-on-primary-container: #f8f7ff;
  --color-pd-inverse-primary: #b3c5ff;
  --color-pd-primary-fixed: #dae1ff;
  --color-pd-primary-fixed-dim: #b3c5ff;
  --color-pd-on-primary-fixed: #001849;
  --color-pd-on-primary-fixed-variant: #003fa4;

  /* ── Secondary ── */
  --color-pd-secondary: #006c49;
  --color-pd-on-secondary: #ffffff;
  --color-pd-secondary-container: #6cf8bb;
  --color-pd-on-secondary-container: #00714d;
  --color-pd-secondary-fixed: #6ffbbe;
  --color-pd-secondary-fixed-dim: #4edea3;
  --color-pd-on-secondary-fixed: #002113;
  --color-pd-on-secondary-fixed-variant: #005236;

  /* ── Tertiary ── */
  --color-pd-tertiary: #7f4f00;
  --color-pd-on-tertiary: #ffffff;
  --color-pd-tertiary-container: #a06500;
  --color-pd-on-tertiary-container: #fff7f1;
  --color-pd-tertiary-fixed: #ffddb8;
  --color-pd-tertiary-fixed-dim: #ffb95f;
  --color-pd-on-tertiary-fixed: #2a1700;
  --color-pd-on-tertiary-fixed-variant: #653e00;

  /* ── Error ── */
  --color-pd-error: #ba1a1a;
  --color-pd-on-error: #ffffff;
  --color-pd-error-container: #ffdad6;
  --color-pd-on-error-container: #93000a;

  /* ── Outline ── */
  --color-pd-outline: #727687;
  --color-pd-outline-variant: #c2c6d8;

  /* Design-system spacing (r- prefix); never override bare sm/md/lg/xl (breaks max-w-*) */
  --spacing-r-xs: 4px;
  --spacing-r-sm: 8px;
  --spacing-r-md: 16px;
  --spacing-r-lg: 24px;
  --spacing-r-xl: 40px;
  --spacing-gutter: 12px;
  --spacing-container-margin: 20px;

  /* ── Typography — Inter body/headlines, Geist labels/prices ── */
  --font-display: Inter, system-ui, sans-serif;
  --font-label: Geist, var(--font-geist-sans), system-ui, sans-serif;

  --text-display-lg: 48px;
  --text-display-lg--line-height: 56px;
  --text-display-lg--letter-spacing: -0.02em;
  --text-display-lg--font-weight: 700;

  --text-display-lg-mobile: 36px;
  --text-display-lg-mobile--line-height: 44px;
  --text-display-lg-mobile--letter-spacing: -0.02em;
  --text-display-lg-mobile--font-weight: 700;

  --text-headline-md: 24px;
  --text-headline-md--line-height: 32px;
  --text-headline-md--letter-spacing: -0.01em;
  --text-headline-md--font-weight: 600;

  --text-headline-sm: 20px;
  --text-headline-sm--line-height: 28px;
  --text-headline-sm--font-weight: 600;

  --text-body-lg: 18px;
  --text-body-lg--line-height: 28px;
  --text-body-lg--font-weight: 400;

  --text-body-md: 16px;
  --text-body-md--line-height: 24px;
  --text-body-md--font-weight: 400;

  --text-label-md: 14px;
  --text-label-md--line-height: 20px;
  --text-label-md--letter-spacing: 0.02em;
  --text-label-md--font-weight: 500;

  --text-price-lg: 24px;
  --text-price-lg--line-height: 24px;
  --text-price-lg--font-weight: 700;

  --text-caption: 12px;
  --text-caption--line-height: 16px;
  --text-caption--font-weight: 400;

  /* ── Elevation shadows ── */
  --shadow-elevation-2: 0px 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-elevation-3: 0px 12px 32px rgba(15, 23, 42, 0.12);
}

html,
body {
  margin: 0;
  padding: 0;
}
/* Light commerce pages override the global dark admin canvas */
body.redilix-light-active,
body.redilix-home-active,
body.redilix-auth-active,
body.redilix-product-active {
  background: #faf8ff !important;
  background-image: none !important;
  color: #131b2e !important;
}

.redilix-surface {
  background-color: #faf8ff;
  color: #131b2e;
  min-height: 100dvh;
}

.redilix-surface .material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  display: inline-block;
  vertical-align: middle;
}

/* ── Interaction ── */
.redilix-tap-target {
  transition: transform 0.15s;
}

.redilix-tap-target:active {
  transform: scale(0.95);
}

.redilix-tap-target-subtle:active {
  transform: scale(0.98);
}

/* ── Inputs ── */
.redilix-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 3rem;
  border-radius: 0.5rem;
  border: 1px solid #c2c6d8;
  background: #faf8ff;
  padding: 0 16px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #131b2e;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.redilix-input:focus {
  border-color: #0050cb;
  box-shadow: 0 0 0 2px rgba(0, 80, 203, 0.2);
}

.redilix-input::placeholder {
  color: #c2c6d8;
}

/* ── Buttons ── */
.redilix-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  background: #0050cb;
  padding: 12px 24px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: #ffffff;
  box-shadow: var(--shadow-elevation-2);
  transition: background-color 0.15s, opacity 0.15s, transform 0.15s;
}

.redilix-btn-primary:hover {
  background: #0054d6;
}

.redilix-btn-primary:disabled {
  opacity: 0.5;
}

.redilix-btn-primary:active {
  transform: scale(0.98);
}

.redilix-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  border: 1.5px solid #0050cb;
  background: transparent;
  padding: 12px 24px;
  font-family: Geist, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #0050cb;
  transition: background-color 0.15s, transform 0.15s;
}

.redilix-btn-secondary:hover {
  background: rgba(0, 80, 203, 0.05);
}

.redilix-btn-secondary:active {
  transform: scale(0.98);
}

.redilix-btn-ghost {
  border-radius: 0.5rem;
  padding: 4px 8px;
  font-family: Geist, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #0050cb;
  transition: background-color 0.15s;
}

.redilix-btn-ghost:hover {
  background: rgba(0, 80, 203, 0.1);
}

/* ── Cards ── */
.redilix-card {
  border-radius: 0.75rem;
  border: 1px solid #c2c6d8;
  background: #ffffff;
}

.redilix-card-elevated {
  border-radius: 0.75rem;
  border: 1px solid #c2c6d8;
  background: #ffffff;
  box-shadow: var(--shadow-elevation-2);
  transition: box-shadow 0.2s;
}

.redilix-card-elevated:hover {
  box-shadow: var(--shadow-elevation-3);
}

/* ── Price badge (secondary green tint) ── */
.redilix-price-badge {
  border-radius: 0.25rem;
  background: #ecfdf5;
  padding: 4px 8px;
  font-family: Geist, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #065f46;
}

/* ── Chips ── */
.redilix-chip {
  border-radius: 9999px;
  background: #f1f5f9;
  padding: 4px 12px;
  font-family: Geist, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #424656;
  transition: background-color 0.15s, color 0.15s;
}

.redilix-chip-selected {
  background: #0050cb;
  color: #ffffff;
}

/* ── Utilities ── */
.redilix-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.redilix-hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes redilix-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.redilix-animate-float {
  animation: redilix-float 6s ease-in-out infinite;
}