/* ============================================================
   Yasmine Shop — design tokens & shared foundations
   Shared by storefront and dashboard. RTL/LTR safe:
   custom rules use logical properties only.
   ============================================================ */

/* --- Typography: Cairo variable (Arabic + Latin), self-hosted --- */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/cairo-arabic.4d90a59cb181.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08A0-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC;
}
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/cairo-latin.3c9597566d23.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand — configurable from /manage/ store settings. The values here are the
     defaults; partials/brand_colors.html overrides them per request. --brand-on-primary
     applies ONLY on primary-colored backgrounds, never to normal page text. */
  --brand-primary: #b03a66;
  --brand-on-primary: #ffffff;
  --brand-primary-hover: #903054;
  --brand-primary-soft: #f7ebf0;
  --brand-primary-rgb: 176, 58, 102;
  --brand-primary-hover-rgb: 144, 48, 84;
  --ys-primary: var(--brand-primary);
  --ys-on-primary: var(--brand-on-primary);
  --ys-primary-hover: var(--brand-primary-hover);
  --ys-primary-soft: var(--brand-primary-soft);
  --ys-primary-rgb: var(--brand-primary-rgb);
  --ys-accent: #c9a227;
  --ys-accent-soft: #faf3dd;

  /* Neutrals */
  --ys-ink: #182420;
  --ys-muted: #5f6f6a;
  --ys-line: #e3e8e6;
  --ys-surface: #ffffff;
  --ys-bg: #f4f6f5;

  /* Feedback */
  --ys-success: #1e7d46;
  --ys-danger: #b3261e;
  --ys-warning: #8f5c00; /* AA on white, --ys-bg and the warning tint */
  --ys-info: #0b6bcb;

  /* Shape & depth */
  --ys-radius-sm: 8px;
  --ys-radius: 12px;
  --ys-radius-lg: 18px;
  --ys-shadow-sm: 0 1px 2px rgba(24, 36, 32, 0.06);
  --ys-shadow: 0 6px 24px -8px rgba(24, 36, 32, 0.14);
  --ys-shadow-lg: 0 20px 48px -16px rgba(24, 36, 32, 0.22);

  --ys-font: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --ys-sidebar-w: 264px;

  /* Bridge into Bootstrap */
  --bs-body-font-family: var(--ys-font);
  --bs-body-bg: var(--ys-bg);
  --bs-body-color: var(--ys-ink);
  --bs-border-color: var(--ys-line);
  --bs-link-color-rgb: var(--brand-primary-rgb);
  --bs-link-hover-color-rgb: var(--brand-primary-hover-rgb);
}

body {
  font-family: var(--ys-font);
  background-color: var(--ys-bg);
  color: var(--ys-ink);
}

/* --- Bootstrap component theming --- */
.btn {
  --bs-btn-border-radius: var(--ys-radius-sm);
  font-weight: 600;
}
.btn-primary {
  --bs-btn-color: var(--ys-on-primary);
  --bs-btn-bg: var(--ys-primary);
  --bs-btn-border-color: var(--ys-primary);
  --bs-btn-hover-color: var(--ys-on-primary);
  --bs-btn-hover-bg: var(--ys-primary-hover);
  --bs-btn-hover-border-color: var(--ys-primary-hover);
  --bs-btn-active-color: var(--ys-on-primary);
  --bs-btn-active-bg: var(--ys-primary-hover);
  --bs-btn-active-border-color: var(--ys-primary-hover);
  --bs-btn-disabled-color: var(--ys-on-primary);
  --bs-btn-disabled-bg: var(--ys-primary);
  --bs-btn-disabled-border-color: var(--ys-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--ys-primary);
  --bs-btn-border-color: var(--ys-primary);
  --bs-btn-hover-color: var(--ys-on-primary);
  --bs-btn-hover-bg: var(--ys-primary);
  --bs-btn-hover-border-color: var(--ys-primary);
  --bs-btn-active-color: var(--ys-on-primary);
  --bs-btn-active-bg: var(--ys-primary);
  --bs-btn-active-border-color: var(--ys-primary);
}
.form-control,
.form-select {
  border-radius: var(--ys-radius-sm);
  border-color: var(--ys-line);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ys-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--ys-primary-rgb), 0.12);
}
.form-check-input:checked {
  background-color: var(--ys-primary);
  border-color: var(--ys-primary);
}
.card {
  --bs-card-border-color: var(--ys-line);
  --bs-card-border-radius: var(--ys-radius);
  box-shadow: var(--ys-shadow-sm);
}
.dropdown-menu {
  --bs-dropdown-border-radius: var(--ys-radius);
  --bs-dropdown-border-color: var(--ys-line);
  box-shadow: var(--ys-shadow);
}
.modal-content {
  border-radius: var(--ys-radius-lg);
  border: 0;
  box-shadow: var(--ys-shadow-lg);
}
.table {
  --bs-table-border-color: var(--ys-line);
}

/* --- Shared utilities --- */
.text-soft {
  color: var(--ys-muted);
}
.text-warn { color: var(--ys-warning); }
/* Skip-to-content link (both shells): visible only when focused. */
.ys-skip, .sf-skip {
  position: absolute; inset-block-start: -100px; inset-inline-start: 1rem;
  background: var(--ys-primary); color: var(--ys-on-primary); padding: .5rem .9rem; border-radius: 8px; z-index: 2000;
}
.ys-skip:focus, .sf-skip:focus { inset-block-start: .5rem; color: var(--ys-on-primary); }  /* Bootstrap's .text-warning (#ffc107) fails contrast on white */
/* Money markup comes from the single core_ui.money tag (both shells). */
.money { white-space: nowrap; }
.money-symbol { font-size: .8em; }
.badge-soft-primary {
  background: var(--ys-primary-soft);
  color: var(--ys-primary);
  font-weight: 600;
}
.badge-soft-gold {
  background: var(--ys-accent-soft);
  color: #7a5f0c; /* AA on the gold tint */
  font-weight: 600;
}

/* --- Toasts (shared feedback) --- */
.ys-toast-container {
  position: fixed;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.ys-toast-region { display: flex; flex-direction: column; gap: 0.5rem; }
.ys-toast-region:empty { display: none; }
.ys-toast { pointer-events: none; } /* feedback only: a toast must never block a Save button or a modal footer underneath */
.ys-toast {
  min-inline-size: 260px;
  max-inline-size: 360px;
  background: var(--ys-surface);
  border-radius: var(--ys-radius);
  box-shadow: var(--ys-shadow);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-inline-start: 4px solid var(--ys-primary);
  animation: ys-toast-in 0.25s ease;
}
.ys-toast.is-success { border-inline-start-color: var(--ys-success); }
.ys-toast.is-error { border-inline-start-color: var(--ys-danger); }
.ys-toast .bi { font-size: 1.1rem; }
.ys-toast.is-success .bi { color: var(--ys-success); }
.ys-toast.is-error .bi { color: var(--ys-danger); }
@keyframes ys-toast-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

/* --- Language field markers (dashboard forms, shared pattern) --- */
.lang-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-inline-start: 0.35rem;
}
.lang-badge.ar { background: var(--ys-primary-soft); color: var(--ys-primary); }
.lang-badge.en { background: var(--ys-accent-soft); color: #8a6d10; }