/* Design tokens. Values are copied from the storefront stylesheet (massacosmetics-web/css/styles.css) so both sites share one look;
   this file is the admin's own copy, nothing links to the storefront at runtime.
   Light (storefront cream) is the default. Dark is an optional toggle: theme-init.js applies it only when the user chose it.
   tests/contrast.mjs reads this file and checks the text pairs for >= 4.5:1 in both themes. */
:root {
  color-scheme: light;

  /* surfaces */
  --bg: #f7eedf;            /* storefront --cream */
  --surface: #fffefb;       /* storefront --card */
  --surface-2: #f4e9d8;
  --surface-3: #ebdfcb;
  --line: #e7dccb;
  --line-strong: #8f826f;     /* control borders */
  --overlay: rgba(20, 13, 27, 0.55);
  --wash: rgba(20, 13, 27, 0.06);     /* hover wash on any fill */

  /* text */
  --ink: #140d1b;
  --ink-2: #43394a;
  --muted: #655b6b;

  /* brand */
  --accent: #6b5198;          /* links, icons, focus */
  --accent-strong: #5a4381;   /* storefront --purple-dark */
  --accent-fill: #6b5198;     /* primary button background */
  --on-accent: #ffffff;
  --accent-soft: #dcd2f2;     /* storefront --pill */
  --accent-soft-ink: #46316f;
  --burgundy: #8e1f4b;
  --gold: #c99a5b;

  /* dark plum areas (sidebar) and the black secondary button, as in the storefront footer / dark pill */
  --plum: #140d1b;
  --side-bg: #140d1b;
  --side-ink: #f6f0fb;
  --side-muted: #b8adc6;
  --side-line: #2c2236;
  --side-hover: rgba(255, 255, 255, 0.09);
  --side-active-bg: #6b5198;
  --side-active-ink: #ffffff;
  --btn2-bg: #140d1b;
  --btn2-ink: #ffffff;
  --btn2-hover: #2a1f35;

  /* feedback */
  --success: #2c6b43;
  --success-soft: #d9efdf;
  --warn: #86500a;
  --warn-soft: #fbe8c7;
  --danger: #b3261e;
  --danger-soft: #f6dcd9;
  --danger-fill: #b3261e;

  /* order status: background / text (each always shown with an icon as well) */
  --st-placed-bg: #fbe8c7;     --st-placed-fg: #7a4a00;
  --st-packed-bg: #e4dcf7;     --st-packed-fg: #46316f;
  --st-on_the_way-bg: #d8e8f8; --st-on_the_way-fg: #174a78;
  --st-delivered-bg: #d6efdd;  --st-delivered-fg: #1f5a35;
  --st-cancelled-bg: #f6dcd9;  --st-cancelled-fg: #8f1d14;
  --st-returned-bg: #f3e1c4;   --st-returned-fg: #6b4300;

  /* charts (marks need >= 3:1 against the surface) */
  --chart-bar: #8a73b5;
  --chart-bar-strong: #54407d;
  --chart-grid: #e4d9c6;

  /* shadows */
  --shadow-1: 0 1px 2px rgba(20, 13, 27, 0.04), 0 6px 20px rgba(20, 13, 27, 0.05);
  --shadow-2: 0 2px 6px rgba(29, 20, 36, 0.08), 0 14px 36px rgba(29, 20, 36, 0.12);

  /* spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 22px; --r-pill: 999px;

  /* type scale */
  --fs-xs: 0.75rem; --fs-sm: 0.8125rem; --fs-base: 0.9375rem; --fs-md: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem;
  --font-display: 'Playfair Display', 'Noto Naskh Arabic', Georgia, 'Times New Roman', serif;
  --font-ui: 'Manrope', 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, Tahoma, Arial, sans-serif;

  /* motion */
  --t-fast: 150ms; --t-med: 200ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* layout */
  --sidebar-w: 264px; --topbar-h: 64px; --tabbar-h: 64px; --content-max: 1240px;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #130e19;
  --surface: #1c1624;
  --surface-2: #251d30;
  --surface-3: #2f2540;
  --line: #382d45;
  --line-strong: #7d6f8c;
  --overlay: rgba(6, 3, 10, 0.66);
  --wash: rgba(255, 255, 255, 0.08);

  --ink: #f3edf8;
  --ink-2: #d0c5db;
  --muted: #b0a3bd;

  --accent: #bba6ec;
  --accent-strong: #d3c3f7;
  --accent-fill: #bba6ec;
  --on-accent: #1a1224;
  --accent-soft: #34284a;
  --accent-soft-ink: #dccffa;
  --burgundy: #f08ab0;
  --gold: #d9b27a;

  --side-bg: #0d0912;
  --side-ink: #f6f0fb;
  --side-muted: #b8adc6;
  --side-active-bg: #6b5198;
  --side-active-ink: #ffffff;
  --side-line: #2a2034;
  --btn2-bg: #f3edf8;
  --btn2-ink: #1a1224;
  --btn2-hover: #ffffff;

  --success: #7fd69d;
  --success-soft: #153a26;
  --warn: #efc16b;
  --warn-soft: #402f0c;
  --danger: #ff9c94;
  --danger-soft: #4a1d1a;
  --danger-fill: #ffb3ac;

  --st-placed-bg: #3d2f10;     --st-placed-fg: #f3c981;
  --st-packed-bg: #31264d;     --st-packed-fg: #cdbcf3;
  --st-on_the_way-bg: #12324f; --st-on_the_way-fg: #9cc9f2;
  --st-delivered-bg: #123a26;  --st-delivered-fg: #8fd9a9;
  --st-cancelled-bg: #4a1d1a;  --st-cancelled-fg: #f2a6a0;
  --st-returned-bg: #4a3512;   --st-returned-fg: #f0c987;

  --chart-bar: #8b74c0;
  --chart-bar-strong: #c9b8f5;
  --chart-grid: #382d45;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.5);
}

:root[dir='rtl'] {
  --font-display: 'Noto Naskh Arabic', 'Playfair Display', Georgia, serif;
  --font-ui: 'Cairo', 'Manrope', system-ui, 'Segoe UI', Tahoma, Arial, sans-serif;
}