/* ─── Design Tokens — Shopify Polaris ──────────────────────── */
:root {
  /* Brand */
  --color-accent:        #008060;
  --color-accent-hover:  #006e52;
  --color-accent-light:  rgba(0,128,96,0.08);

  /* Page surfaces */
  --color-bg:            #f1f1f1;
  --color-surface:       #ffffff;
  --color-surface-2:     #f6f6f7;
  --color-surface-hover: #f1f1f1;
  --color-border:        #e1e3e5;
  --color-border-strong: #c9cccf;

  /* Sidebar — light (Shopify style) */
  --color-sidebar-bg:        #ffffff;
  --color-sidebar-border:    #e1e3e5;
  --color-sidebar-text:      #202223;
  --color-sidebar-muted:     #6d7175;
  --color-sidebar-hover-bg:  #f1f1f1;
  --color-sidebar-active-bg: #e8e8e8;
  --color-sidebar-active-text:#202223;

  /* Text */
  --color-text:           #202223;
  --color-text-secondary: #6d7175;
  --color-muted:          #8c9196;

  /* Login page */
  --color-login-bg:       #0d0d0d;

  /* Status */
  --color-success: #008060;
  --color-warn:    #b98900;
  --color-danger:  #d72c0d;
  --color-info:    #005bd3;
  --color-purple:  #6a21f5;

  /* Plan badge colors */
  --color-plan-free:       #6d7175;
  --color-plan-starter:    #005bd3;
  --color-plan-pro:        #6a21f5;
  --color-plan-enterprise: #b98900;
  --color-plan-exempt:     #008060;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --font-size-xs:   0.6875rem; /* 11px */
  --font-size-sm:   0.75rem;   /* 12px */
  --font-size-base: 0.875rem;  /* 14px */
  --font-size-md:   1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */

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

  --line-height-tight:   1.2;
  --line-height-base:    1.5;
  --line-height-relaxed: 1.75;

  /* Spacing (4px grid) */
  --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;

  /* Border radius */
  --radius-sm:  0.375rem;  /* 6px  */
  --radius-md:  0.5rem;    /* 8px  */
  --radius-lg:  0.75rem;   /* 12px */
  --radius-xl:  0.875rem;  /* 14px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 0 rgba(0,0,0,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;

  /* Layout */
  --sidebar-width:     240px;
  --sidebar-width-sm:  200px;
  --content-max-width: 1400px;
  --modal-max-width:   540px;
  --modal-max-width-lg:860px;

  /* Z-index */
  --z-sidebar: 100;
  --z-overlay: 200;
  --z-modal:   300;
}