/* ════════════════════════════════════════════════════════════════
   DESIGN TOKENS — You Name It
   Single source of truth for all design decisions.
   Both storefront and admin consume these tokens.
   ════════════════════════════════════════════════════════════════ */

/* Smooth theme transition — applied only when toggling, not on initial load */
.theme-transition,
.theme-transition *,
.theme-transition *::before,
.theme-transition *::after {
  transition: background-color 0.3s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease !important;
}

:root {
  /* ── Color: Surface ── */
  --color-bg: #f7f3ed;
  --color-bg-elevated: #fdfbf7;
  --color-bg-secondary: #faf7f2;
  --color-bg-hover: #f0ebe3;
  --color-surface: #ffffff;
  --color-surface-soft: #faf6ef;
  --color-surface-hover: #f3efe8;
  --color-surface-active: #ece7de;

  /* ── Color: Border ── */
  --color-border: rgba(61, 41, 20, 0.12);
  --color-border-soft: rgba(61, 41, 20, 0.06);
  --color-border-strong: rgba(61, 41, 20, 0.22);
  --color-border-light: rgba(61, 41, 20, 0.07);

  /* ── Color: Text ── */
  --color-text: #2c1810;
  --color-text-muted: #6b5346;
  --color-muted: #6b5346;
  --color-text-light: #9a8478;
  --color-text-inverse: #ffffff;

  /* ── Color: Brand ── */
  --color-primary: #8b6914;
  --color-primary-hover: #a07a1a;
  --color-primary-bg: rgba(139, 105, 20, 0.08);
  --color-primary-soft: rgba(139, 105, 20, 0.12);
  --color-accent: #8b6914;
  --color-accent-dark: #6b5010;
  --color-accent-soft: rgba(139, 105, 20, 0.12);
  --color-accent-hover: #a07a1a;
  --color-accent-light: rgba(139, 105, 20, 0.06);
  --color-gold: #c9a96e;
  --color-gold-soft: rgba(201, 169, 110, 0.15);
  --color-chocolate: #4a2f1f;
  --color-chocolate-dark: #6b4322;
  --color-chocolate-light: #5e3c2a;
  --color-warm-brown: #6d4c3d;
  --color-cream: #f5efe6;
  --color-cream-dark: #ebe3d6;

  /* ── Color: Semantic ── */
  --color-success: #3d6b4a;
  --color-success-soft: rgba(61, 107, 74, 0.1);
  --color-success-light: #e8f5e9;
  --color-success-hover: #346040;
  --color-warning: #b8860b;
  --color-warning-soft: rgba(184, 134, 11, 0.1);
  --color-warning-light: #fff3cd;
  --color-warning-dark: #856404;
  --color-warning-hover: #a0770a;
  --color-danger: #a94442;
  --color-danger-soft: rgba(169, 68, 66, 0.1);
  --color-danger-light: #ffebee;
  --color-danger-hover: #943b39;
  --color-info: #5c7a8a;
  --color-info-soft: rgba(92, 122, 138, 0.1);
  --color-info-light: #e3f2fd;
  --color-info-dark: #283593;
  --color-info-hover: #4d6a79;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(44, 24, 16, 0.04);
  --shadow-sm: 0 1px 3px rgba(44, 24, 16, 0.06), 0 1px 2px rgba(44, 24, 16, 0.04);
  --shadow-md: 0 4px 12px rgba(44, 24, 16, 0.08), 0 2px 4px rgba(44, 24, 16, 0.04);
  --shadow-lg: 0 8px 24px rgba(44, 24, 16, 0.1), 0 4px 8px rgba(44, 24, 16, 0.06);
  --shadow-xl: 0 20px 50px rgba(44, 24, 16, 0.12), 0 8px 16px rgba(44, 24, 16, 0.06);
  --shadow-2xl: 0 32px 64px rgba(44, 24, 16, 0.16), 0 12px 24px rgba(44, 24, 16, 0.08);
  --shadow-glow: 0 0 0 1px rgba(139, 105, 20, 0.15);
  --shadow-glow-strong: 0 0 0 2px rgba(139, 105, 20, 0.25);
  --shadow-inner: inset 0 1px 3px rgba(44, 24, 16, 0.06);
  --shadow-card: 0 1px 3px rgba(44, 24, 16, 0.04), 0 4px 12px rgba(44, 24, 16, 0.06);
  --shadow-card-hover: 0 4px 16px rgba(44, 24, 16, 0.08), 0 8px 24px rgba(44, 24, 16, 0.06);
  --shadow-elevated: 0 8px 32px rgba(44, 24, 16, 0.1), 0 2px 8px rgba(44, 24, 16, 0.04);
  --shadow-dropdown: 0 12px 36px rgba(44, 24, 16, 0.12), 0 4px 12px rgba(44, 24, 16, 0.06);

  /* ── Border radius ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── Spacing scale (4px base) ── */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Typography scale ── */
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);

  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ── Fonts ── */
  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-sans: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-arabic: "Noto Sans Arabic", sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Consolas", monospace;

  /* ── Layout ── */
  --sidebar-width: 268px;
  --sidebar-collapsed-width: 72px;
  --topbar-height: 64px;
  --bottom-nav-height: 64px;
  --content-max-width: 1440px;
  --store-max-width: 1280px;
  --header-height: 72px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --duration-instant: 0.075s;
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.35s;
  --duration-slower: 0.5s;

  /* ── Z-index system ── */
  --z-below: -1;
  --z-base: 0;
  --z-dropdown: 40;
  --z-sticky: 45;
  --z-topbar: 50;
  --z-overlay: 90;
  --z-sidebar: 100;
  --z-header: 150;
  --z-drawer: 180;
  --z-drawer-overlay: 179;
  --z-modal: 200;
  --z-modal-backdrop: 199;
  --z-popover: 250;
  --z-toast: 300;
  --z-auth-gate: 500;
  --z-special-order: 600;
  --z-offline-banner: 900;
  --z-inspector: 1000;

  /* ── Sidebar group nav ── */
  --nav-group-padding: 0.35rem;
  --nav-item-radius: var(--radius-md);
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --color-bg: #1a1410;
  --color-bg-elevated: #231d18;
  --color-bg-secondary: #1f1914;
  --color-bg-hover: #2e241c;
  --color-surface: #2c241e;
  --color-surface-soft: #231d18;
  --color-surface-hover: #342a22;
  --color-surface-active: #3a2e26;

  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-soft: rgba(255, 255, 255, 0.04);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-border-light: rgba(255, 255, 255, 0.04);

  --color-text: #ede0d6;
  --color-text-muted: #a8988c;
  --color-muted: #a8988c;
  --color-text-light: #7a6b60;

  --color-primary: #c9a96e;
  --color-primary-hover: #d4b87a;
  --color-primary-bg: rgba(201, 169, 110, 0.12);
  --color-primary-soft: rgba(201, 169, 110, 0.15);
  --color-accent: #c9a96e;
  --color-accent-dark: #a08540;
  --color-accent-soft: rgba(201, 169, 110, 0.15);
  --color-accent-hover: #d4b87a;
  --color-accent-light: rgba(201, 169, 110, 0.08);
  --color-gold: #d4b87a;
  --color-gold-soft: rgba(212, 184, 122, 0.12);
  --color-chocolate: #8b7460;
  --color-chocolate-dark: #6b5346;

  --color-success-soft: rgba(61, 107, 74, 0.2);
  --color-success-light: rgba(90, 154, 106, 0.15);
  --color-warning-soft: rgba(184, 134, 11, 0.2);
  --color-warning-light: rgba(212, 160, 48, 0.15);
  --color-warning-dark: #d4a030;
  --color-danger-soft: rgba(169, 68, 66, 0.2);
  --color-danger-light: rgba(192, 96, 96, 0.15);
  --color-info-soft: rgba(92, 122, 138, 0.2);
  --color-info-light: rgba(122, 154, 170, 0.15);
  --color-info-dark: #5c7a8a;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.6);
  --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-dropdown: 0 12px 36px rgba(0, 0, 0, 0.35);

  /* Brand surface overrides for dark mode */
  --color-cream: #2c241e;
  --color-cream-dark: #231d18;
  --color-chocolate-light: #5c4a3a;
  --color-warm-brown: #4a3a2e;

  /* Semantic base colors — brighten slightly for dark backgrounds */
  --color-success: #5a9a6a;
  --color-success-hover: #4a8a5a;
  --color-warning: #d4a030;
  --color-warning-hover: #c09020;
  --color-danger: #c06060;
  --color-danger-hover: #a85050;
  --color-info: #7a9aaa;
  --color-info-hover: #6a8a9a;

  /* Glow shadows — softer for dark mode */
  --shadow-glow: 0 0 20px rgba(201, 169, 110, 0.08);
  --shadow-glow-strong: 0 0 40px rgba(201, 169, 110, 0.15);
}

/* ── Storefront aliases (for backward compatibility with --st-* references) ── */
:root {
  --st-bg: var(--color-bg);
  --st-bg2: var(--color-bg-secondary);
  --st-surface: var(--color-surface);
  --st-text: var(--color-text);
  --st-muted: var(--color-text-muted);
  --st-light: var(--color-text-light);
  --st-chocolate: var(--color-chocolate);
  --st-accent: var(--color-accent);
  --st-primary: var(--color-primary);
  --st-border: var(--color-border);
  --st-shadow: var(--shadow-md);
  --st-radius: var(--radius-lg);
  --st-ease: var(--ease-out);

  /* ── Shopify Home aliases ── */
  --sh-bg: var(--color-bg-secondary);
  --sh-surface: var(--color-surface);
  --sh-text: var(--color-text);
  --sh-muted: var(--color-text-muted);
  --sh-accent: var(--color-accent);
  --sh-gold: var(--color-gold);
  --sh-shadow-sm: var(--shadow-sm);
  --sh-shadow: var(--shadow-md);
  --sh-shadow-lg: var(--shadow-xl);
  --sh-radius: var(--radius-md);
  --sh-radius-lg: var(--radius-xl);
  --sh-ease: var(--ease-out);
}