/**
 * 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: #202223;
  --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;

  /* Shopify Polaris Brand Accents */
  --p-color-brand-shopify: #008060;
  --p-color-brand-shopify-hover: #007053;
  --p-color-brand-shopify-dark: #004c3f;
  --p-color-brand-shopify-tint: #e3f1df;

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

  /* 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-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);

  /* Typography */
  --p-font-family: -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);
}