/* BFA Design System for AdminJS
 * 
 * IMPORTANT NOTES ON CSS SPECIFICITY:
 * 
 * !important is necessary in many cases because:
 * 1. AdminJS uses inline styles (style="...") which have very high specificity
 * 2. AdminJS generates CSS classes dynamically with specific naming patterns
 * 3. Some components use CSS-in-JS which overrides class-based styles
 * 
 * Best practices used in this file:
 * 1. Use CSS custom properties (--variables) for consistent theming
 * 2. Use higher specificity selectors (body element) to avoid !important where possible
 * 3. Only use !important when necessary to override inline styles or very specific selectors
 * 4. Group related overrides together for maintainability
 * 5. Use AdminJS design tokens where available (--theme-color-*)
 */

/* BFA Custom Fonts */

@font-face {
  font-family: 'Sentinel';
  src: url('/fonts/SentinelSSm-Book_Web.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('/fonts/GothamSSm-Book_Web.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('/fonts/GothamSSm-Medium_Web.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gotham';
  src: url('/fonts/GothamSSm-Bold_Web.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* BFA Design System Variables 
 * 
 * COLOR MANAGEMENT STRATEGY:
 * - CSS custom properties here are used for custom overrides and components
 * - AdminJS theme colors in index.ts must use hardcoded hex values (limitation)
 * - Keep both in sync manually when updating brand colors
 * - This file serves as the reference for all BFA brand colors
 */
:root {
  /* BFA Brand Colors */
  --bfa-blue: #003a63;
  --bfa-dark-blue: #0a2e4c;
  --bfa-gold: #deb408;
  --bfa-dark-gold: #c4a006;
  --sky-blue: #549aca;
  --dark-sky-blue: #4281a5;
  --bfa-red: #ea6342;
  --bfa-gray: #4d4d4f;
  --bfa-lt-gray: #f1f2f2;
  
  /* Neutral Colors */
  --white: #ffffff;
  --black: #000000;
  --gray: #333333;
  --gray-muted: #7d7d7d;
  --light-muted-gray: #bcbcbc;
  --color-light: #f7f7f7;
  
  /* Typography */
  --font-family-primary: 'Gotham', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-family-base: 'Sentinel', Georgia, 'Times New Roman', serif;
  
  /* Dynamic color variables that can be overridden */
  --heading-color: var(--bfa-blue);
  --text-color: var(--black);
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;
  
  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Override AdminJS Design System Colors */
:root {
  /* Primary Colors */
  --theme-color-primary100: var(--bfa-blue);
  --theme-color-primary80: var(--bfa-dark-blue);
  --theme-color-primary60: var(--sky-blue);
  
  /* Accent Colors */
  --theme-color-accent: var(--bfa-gold);
  --theme-color-accent-hover: var(--bfa-dark-gold);
  
  /* Background Colors */
  --theme-color-bg: var(--white);
  --theme-color-bg-subtle: var(--bfa-lt-gray);
  
  /* Text Colors */
  --theme-color-text: var(--black);
  --theme-color-text-light: var(--gray);
  --theme-color-text-lighter: var(--gray-muted);
  
  /* Border Colors */
  --theme-color-border: var(--bfa-lt-gray);
  --theme-color-border-light: #e5e5e5;
  
  /* State Colors */
  --theme-color-success: #28a745;
  --theme-color-error: var(--bfa-red);
  --theme-color-warning: #ffc107;
  --theme-color-info: var(--sky-blue);
}

/* Global Font Application */
body,
html {
  font-family: var(--font-family-primary) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography Hierarchy - Some can avoid !important with higher specificity */
body h1, body h2, body h3, body h4, body h5, body h6,
body .adminjs_H1,
body .adminjs_H2,
body .adminjs_H3,
body .adminjs_H4,
body .adminjs_H5,
body .adminjs_H6,
body [class*="H1"],
body [class*="H2"],
body [class*="H3"],
body [class*="H4"],
body [class*="H5"],
body [class*="H6"] {
  font-family: var(--font-family-primary);
  color: var(--heading-color);
}

/* Body Text - Higher specificity to avoid !important where possible */
body p,
body span,
body div,
body .adminjs_Text,
body .adminjs_Paragraph,
body [class*="Text"],
body [class*="Paragraph"] {
  font-family: var(--font-family-base);
  color: var(--text-color);
}

/* Status and State Colors */
.adminjs_Badge,
[class*="Badge"]:not([class*="Badge--"]) {
  border-radius: 0;
  border: none;
  background-color: var(--bfa-blue);
  color: var(--white);
}

.adminjs_Badge--success,
[class*="Badge--success"] {
  background-color: #28a745 !important;
}

.adminjs_Badge--error,
[class*="Badge--error"] {
  background-color: var(--bfa-red) !important;
}

.adminjs_Badge--warning,
[class*="Badge--warning"] {
  background-color: #ffc107 !important;
  color: var(--bfa-blue) !important;
}

/* Label Styling */
.adminjs_Label,
[class*="Label"] {
  color: var(--bfa-gray) !important;
}