/**
 * CTI DUO Design System & Concept Framework
 * DUO = Digitized • Unified • Optimized
 * Powered by CTI Resources
 */

:root {
  /* ==========================================================================
     Official CTI DUO Brand Pillars
     ========================================================================== */
  --duo-d-blue: #19388A;             /* D - Digitized (CTI Royal Navy) */
  --duo-u-orange: #F7941E;           /* U - Unified (CTI Vibrant Amber-Orange) */
  --duo-o-green: #00A261;            /* O - Optimized (CTI Emerald Tech Green) */

  /* Semantic Theme Mappings */
  --duo-primary: #19388A;            /* Executive Deep Blue */
  --duo-primary-hover: #122863;
  --duo-primary-dark: #0D1C44;
  --duo-primary-light: #EEF2FA;
  
  --duo-accent: #F7941E;             /* Action Orange */
  --duo-accent-hover: #D87B11;
  --duo-accent-glow: rgba(247, 148, 30, 0.25);
  
  --duo-secondary: #00A261;          /* Optimized Green */
  --duo-secondary-hover: #008751;

  /* ==========================================================================
     Surfaces & Canvas
     ========================================================================== */
  --duo-bg: #F8FAFC;                /* Clean Canvas */
  --duo-surface: #FFFFFF;           /* Elevated Containers */
  --duo-surface-alt: #F1F5F9;       /* Secondary card / table header */
  --duo-surface-hover: #E8EEF5;

  /* ==========================================================================
     Typography & Contrast
     ========================================================================== */
  --duo-text-main: #0F172A;         /* Slate Main Typography */
  --duo-text-secondary: #334155;
  --duo-text-muted: #64748B;
  --duo-text-inverse: #FFFFFF;

  /* ==========================================================================
     Borders & Dividers
     ========================================================================== */
  --duo-border: #E2E8F0;
  --duo-border-light: #F1F5F9;
  --duo-border-focus: #19388A;

  /* ==========================================================================
     Status Tokens (Aligned with DUO Pillars)
     ========================================================================== */
  --duo-success: #00A261;           /* O - Optimized / Verified */
  --duo-success-bg: #E6F6EF;
  --duo-success-border: #99DAC0;

  --duo-warning: #F7941E;           /* U - Unified / Pending */
  --duo-warning-bg: #FEF4E8;
  --duo-warning-border: #FCD6A5;

  --duo-danger: #DC2626;            /* Alert / Expired */
  --duo-danger-bg: #FEF2F2;
  --duo-danger-border: #FECACA;

  --duo-info: #19388A;              /* D - Digitized / Linked */
  --duo-info-bg: #EEF2FA;
  --duo-info-border: #B7C3E1;

  /* ==========================================================================
     Shadows & Elevation
     ========================================================================== */
  --duo-shadow-sm: 0 1px 3px rgba(25, 56, 138, 0.06);
  --duo-shadow-md: 0 4px 14px rgba(25, 56, 138, 0.08);
  --duo-shadow-lg: 0 12px 32px rgba(25, 56, 138, 0.12);
  --duo-shadow-accent: 0 4px 14px rgba(247, 148, 30, 0.28);
  --duo-radius-sm: 4px;
  --duo-radius-md: 8px;
  --duo-radius-lg: 12px;
}

/* Tri-Color DUO Accent Stripe */
.duo-gradient-bar {
  background: linear-gradient(90deg, #19388A 0%, #19388A 35%, #F7941E 50%, #00A261 65%, #00A261 100%);
  height: 3px;
  width: 100%;
}

/* DUO Badges */
.duo-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.duo-badge-d { background: #EEF2FA; color: #19388A; border: 1px solid #B7C3E1; }
.duo-badge-u { background: #FEF4E8; color: #D87B11; border: 1px solid #FCD6A5; }
.duo-badge-o { background: #E6F6EF; color: #00A261; border: 1px solid #99DAC0; }

.duo-badge-success { background: var(--duo-success-bg); color: var(--duo-success); border: 1px solid var(--duo-success-border); }
.duo-badge-warning { background: var(--duo-warning-bg); color: var(--duo-warning); border: 1px solid var(--duo-warning-border); }
.duo-badge-danger { background: var(--duo-danger-bg); color: var(--duo-danger); border: 1px solid var(--duo-danger-border); }
.duo-badge-info { background: var(--duo-info-bg); color: var(--duo-info); border: 1px solid var(--duo-info-border); }

.duo-btn-primary {
  background: var(--duo-primary);
  color: var(--duo-text-inverse);
  border: 1px solid var(--duo-primary);
  transition: all 0.15s ease-in-out;
}
.duo-btn-primary:hover {
  background: var(--duo-primary-hover);
  border-color: var(--duo-primary-hover);
}

.duo-btn-accent {
  background: var(--duo-accent);
  color: #FFFFFF;
  border: 1px solid var(--duo-accent);
  box-shadow: var(--duo-shadow-accent);
  transition: all 0.15s ease-in-out;
}
.duo-btn-accent:hover {
  background: var(--duo-accent-hover);
  border-color: var(--duo-accent-hover);
}