/* =============================================================================
   CSS VARIABLES FOR Zendesk HELP CENTER THEMES
   =============================================================================
*/

html {
  /* BACKGROUND COLORS */
  --background-primary: var(--color-background-primary, #ffffff);                    /* Main backgrounds, cards, forms */
  --background-secondary: var(--color-background-secondary, #F4F5F6);                /* Secondary backgrounds */
  --background-tertiary: var(--color-background-tertiary, #eaeeef);                  /* Tertiary states */
  --background-accent: var(--color-background-accent-secondary, #ecf1fb);            /* Accent backgrounds (search, footer) */
  
  --background-success: var(--color-background-success, #e6faf5);                    /* Success backgrounds */
  --background-error: var(--color-green-100, #fff2f2);                               /* Error backgrounds */                 /* Light background variant */
  --background-header: var(--color-background-navigation, #ffffff);      
  --background-mobile-nav: var(--color-green-400, #ffffff);                         /* Header background */
  --background-footer: var(--color-background-secondary, #f4f5f6);                  /* Footer background */
  
  /* TEXT COLORS */
  --text-primary: var(--color-text-primary, #1f2124);                                /* Black text, headings */
  --text-secondary: var(--color-text-secondary, #404347);                            /* Gray text, body text */
  --text-tertiary: var(--color-text-tertiary, #62686e);                              /* Light gray, muted text */
  --text-body: var(--color-text-secondary, #404347);                                 /* Main content text */
  --text-muted: var(--color-text-placeholder, #62686e);                              /* Subdued text */
  --text-contrast: var(--color-text-primary, #1f2124);                               /* High contrast text */
  --text-dark: var(--color-text-primary, #1f2124);                                   /* Dark text variant */
  --text-navigation: var(--color-text-navigation, #62686e);         
  
  /* Buttons */
  --button-primary-background: var(--color-interactive-background-button-primary-base, #2e67d1); /* Primary button background */
  
  /* BORDER COLORS */
  --border-primary: var(--color-border-secondary, #d7dce0);                          /* Main borders */
  --border-light: var(--color-border-primary, #c9cfd4);                              /* Light borders */
  --border-overlay-light: rgba(0, 0, 0, 0.07);                                       /* Light overlay borders */
  --border-overlay-dark: rgba(0, 0, 0, 0.15);          
  --border-interactive-primary: var(--color-interactive-border-primary-active, #404347);                              /* Dark overlay borders */
  
  /* OVERLAY COLORS */
  --background-overlay-light: rgba(0, 0, 0, 0.02);                                   /* Light background overlay */
  --background-overlay-medium: rgba(0, 0, 0, 0.08);                                  /* Medium background overlay */
  --tooltip-background: rgba(0, 0, 0, 0.85);                                         /* Tooltip background */
  
  /* INTERACTIVE COLORS */
  --interactive-primary: var(--color-interactive-text-link-primary-base, #2e67d1);                  /* Primary blue */
  --interactive-success: var(--color-green-400, #05b86c);                            /* Success green */
  --interactive-error: var(--color-red-500, #e6564a);                                /* Error red */
  
  /* STATUS COLORS */
  --status-success: var(--color-green-500, #77a500);                                 /* Success/approved */
  --status-warning: var(--color-orange-400, #f5ca00);                                /* Warning/pending */
  --status-info: var(--color-blue-400, #59bbe0);                                     /* Information */
  
  /* NOTIFICATION COLORS */
  --notification-warning-bg: #fcf6eb;                                                /* Warning notification background */
  --notification-warning-border: #f8b816;                                            /* Warning notification border */
  --notification-warning-action: #ffb700;                                            /* Warning notification action button */
  --notification-warning-action-hover: #e4a504;                                      /* Warning notification action button hover */
}

/* =============================================================================
   THEME-SPECIFIC OVERRIDES
   =============================================================================
   CSS variables that don't map to the same token between rover and CIAF themes.
   Use this section for colors that need different values per theme but can't
   be handled by the standard theme token mapping above.
   =============================================================================
*/

html[data-theme="cat-in-a-flat"] {
   --background-accent: var(--color-background-accent);
   --button-primary-background: var(--color-red-400);
   --background-mobile-nav: var(--color-background-navigation);   
   --background-footer: var(--color-background-navigation);
}