@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");

/* Black & White Theme — theme-bw.css (shadcn-flavored neutral) */

:root, [data-theme="light"] {
  --depth: 0;
  --font-display: "Geist", system-ui, sans-serif !important;
  --font-body: "Geist", system-ui, sans-serif !important;
  --body-text: #0a0a0a;

  /* DaisyUI theme colors */
  --color-primary: #0a0a0a;
  --color-primary-content: #ffffff;
  --color-secondary: #f4f4f5;
  --color-secondary-content: #0a0a0a;
  --color-tertiary: #e4e4e7;
  --color-tertiary-content: #0a0a0a;

  --color-success: #16a34a;
  --color-success-content: #ffffff;
  --color-warning: #0a0a0a;
  --color-warning-content: #ffffff;
  --color-error: #dc2626;
  --color-error-content: #ffffff;
  --color-info: #0a0a0a;
  --color-info-content: #ffffff;

  --color-background: #ffffff;
  --color-base-100: #ffffff;
  --color-base-200: #f4f4f5;
  --color-base-300: #e4e4e7;
  --color-base-content: #3f3f46;
  --color-neutral: #71717a;
  --color-accent: #0a0a0a;
  --color-accent-content: #ffffff;

  /* Tailwind @theme overrides */
  --color-coffee: #f4f4f5;
  --color-dark-coffee: #e4e4e7;
  --color-card-hover: #f4f4f5;
  --color-grey: #52525b;
  --color-light-grey: #a1a1aa;

  --color-danger: #dc2626;
  --color-surface-warm: #fafafa;
  --color-surface-subtle: #fafafa;
  --color-surface-highlight: #f4f4f5;
  --color-surface-warm-subtle: #fafafa;
  --color-surface-row: #f4f4f5;
  --color-progress-track-overlay: #e4e4e7;
  --color-progress-incoming: #a1a1aa;
  --color-surface-dark: #27272a;
  --color-texture-bg: #18181b;
  --color-card-strong: #0a0a0a;
  --color-heading: #0a0a0a;
  --color-muted: #71717a;
  --color-placeholder: #52525b;
  --color-divider: #e4e4e7;
  --color-divider-warm: #e4e4e7;
  --color-divider-accent: #d4d4d8;

  --color-primary-dark: #000000;
  --color-primary-badge: #18181b;

  /* Legacy variables */
  --color-primary-medium: #27272a;
  --color-primary-hover: #18181b;
  --color-footer-bg: #0a0a0a;
  --color-footer-text: #fafafa;
  --color-header-cta-bg: #f4f4f5;
  --color-header-cta-hover: #e4e4e7;
  --color-cart-badge-bg: #0a0a0a;
  --color-disabled-bg: #e4e4e7;

  --color-surface-secondary: #f4f4f5;
  --color-surface-secondary-hover: #e4e4e7;

  --shadow-themed-sm: none;
  --shadow-themed: none;
  --shadow-themed-md: none;
  --shadow-themed-lg: none;
  --shadow-themed-xl: none;
  --shadow-themed-2xl: none;
  --shadow-themed-inner: none;

  --bg-texture: none;
  --bg-border: none;

  --header-text: #0a0a0a;
  --header-text-muted: #52525b;

  --header-surface-text: #0a0a0a;
  --header-pickup-text: #0a0a0a;
  --header-banner-text: #ffffff;
  --header-banner-text-muted: rgba(255, 255, 255, 0.7);

  --header-action-bg: #0a0a0a;
  --header-action-text: #ffffff;
  --header-action-hover-bg: #27272a;
  --header-action-border: #0a0a0a;
  --header-action-hover-text: #ffffff;
  --header-action-radius: 0.125rem;

  --color-payment-mobile-bg: #f4f4f5;
  --color-payment-mobile-border: #e4e4e7;

  --header-search-bg: #ffffff;
  --header-search-border: #e4e4e7;
  --header-search-icon-bg: #0a0a0a;
  --header-search-icon-text: #ffffff;
  --header-search-text: #0a0a0a;

  --filter-toggle-bg: transparent;
  --filter-toggle-active-bg: #0a0a0a;
  --filter-toggle-text: #0a0a0a;
  --filter-toggle-active-text: #ffffff;
  --filter-toggle-border: #e4e4e7;
  --filter-toggle-hover-bg: #f4f4f5;
  --filter-toggle-radius: 0.125rem;

  --progress-bg: #f4f4f5;
  --progress-track: #e4e4e7;
  --progress-validated: #0a0a0a;
  --progress-user: #71717a;
  --progress-user-text: #52525b;
  --progress-group: #a1a1aa;
  --progress-group-text: #52525b;

  --cart-banner-accent: #ffffff;

  --surface-highlight: #f4f4f5;
  --surface-highlight-border: #e4e4e7;
  --card-disabled-bg: #e4e4e7;
  --stepper-future-bg: #e4e4e7;
  --stepper-done-bg: #f4f4f5;
  --secondary-border: #e4e4e7;
  --warning-border: #3f3f46;
  --tertiary-hover: #d4d4d8;

  --sidebar-text: #0a0a0a;
  --sidebar-text-active: #000000;
  --sidebar-text-muted: #52525b;
  --sidebar-divider: #e4e4e7;
  --sidebar-hover: #e4e4e7;

  --footer-text: #fafafa;
  --footer-text-muted: #a1a1aa;
  --footer-heading: #ffffff;

  --content-text: #3f3f46;
  --content-heading: #0a0a0a;
  --content-text-muted: #52525b;
  --content-link: #0a0a0a;

  --card-title: #0a0a0a;
  --card-text: #3f3f46;
  --card-text-muted: #52525b;
  --card-badge-text: #ffffff;

  --menu-text: #0a0a0a;
  --menu-text-active: #ffffff;
  --menu-text-muted: #52525b;
  --menu-bg: #ffffff;
  --menu-border: #e4e4e7;
  --menu-hover: #f4f4f5;

  --cart-text: #0a0a0a;
  --cart-text-muted: #52525b;
  --cart-text-action: #0a0a0a;
  --cart-text-disabled: #a1a1aa;

  --modal-text: #0a0a0a;
  --modal-text-muted: #52525b;

  --badge-text: #ffffff;
  --badge-text-on-light: #0a0a0a;

  --table-header: #52525b;
  --table-text: #0a0a0a;
  --table-link: #0a0a0a;

  /* Group card icon */
  --group-card-icon-color: #0a0a0a;

  /* Button Primary — solid black */
  --btn-primary-bg: #0a0a0a;
  --btn-primary-text: #ffffff;
  --btn-primary-hover-bg: #27272a;
  --btn-primary-hover-text: #ffffff;
  --btn-primary-hover-border: 1px solid #0a0a0a;
  --btn-primary-disabled-bg: #71717a;
  --btn-primary-disabled-text: #ffffff;
  --btn-primary-border: 1px solid transparent;
  --btn-primary-shadow: none;
  --btn-primary-radius: 0.125rem;
  --btn-primary-padding-x: 1.25rem;
  --btn-primary-padding-y: 0.625rem;

  /* Button Secondary — light surface */
  --btn-secondary-bg: #f4f4f5;
  --btn-secondary-text: #0a0a0a;
  --btn-secondary-hover-bg: #e4e4e7;
  --btn-secondary-hover-text: #0a0a0a;
  --btn-secondary-hover-border: 1px solid #e4e4e7;
  --btn-secondary-disabled-bg: #f4f4f5;
  --btn-secondary-disabled-text: #71717a;
  --btn-secondary-border: 1px solid #e4e4e7;
  --btn-secondary-shadow: none;
  --btn-secondary-radius: 0.125rem;
  --btn-secondary-padding-x: 1.25rem;
  --btn-secondary-padding-y: 0.625rem;

  /* Button Black */
  --btn-black-bg: #0a0a0a;
  --btn-black-text: #ffffff;
  --btn-black-hover-bg: #27272a;
  --btn-black-hover-text: #ffffff;
  --btn-black-hover-border: 1px solid #0a0a0a;
  --btn-black-border: 1px solid transparent;
  --btn-black-shadow: none;
  --btn-black-radius: 0.125rem;
  --btn-black-padding-x: 1.25rem;
  --btn-black-padding-y: 0.625rem;

  --btn-black-outlined-bg: transparent;
  --btn-black-outlined-text: #0a0a0a;
  --btn-black-outlined-border: 1px solid #e4e4e7;
  --btn-black-outlined-hover-opacity: 1;
  --btn-black-outlined-radius: 0.125rem;
  --btn-black-outlined-padding-x: 1.25rem;
  --btn-black-outlined-padding-y: 0.625rem;

  /* Button Secondary Outlined */
  --btn-secondary-outlined-bg: transparent;
  --btn-secondary-outlined-text: #0a0a0a;
  --btn-secondary-outlined-border: 1px solid #e4e4e7;
  --btn-secondary-outlined-hover-opacity: 1;
  --btn-secondary-outlined-hover-bg: #f4f4f5;
  --btn-secondary-outlined-hover-text: #0a0a0a;
  --btn-secondary-outlined-hover-border: 1px solid #d4d4d8;
  --btn-secondary-outlined-radius: 0.125rem;
  --btn-secondary-outlined-padding-x: 1.25rem;
  --btn-secondary-outlined-padding-y: 0.625rem;
}

.btn,
.btn-theme-primary,
.btn-theme-secondary,
.btn-theme-secondary-outlined,
.btn-theme-black,
.btn-theme-black-outlined {
  border-radius: 0.125rem;
}

/* Brutalist shapes: square off the GR.APP pill rounding on rectangular
   elements (search bar, cards, info pills), while leaving true circles
   (avatars, icon buttons, count badges) untouched. */
.card {
  border-radius: 0.125rem !important;
}

/* Cards currently use a soft bg-black/5 fill — give them a crisp border
   and a flat white surface for the "tool/editorial" feel. */
.card.bg-black\/5 {
  background-color: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
}

/* Search field: pill -> square */
input.rounded-full {
  border-radius: 0.125rem !important;
}

/* "Fin dans…" timer pills and similar white info chips over imagery */
.rounded-full.bg-white.text-black {
  border-radius: 0.125rem !important;
}

.btn-primary:hover:not(:disabled) {
  background-color: #27272a !important;
  color: #ffffff !important;
  border: 1px solid #0a0a0a !important;
}

.btn-secondary:hover:not(:disabled) {
  background-color: #e4e4e7 !important;
  color: #0a0a0a !important;
  border: 1px solid #e4e4e7 !important;
}

/* Discount/promo badge uses badge-warning with a hardcoded text-black —
   force white text so it stays readable on the neutral-black warning bg */
.badge-warning {
  color: #ffffff !important;
}

/* DaisyUI progress: the native track is black at 20% alpha — barely visible
   on white. Use a solid neutral track with a black fill. */
.progress {
  background-color: #e4e4e7;
}

.progress-primary,
.progress::-webkit-progress-value,
.progress-primary::-webkit-progress-value {
  color: #0a0a0a;
}

.progress::-webkit-progress-bar {
  background-color: #e4e4e7;
}

.progress::-moz-progress-bar,
.progress-primary::-moz-progress-bar {
  background-color: #0a0a0a;
}

/* Checkbox — square, neutral */
.checkbox {
  border-radius: 0.125rem !important;
  border-width: 1.5px;
  border-color: #d4d4d8;
  --input-color: #0a0a0a;
  color: #ffffff;
}

.checkbox:checked {
  background-color: #0a0a0a;
  border-color: #0a0a0a;
}

/* Radio */
.radio {
  --input-color: #0a0a0a;
  border-width: 1.5px;
  box-shadow: none;
}

/* Input text — neutral bordered */
.input,
.textarea,
.select {
  border-radius: 0.125rem !important;
  border: 1px solid #e4e4e7 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
}

.input input,
.input label {
  background-color: transparent !important;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.input:focus,
.input:focus-within,
.textarea:focus,
.select:focus {
  border: 1px solid #0a0a0a !important;
  outline: none !important;
}

.input.border-red-500,
.textarea.border-red-500,
.select.border-red-500 {
  border: 1px solid #ef4444 !important;
}

/* Phone input */
.phone-input.react-tel-input {
  --color-surface-secondary: white;
  border-radius: 0.125rem !important;
  border: 1px solid #d4d4d8 !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: hidden;
}

.phone-input.react-tel-input .flag-dropdown {
  border-right: 1px solid #e4e4e7 !important;
}

.phone-input.react-tel-input:focus-within {
  border-color: #0a0a0a !important;
}

.phone-input.react-tel-input.border-red-500 {
  border-color: #ef4444 !important;
}

.phone-input.react-tel-input .form-control {
  border: none !important;
  border-radius: 0.125rem !important;
}

.phone-input.react-tel-input .flag-dropdown {
  border: none !important;
  border-right: 1px solid #e4e4e7 !important;
  border-radius: 0.125rem 0 0 0.125rem !important;
}

.phone-input.react-tel-input:focus-within {
  border: 1px solid #0a0a0a !important;
}

.phone-input.react-tel-input.border-red-500 {
  border: 1px solid #ef4444 !important;
}

.texture-bg {
  background-image: none !important;
  background-blend-mode: normal !important;
  background-repeat: no-repeat !important;
}

/* Pagination — rounded, uniform size */
.join {
  gap: 0.25rem;
}

.join .btn {
  border-radius: 0.125rem !important;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
}

/* Recap/summary containers — rounded + border (replaces shadow) */
.bg-surface-warm.texture-bg.rounded {
  border-radius: 0.125rem !important;
  outline: 1px solid var(--color-divider, #e4e4e7) !important;
  outline-offset: -1px !important;
  overflow: hidden !important;
}

.bg-surface-warm.texture-bg.rounded .border-t,
.bg-surface-warm.texture-bg.rounded hr,
.bg-surface-warm.rounded-bl-xl .border-t,
.bg-surface-warm.rounded-bl-xl hr {
  border-color: var(--color-divider, #e4e4e7) !important;
}

.fixed.bottom-0.bg-surface-warm {
  border-top: 1px solid var(--color-divider, #e4e4e7) !important;
}

.bg-surface-warm.rounded-bl-xl {
  outline: 1px solid var(--color-divider, #e4e4e7) !important;
  outline-offset: -1px !important;
}

.skeleton {
  --color-base-300: #e4e4e7 !important;
  --color-base-100: #fafafa !important;
}

.toggle:checked,
.toggle[aria-checked="true"],
.toggle:has(> input:checked) {
  background-color: #ffffff !important;
}

footer.bg-footer-bg {
  background-color: #0a0a0a !important;
  border-top: 2px solid #0a0a0a !important;
}

footer.bg-footer-bg .footer a,
footer.bg-footer-bg .footer .link {
  color: #d4d4d8 !important;
}

footer.bg-footer-bg .footer a:hover,
footer.bg-footer-bg .footer .link:hover {
  color: #ffffff !important;
}

footer.bg-footer-bg .footer img {
  filter: invert(1) brightness(1.6) !important;
}