/* ==========================================================================
   Shopify Polaris-inspired Design Tokens & CSS Variables
   ========================================================================== */

:root {
  /* Colors - Surfaces & Backgrounds */
  --bg-app: #f6f6f7;
  --bg-surface: #ffffff;
  --bg-surface-secondary: #fafbfb;
  --bg-surface-hover: #f1f2f4;
  --bg-surface-active: #edeeef;
  --bg-surface-selected: #f2f7fe;
  
  /* Colors - Borders */
  --border-subtle: #ebebeb;
  --border-default: #e1e3e5;
  --border-strong: #c9cccf;
  --border-interactive: #2c6ecb;

  /* Colors - Typography */
  --text-primary: #202223;
  --text-secondary: #6d7175;
  --text-subdued: #8c9196;
  --text-disabled: #b5b8ba;
  --text-on-primary: #ffffff;
  --text-interactive: #008060;

  /* Brand Accents - Shopify Emerald Primary */
  --primary: #008060;
  --primary-hover: #006e52;
  --primary-active: #005e46;
  --primary-light: #e4f8f0;
  --primary-border: #bbf0dc;

  /* Interactive Secondary / Links */
  --action-secondary: #2c6ecb;
  --action-secondary-hover: #1f5199;
  --action-secondary-light: #f2f7fe;

  /* Status Colors */
  --status-success-bg: #e4f8f0;
  --status-success-text: #108043;
  --status-success-border: #bbf0dc;

  --status-warning-bg: #fff5ea;
  --status-warning-text: #b98900;
  --status-warning-border: #fed2a4;

  --status-critical-bg: #fed3d1;
  --status-critical-text: #d72c0d;
  --status-critical-border: #fca3a1;

  --status-info-bg: #e0f5f5;
  --status-info-text: #007b82;
  --status-info-border: #b4e8e8;

  --status-neutral-bg: #f1f2f3;
  --status-neutral-text: #454f5b;
  --status-neutral-border: #dfe3e8;

  --status-purple-bg: #f4f0ff;
  --status-purple-text: #6b46c1;
  --status-purple-border: #e2d9f3;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Helvetica, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.8125rem;  /* 13px */
  --font-size-base: 0.875rem; /* 14px */
  --font-size-md: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.375rem;   /* 22px */
  --font-size-2xl: 1.75rem;   /* 28px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.625;

  /* Spacing */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows (Shopify Polaris Depth) */
  --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(63, 63, 68, 0.05);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(63, 63, 68, 0.05);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(63, 63, 68, 0.08);
  --shadow-modal: 0 12px 32px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(63, 63, 68, 0.1);

  /* Layout Dimensions */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 64px;
  --header-height: 56px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-sidebar: 100;
  --z-header: 90;
  --z-dropdown: 200;
  --z-modal-backdrop: 300;
  --z-modal: 310;
  --z-toast: 400;

  /* Theme-aware component colors */
  --header-bg: #1a1a1a;
  --header-surface: #2b2b2b;
  --header-border: #404040;
  --header-text: #ffffff;
  --overlay-bg: rgba(32, 34, 35, 0.55);
  --code-bg: #f1f2f3;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: #17191c;
  --bg-surface: #202327;
  --bg-surface-secondary: #292d32;
  --bg-surface-hover: #30353b;
  --bg-surface-active: #383e45;
  --bg-surface-selected: #263b52;
  --border-subtle: #343a40;
  --border-default: #454c54;
  --border-strong: #606a74;
  --border-interactive: #6ea8fe;
  --text-primary: #f1f3f5;
  --text-secondary: #b7bec7;
  --text-subdued: #8f99a4;
  --text-disabled: #68717b;
  --text-on-primary: #ffffff;
  --text-interactive: #55c9a3;
  --primary: #35b989;
  --primary-hover: #55c99e;
  --primary-active: #24906b;
  --primary-light: #1d4037;
  --primary-border: #286b56;
  --action-secondary: #78aefb;
  --action-secondary-hover: #a6c8ff;
  --action-secondary-light: #263b52;
  --status-success-bg: #18382d;
  --status-success-text: #70d6ae;
  --status-success-border: #286b56;
  --status-warning-bg: #49391e;
  --status-warning-text: #f4c96b;
  --status-warning-border: #84652a;
  --status-critical-bg: #4b2729;
  --status-critical-text: #ff9b98;
  --status-critical-border: #8c4548;
  --status-info-bg: #193b43;
  --status-info-text: #76d4df;
  --status-info-border: #2d727b;
  --status-neutral-bg: #343a40;
  --status-neutral-text: #c8d0d8;
  --status-neutral-border: #515b65;
  --status-purple-bg: #332d48;
  --status-purple-text: #c4b1ff;
  --status-purple-border: #61558a;
  --header-bg: #101214;
  --header-surface: #25292e;
  --header-border: #454c54;
  --header-text: #f1f3f5;
  --overlay-bg: rgba(0, 0, 0, 0.72);
  --code-bg: #2b3036;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --shadow-modal: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}