/* EUshop — design tokeny (premium e-commerce) */

:root,
[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-subtle: #eef0f6;
  --bg-hero: linear-gradient(135deg, #f8f9fd 0%, #eef2ff 45%, #f6f7fb 100%);
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-hover: #f8fafc;
  --surface-glass: rgba(255, 255, 255, 0.82);

  --text: #0c1222;
  --text-muted: #5c6578;
  --text-subtle: #8b95a8;
  --text-inverse: #ffffff;

  --border: #e4e8f0;
  --border-strong: #cdd3df;

  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-subtle: #eef4ff;
  --color-primary-glow: color-mix(in srgb, var(--color-primary) 22%, transparent);
  --color-accent: #1e40af;
  --color-on-primary: #ffffff;

  --color-success: #059669;
  --color-success-bg: #ecfdf5;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-bg: #fef2f2;
  --color-warning: #d97706;
  --color-warning-bg: #fffbeb;

  --link: var(--color-primary);
  --link-hover: var(--color-primary-hover);

  --heading-color: var(--text);
  --input-bg: var(--surface);
  --input-text: var(--text);
  --input-border: var(--border-strong);

  --sidebar-bg: linear-gradient(180deg, #0f1419 0%, #151c28 100%);
  --sidebar-solid: #121820;
  --sidebar-text: #f1f5f9;
  --sidebar-muted: #94a3b8;
  --sidebar-hover: rgba(255, 255, 255, 0.07);
  --sidebar-active: rgba(255, 255, 255, 0.11);

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "Inter", var(--font-sans);
  --font-mono: ui-monospace, "Cascadia Code", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2.125rem;
  --text-4xl: 2.75rem;

  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(12, 18, 34, 0.04);
  --shadow-sm: 0 2px 8px rgba(12, 18, 34, 0.06);
  --shadow-md: 0 8px 24px rgba(12, 18, 34, 0.08);
  --shadow-lg: 0 16px 48px rgba(12, 18, 34, 0.12);
  --shadow-card: 0 1px 2px rgba(12, 18, 34, 0.04), 0 8px 24px rgba(12, 18, 34, 0.06);
  --shadow-btn: 0 2px 8px var(--color-primary-glow);

  --focus-ring: 0 0 0 3px var(--color-primary-glow);

  --input-height: 3.125rem;
  --input-height-sm: 2.75rem;
  --input-padding-y: 0.875rem;
  --input-padding-x: 1.1875rem;
  --input-font-size: 1rem;
  --input-line-height: 1.5;
  --container-max: 76rem;
  --sidebar-width: 16.5rem;
  --header-height: 4.25rem;

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg: #080c14;
  --bg-subtle: #0f1520;
  --bg-hero: linear-gradient(135deg, #0a0f18 0%, #111827 50%, #080c14 100%);
  --surface: #141b28;
  --surface-raised: #1a2332;
  --surface-hover: #1f2937;
  --surface-glass: rgba(20, 27, 40, 0.88);

  --text: #f3f4f6;
  --text-muted: #9ca3af;
  --text-subtle: #6b7280;
  --text-inverse: #0c1222;

  --border: #2a3444;
  --border-strong: #3d4a5c;

  --color-primary-hover: color-mix(in srgb, var(--color-primary) 88%, white);
  --color-primary-subtle: color-mix(in srgb, var(--color-primary) 16%, transparent);
  --color-primary-glow: color-mix(in srgb, var(--color-primary) 28%, transparent);

  --heading-color: var(--text);
  --input-bg: #1e2838;
  --input-text: var(--text);
  --input-border: #3d4f66;

  --color-success-bg: rgba(5, 150, 105, 0.12);
  --color-danger-bg: rgba(220, 38, 38, 0.12);
  --color-warning-bg: rgba(217, 119, 6, 0.12);

  --sidebar-bg: linear-gradient(180deg, #050810 0%, #0a1018 100%);
  --sidebar-solid: #080c14;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.2);
}