:root {
  /* Amazon Core Brand Colors */
  --color-primary: #FF9900;
  --color-primary-hover: #E88B00;
  --color-primary-light: rgba(255, 153, 0, 0.12);
  --color-cta: #FFD814;
  --color-cta-hover: #F7CA00;
  --color-cta-border: #FCD200;

  /* Amazon Header & Sidebar Nav */
  --color-header-bg: #131921;
  --color-sidebar-bg: #232F3E;
  --color-sidebar-active: #37475A;

  /* Light canvas & cards */
  --color-bg: #EAEDED;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F0F2F2;
  --color-text: #0F1111;
  --color-text-primary: #0F1111;
  --color-text-secondary: #565959;
  --color-text-muted: #565959;
  --color-border: #D5D9D9;

  /* Links & status */
  --color-link: #007185;
  --color-link-hover: #C7511F;
  --color-success: #067D62;
  --color-warning: #B12704;
  --color-danger: #BA0933;
  --color-accent: #008296;

  /* Amazon-style suble shadows */
  --font-family: 'Inter', sans-serif;
  --radius-card: 8px;
  --radius-button: 8px;
  --radius-pill: 20px;
  --shadow-soft: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 4px 8px 0 rgba(0, 0, 0, 0.15);
  --transition-smooth: all 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Spacing (8px System) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-9: 120px;

  /* Typography */
  --font-heading: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 48px;
  --text-4xl: 64px;

  /* Layout */
  --container-width: 1200px;
  --navbar-height: 80px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.6s ease;
}

.dark,
body.dark {
  --color-bg: #0F172A;
  --color-surface: #1E293B;
  --color-surface-muted: #111827;
  --color-text: #F8FAFC;
  --color-text-primary: #F8FAFC;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94A3B8;
  --color-border: #334155;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  transition:
    background var(--transition-normal),
    color var(--transition-normal);
}

.no-transitions,
.no-transitions * {
  transition: none !important;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
}