/* branding.css - Complete ag-* design token system from dealer-web */

:root {
  /* Mode/Gray scale (for dark mode backgrounds) */
  --ag-mode-50: 181 183 199;
  --ag-mode-100: 123 125 146;
  --ag-mode-200: 95 97 118;
  --ag-mode-300: 85 87 110;
  --ag-mode-400: 63 65 86;
  --ag-mode-500: 49 51 67;
  --ag-mode-600: 34 35 46;
  --ag-mode-700: 26 27 35;
  --ag-mode-800: 24 24 31;
  --ag-mode-900: 16 18 24;
  --ag-mode-950: 16 18 24;

  /* Gray scale */
  --ag-gray-50: 250 250 250;
  --ag-gray-100: 231 232 234;
  --ag-gray-200: 219 221 223;
  --ag-gray-300: 207 209 213;
  --ag-gray-400: 196 198 202;
  --ag-gray-500: 183 186 190;
  --ag-gray-600: 159 163 169;
  --ag-gray-700: 135 140 148;
  --ag-gray-800: 122 126 133;
  --ag-gray-900: 95 98 103;
  --ag-gray-950: 75 78 82;

  /* Red scale */
  --ag-red-50: 255 245 245;
  --ag-red-100: 254 215 215;
  --ag-red-200: 254 178 178;
  --ag-red-300: 252 129 129;
  --ag-red-400: 245 101 101;
  --ag-red-500: 229 62 62;
  --ag-red-600: 197 48 48;
  --ag-red-700: 155 44 44;
  --ag-red-800: 130 39 39;
  --ag-red-900: 99 23 27;
  --ag-red-950: 80 18 22;

  /* Orange scale */
  --ag-orange-50: 255 250 240;
  --ag-orange-100: 254 235 203;
  --ag-orange-200: 251 211 189;
  --ag-orange-300: 250 208 85;
  --ag-orange-400: 238 152 54;
  --ag-orange-500: 221 104 32;
  --ag-orange-600: 192 82 33;
  --ag-orange-700: 148 44 33;
  --ag-orange-800: 123 52 30;
  --ag-orange-900: 101 40 25;
  --ag-orange-950: 85 33 20;

  /* Yellow scale */
  --ag-yellow-50: 255 255 240;
  --ag-yellow-100: 254 252 191;
  --ag-yellow-200: 250 240 137;
  --ag-yellow-300: 246 224 94;
  --ag-yellow-400: 236 201 75;
  --ag-yellow-500: 214 158 46;
  --ag-yellow-600: 183 121 31;
  --ag-yellow-700: 151 90 22;
  --ag-yellow-800: 116 66 16;
  --ag-yellow-900: 95 55 14;
  --ag-yellow-950: 75 44 10;

  /* Green scale */
  --ag-green-50: 240 255 244;
  --ag-green-100: 198 246 213;
  --ag-green-200: 154 230 180;
  --ag-green-300: 104 211 145;
  --ag-green-400: 72 187 120;
  --ag-green-500: 56 161 105;
  --ag-green-600: 37 133 90;
  --ag-green-700: 39 103 73;
  --ag-green-800: 34 84 61;
  --ag-green-900: 28 69 50;
  --ag-green-950: 22 55 40;

  /* Teal scale */
  --ag-teal-50: 230 255 250;
  --ag-teal-100: 178 245 234;
  --ag-teal-200: 129 230 217;
  --ag-teal-300: 79 209 197;
  --ag-teal-400: 56 178 172;
  --ag-teal-500: 49 151 149;
  --ag-teal-600: 44 122 123;
  --ag-teal-700: 40 94 97;
  --ag-teal-800: 35 78 82;
  --ag-teal-900: 29 64 68;
  --ag-teal-950: 24 52 56;

  /* Blue scale */
  --ag-blue-50: 235 248 255;
  --ag-blue-100: 190 227 248;
  --ag-blue-200: 144 205 244;
  --ag-blue-300: 99 179 237;
  --ag-blue-400: 66 153 225;
  --ag-blue-500: 49 130 206;
  --ag-blue-600: 43 108 176;
  --ag-blue-700: 44 82 130;
  --ag-blue-800: 42 67 101;
  --ag-blue-900: 26 54 93;
  --ag-blue-950: 21 42 72;

  /* Cyan scale */
  --ag-cyan-50: 237 253 253;
  --ag-cyan-100: 202 241 249;
  --ag-cyan-200: 144 220 249;
  --ag-cyan-300: 118 228 247;
  --ag-cyan-400: 11 207 234;
  --ag-cyan-500: 0 181 216;
  --ag-cyan-600: 0 163 196;
  --ag-cyan-700: 9 135 160;
  --ag-cyan-800: 8 111 131;
  --ag-cyan-900: 6 86 102;
  --ag-cyan-950: 5 68 81;

  /* Purple scale */
  --ag-purple-50: 250 245 255;
  --ag-purple-100: 233 216 253;
  --ag-purple-200: 214 188 250;
  --ag-purple-300: 183 148 244;
  --ag-purple-400: 159 122 234;
  --ag-purple-500: 128 90 213;
  --ag-purple-600: 107 70 193;
  --ag-purple-700: 85 60 154;
  --ag-purple-800: 68 51 122;
  --ag-purple-900: 50 38 89;
  --ag-purple-950: 40 30 70;

  /* Pink scale */
  --ag-pink-50: 255 245 247;
  --ag-pink-100: 254 215 226;
  --ag-pink-200: 251 182 206;
  --ag-pink-300: 246 135 179;
  --ag-pink-400: 237 100 166;
  --ag-pink-500: 213 63 140;
  --ag-pink-600: 184 50 128;
  --ag-pink-700: 151 38 109;
  --ag-pink-800: 112 36 89;
  --ag-pink-900: 82 27 65;
  --ag-pink-950: 65 20 52;

  /* Brand scale */
  --ag-brand-50: 245 249 255;
  --ag-brand-100: 233 241 255;
  --ag-brand-200: 102 133 255;
  --ag-brand-300: 77 112 255;
  --ag-brand-400: 51 92 255;
  --ag-brand-500: 0 51 255;
  --ag-brand-600: 0 46 230;
  --ag-brand-700: 0 41 204;
  --ag-brand-800: 0 36 179;
  --ag-brand-900: 0 31 153;

  /* Semantic tokens - Light mode */
  --ag-background: 255 255 255;
  --ag-foreground: 0 0 0;
  --ag-primary: 0 0 0;
  --ag-primary-foreground: 255 255 255;
  --ag-secondary: var(--ag-gray-100);
  --ag-secondary-foreground: 0 0 0;
  --ag-brand: var(--ag-brand-500);
  --ag-brand-foreground: 255 255 255;
  --ag-destructive: var(--ag-red-500);
  --ag-destructive-foreground: 255 255 255;
  --ag-muted: var(--ag-gray-50);
  --ag-muted-foreground: var(--ag-gray-800);
  --ag-accent: var(--ag-gray-50);
  --ag-accent-foreground: var(--ag-gray-950);
  --ag-accent-strong: var(--ag-gray-100);
  --ag-accent-strong-foreground: var(--ag-gray-950);
  --ag-popover: 255 255 255;
  --ag-popover-foreground: 0 0 0;
  --ag-card: 255 255 255;
  --ag-card-foreground: 0 0 0;
  --ag-border: var(--ag-gray-200);
  --ag-input: var(--ag-gray-200);
  --ag-ring: 0 0 0;
  --ag-sidebar-background: 255 255 255;
  --ag-sidebar-foreground: 61 61 61;
  --ag-sidebar-primary: 25 25 25;
  --ag-sidebar-primary-foreground: 255 255 255;
  --ag-sidebar-accent: 244 244 244;
  --ag-sidebar-accent-foreground: 25 25 25;
  --ag-sidebar-border: var(--ag-gray-200);
  --ag-sidebar-ring: 52 144 255;
}

/* Dark mode semantic tokens */
.dark {
  --ag-background: var(--ag-mode-900);
  --ag-foreground: 255 255 255;
  --ag-primary: 255 255 255;
  --ag-primary-foreground: 0 0 0;
  --ag-secondary: var(--ag-mode-500);
  --ag-secondary-foreground: 255 255 255;
  --ag-brand: var(--ag-brand-400);
  --ag-brand-foreground: 255 255 255;
  --ag-destructive: var(--ag-red-500);
  --ag-destructive-foreground: 255 255 255;
  --ag-muted: var(--ag-mode-700);
  --ag-muted-foreground: var(--ag-gray-800);
  --ag-accent: var(--ag-mode-700);
  --ag-accent-foreground: 255 255 255;
  --ag-popover: 0 0 0;
  --ag-popover-foreground: 255 255 255;
  --ag-card: var(--ag-mode-600);
  --ag-card-foreground: 255 255 255;
  --ag-border: var(--ag-gray-800);
  --ag-input: 255 255 255;
  --ag-ring: var(--ag-mode-700);
  --ag-sidebar-background: var(--ag-mode-600);
  --ag-sidebar-foreground: 255 255 255;
  --ag-sidebar-primary: 240 240 240;
  --ag-sidebar-primary-foreground: 15 15 15;
  --ag-sidebar-accent: var(--ag-mode-700);
  --ag-sidebar-accent-foreground: 255 255 255;
  --ag-sidebar-border: var(--ag-mode-700);
  --ag-sidebar-ring: var(--ag-purple-300);
}

/* Logo Component Styles */
.autograb-logo {
  /* Base logo styles */
  transition: opacity 0.2s ease-in-out;
  max-width: 100%;
  height: auto;
}

.autograb-logo:hover {
  opacity: 0.8;
}

/* Logo size variants */
.autograb-logo-sm {
  height: 1.5rem; /* 24px */
  max-width: 10.5rem; /* 168px * (24/24) */
}

.autograb-logo-md {
  height: 2rem; /* 32px */
  max-width: 14rem; /* 168px * (32/24) */
}

.autograb-logo-lg {
  height: 2.5rem; /* 40px */
  max-width: 17.5rem; /* 168px * (40/24) */
}

.autograb-logo-xl {
  height: 3rem; /* 48px */
  max-width: 21rem; /* 168px * (48/24) */
}

/* Responsive logo adjustments */
@media (max-width: 640px) {
  .autograb-logo-xl {
    height: 2.5rem; /* Reduce on mobile */
    max-width: 17.5rem;
  }
  
  .autograb-logo-lg {
    height: 2rem;
    max-width: 14rem;
  }
}

/* Logo container styles for better alignment */
.autograb-logo-container {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
}

/* Dark mode logo adjustments */
@media (prefers-color-scheme: dark) {
  .autograb-logo {
    filter: brightness(1.1);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .autograb-logo {
    filter: contrast(1.2);
  }
}