/**
 * Shopify Polaris Design System - CSS Custom Properties & Design Tokens
 * Replicating Shopify Admin 2024/2025 Aesthetics & Tokens
 */

:root {
  /* Surface & Background */
  --p-color-bg-app: #f1f2f4;
  --p-color-bg-surface: #ffffff;
  --p-color-bg-surface-hover: #f7f7f8;
  --p-color-bg-surface-active: #ebebeb;
  --p-color-bg-subdued: #f6f6f7;
  --p-color-bg-surface-secondary: #fafbfb;
  --p-color-bg-inverse: #1a1a1a;
  --p-color-bg-topbar: #111213;
  --p-color-bg-topbar-surface: #222325;
  --p-color-bg-topbar-hover: #2b2d30;

  /* Typography Colors */
  --p-color-text: #3f4345;
  --p-color-text-subdued: #6d7175;
  --p-color-text-disabled: #8c9196;
  --p-color-text-inverse: #ffffff;
  --p-color-text-on-primary: #ffffff;
  --p-color-text-link: #005bd3;

  /* Interactive & Status Colors */
  --p-color-interactive-primary: #303030;
  --p-color-interactive-hover: #1a1a1a;
  --p-color-interactive-focus: #195ae8;

  /* ==========================================================================
     PRIMARY ACTION BUTTON TOKENS (Single Source of Truth for Rebranding)
     To rebrand primary action buttons across the entire app, modify only these tokens:
     ========================================================================== */
  --p-btn-primary-bg: #303030;
  --p-btn-primary-border: #3f4345;
  --p-btn-primary-text: #ffffff;
  --p-btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.12);
  --p-btn-primary-hover-bg: #1a1a1a;
  --p-btn-primary-hover-border: #000000;
  --p-btn-primary-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.18);
  --p-btn-primary-active-bg: #000000;

  /* Polaris Status Palette */
  --p-color-success-bg: #d2f0db;
  --p-color-success-text: #108043;
  --p-color-success-border: #aee9d1;
  --p-color-success-solid: #008060;

  --p-color-info-bg: #dcf2fe;
  --p-color-info-text: #006fbb;
  --p-color-info-border: #b4e1fa;
  --p-color-info-solid: #2c6ecb;

  --p-color-warning-bg: #fff0c2;
  --p-color-warning-text: #704700;
  --p-color-warning-border: #ffe182;
  --p-color-warning-solid: #d9822b;

  --p-color-danger-bg: #fed3d1;
  --p-color-danger-text: #d82c0d;
  --p-color-danger-border: #fca399;
  --p-color-danger-solid: #d72c0d;

  --p-color-purple-bg: #f3e8ff;
  --p-color-purple-text: #6b21a8;
  --p-color-purple-border: #e9d5ff;
  --p-color-purple-solid: #8c43ff;

  /* Borders & Dividers */
  --p-border-subtle: #e1e3e5;
  --p-border-default: #c9cccf;
  --p-border-hover: #8c9196;
  --p-border-dark: #8c9196;
  --p-border-radius-xs: 4px;
  --p-border-radius-sm: 6px;
  --p-border-radius-md: 8px;
  --p-border-radius-lg: 12px;
  --p-border-radius-xl: 16px;
  --p-border-radius-full: 9999px;

  /* Shadows (Polaris Elevation) */
  --p-shadow-bevel: 0 1px 0 rgba(0, 0, 0, 0.05);
  --p-shadow-100: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --p-shadow-200: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --p-shadow-300: 0 4px 12px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
  --p-shadow-400: 0 12px 28px -4px rgba(0, 0, 0, 0.15), 0 4px 8px -2px rgba(0, 0, 0, 0.05);
  --p-shadow-topbar: 0 2px 4px rgba(0, 0, 0, 0.2);

  /* Form Control & Input Tokens (Shopify Polaris Canonical Focus Rings & Sizing) */
  --p-control-height: 32px;
  --p-control-height-sm: 28px;
  --p-border-radius-input: 0.8rem;
  /* Shopify Polaris default radius (0.5rem = 8px) */
  --p-color-input-border-active: var(--p-color-interactive-focus);
  --s-composed-input-field-box-shadow-width-p1s0: 0.06rem;
  --p-shadow-input: 0 1px 2px 0 rgba(0, 0, 0, 0.05), inset 0 0 0 1px var(--p-border-default);
  --p-shadow-input-hover: 0 1px 2px 0 rgba(0, 0, 0, 0.05), inset 0 0 0 1px var(--p-border-hover);
  --p-shadow-input-focus: inset 0 0 0 var(--s-composed-input-field-box-shadow-width-p1s0, 0.06rem) var(--p-color-interactive-focus), 0 0 0 3px color-mix(in srgb, var(--p-color-interactive-focus) 2%, transparent);
  --s-input-field-shadow-focus-p1s0: inset 0 0 0 var(--s-composed-input-field-box-shadow-width-p1s0, 0.06rem) var(--p-color-interactive-focus), 0 0 0 3px color-mix(in srgb, var(--p-color-interactive-focus) 2%, transparent);

  /* Typography */
  --p-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --p-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --p-font-size-xs: 11px;
  --p-font-size-sm: 13px;
  --p-font-size-md: 14px;
  --p-font-size-lg: 16px;
  --p-font-size-xl: 20px;
  --p-font-size-2xl: 24px;
  --p-font-size-3xl: 28px;

  /* Spacing */
  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 20px;
  --p-space-6: 24px;
  --p-space-8: 32px;
  --p-space-10: 40px;

  /* Layout Dimensions */
  --p-topbar-height: 56px;
  --p-tabsbar-height: 44px;
  --p-sidebar-width: 250px;
  --p-content-max-width: 1360px;

  /* Transitions */
  --p-transition-fast: 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --p-transition-default: 220ms cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Polaris Skeleton Loading Tokens */
  --p-color-skeleton: #e5e7eb;
  --p-color-skeleton-subdued: #f3f4f6;
  --p-color-skeleton-surface: #f9fafb;
}

/* ==========================================================================
   Shopify Polaris Dark Mode Token Set (Activates on [data-color-scheme="dark"])
   Zero Impact on Light Mode: Light theme remains 100% untouched and pure.
   ========================================================================== */
[data-color-scheme="dark"] {
  /* Surface & Background */
  --p-color-bg-app: #0b0e14;
  --p-color-bg-surface: #131722;
  --p-color-bg-surface-hover: #19202f;
  --p-color-bg-surface-active: #212a3d;
  --p-color-bg-subdued: #0f131c;
  --p-color-bg-surface-secondary: #161c28;
  --p-color-bg-inverse: #ffffff;
  --p-color-bg-topbar: #080a0f;
  --p-color-bg-topbar-surface: #131722;
  --p-color-bg-topbar-hover: #1c2230;

  /* Typography Colors */
  --p-color-text: #f1f5f9;
  --p-color-text-subdued: #94a3b8;
  --p-color-text-disabled: #475569;
  --p-color-text-inverse: #0b0e14;
  --p-color-text-on-primary: #ffffff;
  --p-color-text-link: #38bdf8;

  /* Interactive & Status Colors */
  --p-color-interactive-primary: #38bdf8;
  --p-color-interactive-hover: #7dd3fc;
  --p-color-interactive-focus: #38bdf8;

  /* Primary Action Button Tokens in Dark Mode (Luminous Blue Bordered Obsidian) */
  --p-btn-primary-bg: #131722;
  --p-btn-primary-border: #3b82f6;
  --p-btn-primary-text: #ffffff;
  --p-btn-primary-shadow: 0 0 10px rgba(59, 130, 246, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --p-btn-primary-hover-bg: #182030;
  --p-btn-primary-hover-border: #60a5fa;
  --p-btn-primary-hover-shadow: 0 0 16px rgba(59, 130, 246, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --p-btn-primary-active-bg: #141b29;

  /* Polaris Status Palette in Dark Mode (Luminous translucent fills) */
  --p-color-success-bg: rgba(16, 185, 129, 0.14);
  --p-color-success-text: #34d399;
  --p-color-success-border: rgba(16, 185, 129, 0.30);
  --p-color-success-solid: #10b981;

  --p-color-info-bg: rgba(14, 165, 233, 0.14);
  --p-color-info-text: #38bdf8;
  --p-color-info-border: rgba(14, 165, 233, 0.30);
  --p-color-info-solid: #0ea5e9;

  --p-color-warning-bg: rgba(245, 158, 11, 0.14);
  --p-color-warning-text: #fbbf24;
  --p-color-warning-border: rgba(245, 158, 11, 0.30);
  --p-color-warning-solid: #f59e0b;

  --p-color-danger-bg: rgba(239, 68, 68, 0.14);
  --p-color-danger-text: #f87171;
  --p-color-danger-border: rgba(239, 68, 68, 0.30);
  --p-color-danger-solid: #ef4444;

  --p-color-purple-bg: rgba(168, 85, 247, 0.14);
  --p-color-purple-text: #c084fc;
  --p-color-purple-border: rgba(168, 85, 247, 0.30);
  --p-color-purple-solid: #a855f7;

  /* Borders & Dividers in Dark Mode */
  --p-border-subtle: rgba(255, 255, 255, 0.08);
  --p-border-default: rgba(255, 255, 255, 0.14);
  --p-border-hover: rgba(255, 255, 255, 0.25);
  --p-border-dark: rgba(255, 255, 255, 0.25);

  /* Shadows in Dark Mode (Deeper contrast with subtle border rim) */
  --p-shadow-bevel: 0 1px 0 rgba(255, 255, 255, 0.05);
  --p-shadow-100: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --p-shadow-200: 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --p-shadow-300: 0 12px 28px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.10);
  --p-shadow-400: 0 20px 45px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.12);
  --p-shadow-topbar: 0 2px 8px rgba(0, 0, 0, 0.6);

  /* Form Control & Input Tokens in Dark Mode */
  --p-control-height: 32px;
  --p-control-height-sm: 28px;
  --p-border-radius-input: 0.8rem;
  --p-color-input-border-active: var(--p-color-interactive-focus);
  --s-composed-input-field-box-shadow-width-p1s0: 0.06rem;
  --p-shadow-input: 0 1px 3px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--p-border-default);
  --p-shadow-input-hover: 0 1px 3px 0 rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--p-border-hover);
  --p-shadow-input-focus: inset 0 0 0 var(--s-composed-input-field-box-shadow-width-p1s0, 0.06rem) var(--p-color-interactive-focus), 0 0 0 3px color-mix(in srgb, var(--p-color-interactive-focus) 4%, transparent);
  --s-input-field-shadow-focus-p1s0: inset 0 0 0 var(--s-composed-input-field-box-shadow-width-p1s0, 0.06rem) var(--p-color-interactive-focus), 0 0 0 3px color-mix(in srgb, var(--p-color-interactive-focus) 4%, transparent);

  /* Polaris Skeleton Loading Tokens in Dark Mode */
  --p-color-skeleton: rgba(255, 255, 255, 0.12);
  --p-color-skeleton-subdued: rgba(255, 255, 255, 0.07);
  --p-color-skeleton-surface: rgba(255, 255, 255, 0.04);
}