:root {
  color-scheme: light;

  /* New design tokens */
  --green-darkest: #2f5943;
  --green-mid: #4f7861;
  --green-bright: #6e9780;
  --green-pale: #f1f4ef;
  --green-glow: rgba(79, 120, 97, 0.08);
  --gold: #b59b78;
  --gold-pale: #faf6ef;
  --dark: #1c2628;
  --mid: #596466;
  --gray: #8b948f;
  --border: #dde4de;
  --bg: #eef2ed;
  --white: #fcfdfb;

  --ink: #1c2628;
  --ink-soft: #596466;
  --accent: #2f5943;
  --accent-soft: #4f7861;
  --accent-quiet: rgba(47, 89, 67, 0.92);
  --accent-bright: #01A652;
  --accent-bright-soft: rgba(1, 166, 82, 0.12);
  --accent-bright-border: rgba(1, 166, 82, 0.26);
  --accent-bright-ink: #f7fffa;
  --muted: rgba(89, 100, 102, 0.82);
  --chip-bg: #f2f4ef;
  --chip-border: rgba(47, 89, 67, 0.12);
  --surface-border: rgba(82, 98, 92, 0.14);
  --page-bg: #f1f4f0;
  --cream: #f7f8f4;
  --card: #f5f7f3;
  --grid: rgba(76, 94, 85, 0.05);
  --shadow: 0 22px 48px rgba(10, 16, 17, 0.12);
  --logo-filter: saturate(0.84) brightness(0.99);

  /* Unified glass contract */
  --glass-alpha-base: 0.24;
  --glass-alpha-mid: 0.3;
  --glass-alpha-strong: 0.36;
  --glass-blur: 10px;
  --glass-saturate: 112%;
  --glass-distort-opacity: 0.05;
  --control-radius: 12px;
  --control-radius-tight: 10px;
  --surface-layer-1: rgba(255, 255, 255, var(--glass-alpha-base));
  --surface-layer-2: rgba(255, 255, 255, var(--glass-alpha-mid));
  --surface-layer-3: rgba(255, 255, 255, var(--glass-alpha-strong));
  --surface-stroke-strong: rgba(47, 89, 67, 0.12);

  /* Shared UI surfaces */
  --surface: var(--surface-layer-1);
  --surface-strong: var(--surface-layer-2);
  --panel-shadow: 0 14px 30px rgba(10, 16, 17, 0.09);
  --panel-shadow-strong: 0 18px 36px rgba(10, 16, 17, 0.12);
  --danger: #b42318;
  --badge-rent: var(--accent-bright);
  --badge-sale: #F59E0B;
  --badge-sale-text: #8a6843;
  --transition-spring: cubic-bezier(0.25, 1, 0.5, 1);

  /* ── Type scale (Outfit body) ── */
  --text-xs:    0.72rem;   --leading-xs:    1.4;
  --text-sm:    0.82rem;   --leading-sm:    1.45;
  --text-base:  0.9rem;    --leading-base:  1.5;
  --text-lg:    1.05rem;   --leading-lg:    1.4;
  --text-xl:    1.25rem;   --leading-xl:    1.3;
  --text-2xl:   1.55rem;   --leading-2xl:   1.2;
  --text-3xl:   2rem;      --leading-3xl:   1.1;

  /* ── Type scale (Cormorant Garamond headings) ── */
  --heading-lg:   1.25rem;  --heading-leading-lg:   1.25;
  --heading-xl:   1.6rem;   --heading-leading-xl:   1.15;
  --heading-2xl:  2.2rem;   --heading-leading-2xl:  1.1;

  /* ── Color variant tokens ── */
  --gold-muted: rgba(181, 155, 120, 0.22);
  --gold-border: rgba(181, 155, 120, 0.14);
  --danger-muted: rgba(180, 35, 24, 0.12);
  --danger-border: rgba(180, 35, 24, 0.28);
  --ink-faint: rgba(28, 38, 40, 0.06);
  --ink-shadow: rgba(28, 38, 40, 0.11);
  --white-soft: rgba(255, 255, 255, 0.7);
  --white-muted: rgba(255, 255, 255, 0.4);

  /* ── Rating stars ── */
  --star-fill: #f0b44c;
  --star-empty: rgba(18, 20, 18, 0.18);

  /* ── Semantic accents ── */
  --indigo: #4338ca;
  --indigo-muted: rgba(99, 102, 241, 0.08);
  --indigo-border: rgba(99, 102, 241, 0.16);
  --rank-highlight: #6ee7a0;
  --accent-hover: #9ad4b2;
  --sparkbar-bg: #ddddd8;

  /* ── Z-index scale ── */
  --z-behind: -1;
  --z-base: 0;
  --z-content: 1;
  --z-raised: 2;
  --z-sticky: 3;
  --z-dropdown: 24;
  --z-overlay: 50;
  --z-nav: 100;
  --z-modal: 200;
  --z-toast: 300;
}

:root:not([data-mode="light"]) {
  color-scheme: dark;
  --ink: #e4ece8;
  --ink-soft: #b4c2bb;
  --cream: #eef2ef;
  --card: #222222;
  --accent: #86a48f;
  --accent-soft: #658270;
  --accent-bright: #2ec16d;
  --accent-bright-soft: rgba(46, 193, 109, 0.16);
  --accent-bright-border: rgba(46, 193, 109, 0.34);
  --accent-bright-ink: #0c1a12;
  --grid: rgba(220, 230, 225, 0.08);
  --shadow: 0 26px 56px rgba(0, 0, 0, 0.48);
  --logo-filter: saturate(0.78) brightness(1.08);
  --page-bg: #1a1a1a;
  --accent-quiet: rgba(199, 214, 205, 0.92);

  --surface-layer-1: rgba(26, 26, 26, 0.24);
  --surface-layer-2: rgba(26, 26, 26, 0.3);
  --surface-layer-3: rgba(26, 26, 26, 0.36);
  --surface-stroke-strong: rgba(226, 236, 230, 0.16);

  /* Shared UI surfaces */
  --surface: var(--surface-layer-1);
  --surface-strong: var(--surface-layer-2);
  --surface-border: rgba(226, 236, 230, 0.14);
  --panel-shadow: 0 22px 46px rgba(0, 0, 0, 0.42);
  --panel-shadow-strong: 0 26px 54px rgba(0, 0, 0, 0.48);
  --muted: rgba(205, 216, 210, 0.74);
  --chip-bg: rgba(34, 34, 34, 0.76);
  --chip-border: rgba(226, 236, 230, 0.18);
  --badge-sale-text: #f0c96d;

  --gold-muted: rgba(181, 155, 120, 0.18);
  --gold-border: rgba(181, 155, 120, 0.12);
  --danger-muted: rgba(180, 35, 24, 0.16);
  --danger-border: rgba(180, 35, 24, 0.32);
  --ink-faint: rgba(226, 236, 230, 0.06);
  --white-soft: rgba(255, 255, 255, 0.5);
  --white-muted: rgba(255, 255, 255, 0.25);

  /* ── Rating stars ── */
  --star-fill: #f0c96d;
  --star-empty: rgba(226, 236, 230, 0.18);

  /* ── Semantic accents ── */
  --indigo: #a5b4fc;
  --indigo-muted: rgba(99, 102, 241, 0.12);
  --indigo-border: rgba(99, 102, 241, 0.22);
  --rank-highlight: #6ee7a0;
  --accent-hover: #9ad4b2;
  --sparkbar-bg: rgba(255, 255, 255, 0.12);
}

/* ── i18n type overrides (placeholder — tune with real Arabic content) ── */
/*
[lang="ar"] {
  --text-xs:    0.78rem;   --leading-xs:    1.55;
  --text-sm:    0.9rem;    --leading-sm:    1.6;
  --text-base:  1rem;      --leading-base:  1.65;
  --text-lg:    1.15rem;   --leading-lg:    1.55;
  --text-xl:    1.35rem;   --leading-xl:    1.45;
  --text-2xl:   1.7rem;    --leading-2xl:   1.35;
  --text-3xl:   2.2rem;    --leading-3xl:   1.25;
}
*/

/* ─── Language-specific font stacks ─── */
:root:lang(ar) { font-family: 'Noto Sans Arabic', sans-serif; }
:root:lang(fa) { font-family: 'Vazirmatn', sans-serif; }
:root:lang(zh-hans),
:root:lang(zh) { font-family: 'Noto Sans SC', sans-serif; }
:root:lang(zh-hant) { font-family: 'Noto Sans TC', sans-serif; }

/* ─── RTL text-direction helpers (text only — layout does NOT mirror) ─── */
[dir="rtl"] .text-start { text-align: right; }
[dir="rtl"] .text-end   { text-align: left; }