/**
 * Mr. Gadget Design System — Design Tokens
 * ITCSS Layer 1: Settings
 *
 * 3-tier semantic token structure:
 *   Primitive → Semantic → Component
 */

:root {
   /* ====================================================================
       Primitive Tokens — Color Palette (Calm / Professional)
       ==================================================================== */
   --mg-blue-50: #f1f5f9;
   --mg-blue-400: #64748b;
   --mg-blue-500: #475569;
   --mg-blue-600: #334155;
   --mg-blue-700: #1e293b;

   --mg-green-50: #ecfdf5;
   --mg-green-400: #34d399;
   --mg-green-500: #059669;
   --mg-green-600: #047857;

   --mg-yellow-50: #fffbeb;
   --mg-yellow-400: #f59e0b;
   --mg-yellow-500: #b45309;

   --mg-red-50: #fef2f2;
   --mg-red-400: #f87171;
   --mg-red-500: #b91c1c;
   --mg-red-600: #991b1b;


   --mg-cyan-50: #f0f9ff;
   --mg-cyan-500: #0284c7;

   --mg-gray-50: #f8fafc;
   --mg-gray-100: #f1f5f9;
   --mg-gray-200: #e2e8f0;
   --mg-gray-300: #cbd5e1;
   --mg-gray-400: #94a3b8;
   --mg-gray-500: #64748b;
   --mg-gray-600: #475569;
   --mg-gray-700: #334155;
   --mg-gray-800: #1e293b;
   --mg-gray-900: #0f172a;

   --mg-white: #ffffff;

   /* ====================================================================
       Semantic Tokens — Intentions
       ==================================================================== */

   /* Brand */
   --mg-color-primary: var(--mg-blue-500);
   --mg-color-primary-hover: var(--mg-blue-600);
   --mg-color-primary-light: var(--mg-blue-50);

   /* Status */
   --mg-color-success: var(--mg-green-500);
   --mg-color-success-light: var(--mg-green-50);
   --mg-color-warning: var(--mg-yellow-500);
   --mg-color-warning-light: var(--mg-yellow-50);
   --mg-color-error: var(--mg-red-500);
   --mg-color-error-light: var(--mg-red-50);
   --mg-color-info: var(--mg-cyan-500);
   --mg-color-info-light: var(--mg-cyan-50);

   /* Extended status — dark/accent/border variants */
   --mg-color-warning-border: var(--mg-yellow-400);
   --mg-color-warning-text: #92400e;

   /* Accent — indigo / purple */
   --mg-color-indigo: #6366f1;
   --mg-color-indigo-dark: #4f46e5;
   --mg-color-indigo-darker: #3730a3;
   --mg-color-purple: #8b5cf6;
   --mg-color-purple-dark: #7c3aed;

   /* Sky / bright blue */
   --mg-color-sky: #0ea5e9;

   /* Pink */
   --mg-color-pink: #ec4899;

   /* Service-branded semantic aliases — use these in views */
   --mg-color-google-blue: var(--mg-material-blue, #4285f4);
   --mg-color-google-red: #ea4335;
   --mg-color-google-green: #34a853;
   --mg-color-google-yellow: #fbbc05;
   --mg-color-bing-teal: var(--mg-wp-teal, #008373);
   --mg-color-amazon-orange: #ff9900;
   --mg-color-clarity-indigo: var(--mg-color-indigo, #6366f1);
   --mg-color-adsense-red: var(--mg-color-google-red, #ea4335);
   --mg-color-ga4-amber: var(--mg-yellow-400, #f59e0b);

   /* Legacy warning accent */
   --mg-legacy-warning-accent: #e67e00;

   /* KPI trend indicators */
   --mg-kpi-up: var(--mg-green-400);
   --mg-kpi-down: var(--mg-red-400);
   --mg-kpi-neutral: var(--mg-gray-400);

   /* Surfaces */
   --mg-color-bg: var(--mg-gray-100);
   --mg-color-bg-alt: var(--mg-gray-50);
   --mg-color-surface: var(--mg-white);
   --mg-color-border: var(--mg-gray-300);
   --mg-color-border-light: var(--mg-gray-200);

   /* Text */
   --mg-color-text: var(--mg-gray-900);
   --mg-color-text-secondary: var(--mg-gray-600);
   --mg-color-text-light: var(--mg-gray-500);
   --mg-color-text-muted: var(--mg-gray-400);

   /* ====================================================================
       Extended Palette — Legacy / Bootstrap / Material aliases
       Used across admin views. Maps old hex values to semantic tokens.
       ==================================================================== */

   /* Grays (Bootstrap/WP-admin) */
   --mg-legacy-gray-50: #f8f9fa;
   --mg-legacy-gray-100: #f0f0f0;
   --mg-legacy-gray-150: #e9ecef;
   --mg-legacy-gray-200: #e0e0e0;
   --mg-legacy-gray-250: #dee2e6;
   --mg-legacy-gray-300: #e1e1e1;
   --mg-legacy-gray-350: #e5e5e5;
   --mg-legacy-gray-400: #d4d4d4;
   --mg-legacy-gray-500: #6c757d;
   --mg-legacy-gray-600: #495057;
   --mg-legacy-gray-900: #212529;
   --mg-legacy-bg-light: #f9f9f9;
   --mg-legacy-bg-alt: #f5f5f5;

   /* Status (Bootstrap/Material) */
   --mg-legacy-success: #28a745;
   --mg-legacy-success-dark: #166534;
   --mg-legacy-success-google: #34a853;
   --mg-legacy-success-alt: #3f8939;
   --mg-legacy-success-bright: #4caf50;
   --mg-legacy-success-bg: #d4edda;
   --mg-legacy-success-bg-light: #d1fae5;
   --mg-legacy-warning-amber: #ffc107;
   --mg-legacy-warning-orange: #ff9900;
   --mg-legacy-warning-bg: #fff3cd;
   --mg-legacy-warning-text: #92400e;
   --mg-legacy-error-red: #F44336;
   --mg-legacy-error-bg: #f8d7da;
   --mg-legacy-error-text: #721c24;

   /* Brand (Bootstrap/Google) */
   --mg-legacy-primary: #0d6efd;
   --mg-legacy-info-light: #e7f3ff;
   --mg-legacy-blue-bing: #00a4ef;
   --mg-legacy-indigo-light: #7b83eb;

   /* WordPress Admin palette */
   --mg-wp-blue: #2271b1;
   --mg-wp-blue-light: #f0f6fc;
   --mg-wp-gray-dark: #1d2327;
   --mg-wp-gray-border: #c3c4c7;
   --mg-wp-gray-alt: #f6f7f7;
   --mg-wp-gray-light: #f0f0f1;
   --mg-wp-gray-border-dark: #dcdcde;
   --mg-wp-gray-border-light: #ccd0d4;
   --mg-wp-dark: #1e1e1e;
   --mg-wp-link: #0073aa;
   --mg-wp-red: #d63638;
   --mg-wp-green: #00a32a;
   --mg-wp-gold: #dba617;
   --mg-wp-teal: #008373;

   /* Google Material / Gradient */
   --mg-material-purple: #667eea;
   --mg-material-purple-dark: #764ba2;
   --mg-material-blue: #4285f4;
   --mg-material-blue-dark: #1976d2;
   --mg-material-blue-alt: #007bff;
   --mg-material-blue-ms: #0078d4;
   --mg-material-blue-bg: #e3f2fd;
   --mg-material-green-dark: #155724;
   --mg-material-green-deep: #065f46;
   --mg-material-amber-dark: #856404;

   /* Batch 3 — remaining high-frequency values */
   --mg-slate-200: #e2e8f0;
   --mg-slate-bg: #e2e4e7;
   --mg-material-blue-500: #2196f3;
   --mg-material-sky-700: #0369a1;
   --mg-material-green-bg: #e8f5e9;
   --mg-legacy-error-hover: #c82333;
   --mg-legacy-error-dark2: #bf0000;
   --mg-wp-gray-text: #646970;
   --mg-wp-red-bg: #fcf0f1;
   --mg-legacy-warning-google: #fbbc05;

   /* ====================================================================
       Spacing Scale (rem — respects user font-size preferences)
       ==================================================================== */
   --mg-space-xs: 0.25rem;
   /* 4px  */
   --mg-space-sm: 0.5rem;
   /* 8px  */
   --mg-space-md: 1rem;
   /* 16px */
   --mg-space-lg: 1.5rem;
   /* 24px */
   --mg-space-xl: 2rem;
   /* 32px */
   --mg-space-2xl: 3rem;
   /* 48px */

   /* ====================================================================
       Border Radius
       ==================================================================== */
   --mg-radius-sm: 0.25rem;
   /* 4px  */
   --mg-radius-md: 0.5rem;
   /* 8px  */
   --mg-radius-lg: 0.75rem;
   /* 12px */
   --mg-radius-full: 9999px;

   /* ====================================================================
       Shadows
       ==================================================================== */
   --mg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --mg-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --mg-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

   /* ====================================================================
       Transitions
       ==================================================================== */
   --mg-transition-fast: 150ms ease;
   --mg-transition: 200ms ease;
   --mg-transition-slow: 300ms ease;

   /* ====================================================================
       Typography
       ==================================================================== */
   --mg-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   --mg-font-mono: "SF Mono", Monaco, Consolas, "Courier New", monospace;

   --mg-text-xs: 0.6875rem;
   /* 11px */
   --mg-text-sm: 0.8125rem;
   /* 13px */
   --mg-text-base: 0.875rem;
   /* 14px */
   --mg-text-lg: 1rem;
   /* 16px */
   --mg-text-xl: 1.125rem;
   /* 18px */
   --mg-text-2xl: 1.5rem;
   /* 24px */
   --mg-text-3xl: 1.75rem;
   /* 28px */
}