/* ============================================
   Brand Guardian — Modern Design System
   ============================================ */

:root {
  /* ---- Brand & Primary ---- */
  --color-primary:        #4f46e5; /* Indigo 600 */
  --color-primary-dark:   #4338ca; /* Indigo 700 */
  --color-primary-light:  #eef2ff; /* Indigo 50 */
  --color-primary-glow:   rgba(79, 70, 229, 0.1);

  /* ---- Accent ---- */
  --color-accent:         #f97316; /* Orange 500 */
  --color-accent-light:   #fff7ed; /* Orange 50 */

  /* ---- Neutrals ---- */
  --color-bg:             #f8fafc; /* Slate 50 */
  --color-bg-card:        #ffffff;
  --color-bg-hover:       #f1f5f9; /* Slate 100 */
  --color-text:           #0f172a; /* Slate 900 */
  --color-text-secondary: #475569; /* Slate 600 */
  --color-text-muted:     #94a3b8; /* Slate 400 */
  --color-text-placeholder:#cbd5e1; /* Slate 300 */
  --color-border:         #e2e8f0; /* Slate 200 */
  --color-border-light:   #f1f5f9; /* Slate 100 */
  --color-border-focus:   #818cf8; /* Indigo 400 */

  /* ---- Semantic ---- */
  --color-success:        #10b981; /* Emerald 500 */
  --color-success-light:  #ecfdf5; /* Emerald 50 */
  --color-success-bg:     rgba(16, 185, 129, 0.06);
  --color-warning:        #f59e0b; /* Amber 500 */
  --color-warning-light:  #fffbeb; /* Amber 50 */
  --color-warning-bg:     rgba(245, 158, 11, 0.06);
  --color-danger:         #ef4444; /* Red 500 */
  --color-danger-light:   #fef2f2; /* Red 50 */
  --color-danger-bg:      rgba(239, 68, 68, 0.06);
  --color-info:           #3b82f6; /* Blue 500 */
  --color-info-light:     #eff6ff; /* Blue 50 */
  --color-info-bg:        rgba(59, 130, 246, 0.06);

  /* ---- Score Spectrum ---- */
  --score-low:            #f43f5e; /* Rose 500 */
  --score-mid:            #fbbf24; /* Amber 400 */
  --score-high:           #10b981; /* Emerald 500 */

  /* ---- Shadows (Soft & Modern) ---- */
  --shadow-xs:            0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:            0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md:            0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:            0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:            0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-inner:         inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-glow:          0 0 0 4px var(--color-primary-glow);

  /* ---- Radius (Generous & Smooth) ---- */
  --radius-xs:            4px;
  --radius-sm:            8px;
  --radius-md:            12px;
  --radius-lg:            16px;
  --radius-xl:            24px;
  --radius-full:          9999px;

  /* ---- Typography ---- */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs:              0.75rem;   /* 12px */
  --text-sm:              0.875rem;  /* 14px */
  --text-base:            1rem;      /* 16px */
  --text-lg:              1.125rem;  /* 18px */
  --text-xl:              1.25rem;   /* 20px */
  --text-2xl:             1.5rem;    /* 24px */
  --text-3xl:             1.875rem;  /* 30px */
  --text-4xl:             2.25rem;   /* 36px */

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

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

  /* ---- Z-index ---- */
  --z-panel:    100;
  --z-modal:    200;
  --z-tooltip:  300;
}