/* ─────────────────────────────────────────────
   PrimSync Theme — Light
   Monochrome, flat, shadcn/Saleor register.
   Ink = cool blue-black (#080D19), bg = neutral
   zinc-50. Accents (blue/emerald/amber/red) are
   semantic, not decorative.
   ───────────────────────────────────────────── */

[data-theme="light"] {
  /* ── Surfaces ── */
  --color-bg:          #FFFFFF;   /* body */
  --color-bg2:         #FFFFFF;   /* cards, elevated surfaces */
  --color-bg3:         #F4F4F5;   /* zinc-100, subtle inset / hover row */
  --color-toast-bg:    #FFFFFF;   /* floating toast surface */
  --color-sidebar-bg:  #FAFAFA;   /* matches body — flat */
  --color-header-bg:   #FAFAFA;
  --color-footer-bg:   #FAFAFA;

  /* ── Borders ── */
  --color-border:      #E4E4E7;   /* zinc-200, default */
  --color-border2:     #D4D4D8;   /* zinc-300, stronger separator */

  /* ── Text ── */
  --color-ink:         #080D19;   /* primary text + primary button bg */
  --color-on-ink:      #FAFAFA;   /* text ON ink-bg surface (contrast pair — flips in dark) */
  --color-muted:       #52525B;   /* zinc-600, body secondary */
  --color-dim:         #71717A;   /* zinc-500, captions / placeholders */

  /* ── Semantic accents (NOT decorative — use sparingly) ── */
  --color-accent:      #2563EB;   /* blue-600, links + informational */
  --color-accent2:     #7C3AED;   /* violet-600, secondary info (rare) */
  --color-accent3:     #059669;   /* emerald-600, success */
  --color-accent4:     #D97706;   /* amber-600, warning */
  --color-accent5:     #9333EA;   /* purple-600, staged milestone (Picked, Packed) */
  --color-danger:      #DC2626;   /* red-600, destructive */

  --color-white:       #FFFFFF;

  /* ── Table heads ── */
  --color-tbl-head-bg:   #FAFAFA;
  --color-tbl-head-text: #52525B;

  /* ── Shadows (subtle) ── */
  --shadow-dropdown: 0 2px 8px rgba(8, 13, 25, 0.06);
  --shadow-card: 0 2px 3px rgba(8, 13, 25, 0.03), 0 2px 3px rgba(8, 13, 25, 0.03);

  /* ── Focus ring (used on inputs, selects, date-range, filter-search) ── */
  --focus-ring: color-mix(in srgb, var(--color-ink) 10%, transparent);

  /* ── Asset variants (swap by theme) ── */
  --placeholder-url: url('/media/placeholder.svg');
}

/* ── Inputs: white background on light theme ── */
[data-theme="light"] .form-input,
[data-theme="light"] .login-input,
[data-theme="light"] .otp-input,
[data-theme="light"] .filter-search-input,
[data-theme="light"] .kt-date-range-input,
[data-theme="light"] .filter-select,
[data-theme="duotone"] .form-input,
[data-theme="duotone"] .login-input,
[data-theme="duotone"] .otp-input,
[data-theme="duotone"] .filter-search-input,
[data-theme="duotone"] .kt-date-range-input,
[data-theme="duotone"] .filter-select {
  background: var(--color-white) !important;
}
[data-theme="light"] .chart-period-select option,
[data-theme="light"] .filter-select option,
[data-theme="duotone"] .chart-period-select option,
[data-theme="duotone"] .filter-select option {
  background: var(--color-white);
  color: var(--color-ink);
}

/* ── Checkboxes (unchecked only) ── */
[data-theme="light"] .custom-check input:not(:checked) + .checkmark,
[data-theme="light"] .login-checkbox:not(:checked),
[data-theme="light"] .order-checkbox:not(:checked),
[data-theme="duotone"] .custom-check input:not(:checked) + .checkmark,
[data-theme="duotone"] .login-checkbox:not(:checked),
[data-theme="duotone"] .order-checkbox:not(:checked) {
  background: var(--color-white) !important;
}

/* ── Flatpickr calendar ── */
[data-theme="light"] .flatpickr-dark.flatpickr-calendar,
[data-theme="duotone"] .flatpickr-dark.flatpickr-calendar {
  background: var(--color-white) !important;
  box-shadow: 0 12px 36px rgba(8, 13, 25, 0.08) !important;
}
[data-theme="light"] .flatpickr-dark .flatpickr-months,
[data-theme="light"] .flatpickr-dark .flatpickr-month,
[data-theme="light"] .flatpickr-dark .flatpickr-weekdays,
[data-theme="light"] .flatpickr-dark span.flatpickr-weekday,
[data-theme="duotone"] .flatpickr-dark .flatpickr-months,
[data-theme="duotone"] .flatpickr-dark .flatpickr-month,
[data-theme="duotone"] .flatpickr-dark .flatpickr-weekdays,
[data-theme="duotone"] .flatpickr-dark span.flatpickr-weekday {
  background: var(--color-white) !important;
}
[data-theme="light"] .flatpickr-dark .fp-btn-reset:hover,
[data-theme="duotone"] .flatpickr-dark .fp-btn-reset:hover {
  background: var(--color-bg3);
  color: var(--color-ink);
}

/* ── Dropdowns (user, lang, notif, TomSelect) ── */
[data-theme="light"] .user-dropdown,
[data-theme="light"] .lang-dropdown,
[data-theme="light"] .notif-drawer,
[data-theme="light"] .ts-dropdown,
[data-theme="duotone"] .user-dropdown,
[data-theme="duotone"] .lang-dropdown,
[data-theme="duotone"] .notif-drawer,
[data-theme="duotone"] .ts-dropdown {
  box-shadow: 0 4px 16px rgba(8, 13, 25, 0.08) !important;
}

[data-theme="light"] .toast,
[data-theme="duotone"] .toast {
  box-shadow: 0 4px 16px rgba(8, 13, 25, 0.08), 0 1px 3px rgba(8, 13, 25, 0.04);
}

[data-theme="light"] .billing-tab.bg-accent,
[data-theme="duotone"] .billing-tab.bg-accent {
  color: #ffffff !important;
}

[data-theme="light"] .login-card,
[data-theme="duotone"] .login-card {
  box-shadow: 0 4px 16px rgba(8, 13, 25, 0.06), 0 1px 3px rgba(8, 13, 25, 0.03);
}