/* =============================================================================
   CHDS Pulse - Multi-Theme System (Tailwind 4)

   Theme Structure:
   - :root defines base light mode colors
   - [data-theme="X"] overrides for specific themes
   - .dark overrides for dark mode

   Official CHDS Colors (from style guide):
   - Navy: #002B58
   - Blue: #0268BB
   - Yellow: #FED402
   - Gold: #FCB900

   ============================================================================= */

/* =============================================================================
   DEVELOPER THEME (Muted Black/Tangerine)
   ============================================================================= */

:root {
  /* Primary Colors (Muted Black) */
  --color-primary-50: #f5f5f5;
  --color-primary-100: #e8e8e7;
  --color-primary-200: #c8c8c7;
  --color-primary-300: #a0a09f;
  --color-primary-400: #6b6b6a;
  --color-primary-500: #474746;
  --color-primary-600: #1D1D1B;  /* Main primary - Muted Black */
  --color-primary-700: #171716;
  --color-primary-800: #121211;
  --color-primary-900: #0a0a0a;

  /* Accent Colors (Tangerine) */
  --color-accent-50: #fef5f0;
  --color-accent-100: #fde9e0;
  --color-accent-200: #fbd3c1;
  --color-accent-300: #f9b599;
  --color-accent-400: #f69668;
  --color-accent-500: #ED773C;   /* Tangerine */
  --color-accent-600: #e36530;
  --color-accent-700: #c55325;
  --color-accent-800: #9d421d;
  --color-accent-900: #7a3316;

  /* Neutral Grays */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Semantic Colors - Light Mode */
  --color-surface: var(--color-gray-50);
  --color-surface-elevated: #ffffff;
  --color-surface-secondary: var(--color-gray-100);  /* Subnav, secondary surfaces */
  --color-surface-overlay: #ffffff;
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-border: var(--color-gray-200);
  --color-border-strong: var(--color-gray-300);
  --color-divider: var(--color-gray-200);

  /* Base primary for bg-primary utility */
  --color-primary: var(--color-primary-600);
  --color-primary-contrast: #ffffff;

  /* Interactive States */
  --color-link: var(--color-primary-600);
  --color-link-hover: var(--color-primary-700);
  --color-focus-ring: var(--color-primary-500);
  --color-button-primary: var(--color-primary-600);
  --color-button-primary-hover: var(--color-primary-700);

  /* Status Colors */
  --color-success: #10b981;    /* green-500 - success states */
  --color-success-light: #d1fae5; /* green-100 */
  --color-warning: #f97316;    /* orange-500 - warning/attention */
  --color-warning-light: #ffedd5; /* orange-100 */
  --color-error: #ef4444;      /* red-500 - errors, destructive actions */
  --color-error-light: #fee2e2;   /* red-100 */
  --color-info: var(--color-primary-500);
  --color-info-light: var(--color-primary-50);
  --color-yellow: #eab308;     /* yellow-500 - testing/experimental */
  --color-yellow-light: #fef9c3; /* yellow-100 */

  /* CHDS Brand Colors */
  --color-chds-yellow-50: #fffbeb;    /* Very light yellow */
  --color-chds-yellow-100: #fef3c7;   /* Light yellow */
  --color-chds-yellow-200: #fde68a;   /* Lighter yellow */
  --color-chds-yellow-300: #fcd34d;   /* Light-medium yellow */
  --color-chds-yellow-400: #FED402;   /* CHDS Official Yellow */
  --color-chds-yellow-500: #FED402;   /* CHDS Official Yellow */
  --color-chds-yellow-600: #d4af02;   /* Darker yellow */
  --color-chds-yellow-700: #a88a02;   /* Dark yellow */
  --color-chds-yellow-800: #7d6501;   /* Very dark yellow */
  --color-chds-yellow-900: #524301;   /* Darkest yellow */
}

/* Map CSS variables to Tailwind utilities using @theme directive */
@theme {
  /* Primary color scale */
  --color-primary-50: var(--color-primary-50);
  --color-primary-100: var(--color-primary-100);
  --color-primary-200: var(--color-primary-200);
  --color-primary-300: var(--color-primary-300);
  --color-primary-400: var(--color-primary-400);
  --color-primary-500: var(--color-primary-500);
  --color-primary-600: var(--color-primary-600);
  --color-primary-700: var(--color-primary-700);
  --color-primary-800: var(--color-primary-800);
  --color-primary-900: var(--color-primary-900);

  /* Accent color scale */
  --color-accent-50: var(--color-accent-50);
  --color-accent-100: var(--color-accent-100);
  --color-accent-200: var(--color-accent-200);
  --color-accent-300: var(--color-accent-300);
  --color-accent-400: var(--color-accent-400);
  --color-accent-500: var(--color-accent-500);
  --color-accent-600: var(--color-accent-600);
  --color-accent-700: var(--color-accent-700);
  --color-accent-800: var(--color-accent-800);
  --color-accent-900: var(--color-accent-900);

  /* Gray scale */
  --color-gray-50: var(--color-gray-50);
  --color-gray-100: var(--color-gray-100);
  --color-gray-200: var(--color-gray-200);
  --color-gray-300: var(--color-gray-300);
  --color-gray-400: var(--color-gray-400);
  --color-gray-500: var(--color-gray-500);
  --color-gray-600: var(--color-gray-600);
  --color-gray-700: var(--color-gray-700);
  --color-gray-800: var(--color-gray-800);
  --color-gray-900: var(--color-gray-900);

  /* Semantic colors */
  --color-surface: var(--color-surface);
  --color-surface-elevated: var(--color-surface-elevated);
  --color-surface-secondary: var(--color-surface-secondary);
  --color-surface-overlay: var(--color-surface-overlay);
  --color-text-primary: var(--color-text-primary);
  --color-text-secondary: var(--color-text-secondary);
  --color-text-tertiary: var(--color-text-tertiary);
  --color-border: var(--color-border);
  --color-border-strong: var(--color-border-strong);
  --color-divider: var(--color-divider);

  /* Interactive states */
  --color-link: var(--color-link);
  --color-link-hover: var(--color-link-hover);
  --color-focus-ring: var(--color-focus-ring);
  --color-button-primary: var(--color-button-primary);
  --color-button-primary-hover: var(--color-button-primary-hover);

  /* Status colors */
  --color-success: var(--color-success);
  --color-success-light: var(--color-success-light);
  --color-warning: var(--color-warning);
  --color-warning-light: var(--color-warning-light);
  --color-error: var(--color-error);
  --color-error-light: var(--color-error-light);
  --color-info: var(--color-info);
  --color-info-light: var(--color-info-light);
  --color-yellow: var(--color-yellow);
  --color-yellow-light: var(--color-yellow-light);

  /* CHDS Brand Yellow scale */
  --color-chds-yellow-50: var(--color-chds-yellow-50);
  --color-chds-yellow-100: var(--color-chds-yellow-100);
  --color-chds-yellow-200: var(--color-chds-yellow-200);
  --color-chds-yellow-300: var(--color-chds-yellow-300);
  --color-chds-yellow-400: var(--color-chds-yellow-400);
  --color-chds-yellow-500: var(--color-chds-yellow-500);
  --color-chds-yellow-600: var(--color-chds-yellow-600);
  --color-chds-yellow-700: var(--color-chds-yellow-700);
  --color-chds-yellow-800: var(--color-chds-yellow-800);
  --color-chds-yellow-900: var(--color-chds-yellow-900);

  /* Base primary color (maps to primary-600 by default) */
  --color-primary: var(--color-primary-600);
  --color-primary-contrast: #ffffff;

  /* Font families */
  --font-family-sans: system-ui, -apple-system, sans-serif;
  --font-family-serif: Georgia, serif;
}

/* Ensure submit buttons are always visible with proper contrast */
input[type="submit"].bg-primary-600,
button[type="submit"].bg-primary-600 {
  background-color: var(--color-primary-600);
  color: #ffffff;
}

input[type="submit"].bg-primary-600:hover,
button[type="submit"].bg-primary-600:hover {
  background-color: var(--color-primary-700);
}

/* =============================================================================
   CHDS THEME (Official Navy/Blue/Yellow)
   ============================================================================= */

[data-theme="chds"] {
  /* Primary Colors (CHDS Navy #002B58) */
  --color-primary-50: #e6ecf3;
  --color-primary-100: #ccd9e7;
  --color-primary-200: #99b3cf;
  --color-primary-300: #668db7;
  --color-primary-400: #33679f;
  --color-primary-500: #004187;   /* Lighter navy */
  --color-primary-600: #002B58;   /* Official CHDS Navy */
  --color-primary-700: #002247;
  --color-primary-800: #001a36;
  --color-primary-900: #001225;

  /* Accent Colors (CHDS Yellow #FED402 - PRIMARY ACCENT) */
  --color-accent-50: #fffceb;
  --color-accent-100: #fff8d6;
  --color-accent-200: #fff1ad;
  --color-accent-300: #ffea84;
  --color-accent-400: #ffe35b;
  --color-accent-500: #FED402;   /* Official CHDS Yellow - MAIN ACCENT */
  --color-accent-600: #e5bf02;
  --color-accent-700: #b39602;
  --color-accent-800: #806d01;
  --color-accent-900: #4e4301;

  /* Interactive Blue (for links/buttons) */
  --color-interactive: #0268BB;   /* Official CHDS Blue */
  --color-interactive-hover: #015a9f;

  /* Secondary Accent (Gold for borders/dividers) */
  --color-gold: #FCB900;          /* Official CHDS Gold */

  /* CHDS Custom Grays (from style guide) */
  --color-gray-50: #F7F7F7;
  --color-gray-100: #E5E5E5;
  --color-gray-200: #CCCCCC;
  --color-gray-300: #B3B3B3;
  --color-gray-400: #999999;
  --color-gray-500: #808080;
  --color-gray-600: #666666;
  --color-gray-700: #4D4D4D;
  --color-gray-800: #333333;
  --color-gray-900: #2A2A2A;

  /* Semantic Colors - CHDS Theme */
  --color-surface: var(--color-gray-50);
  --color-surface-elevated: #ffffff;          /* White card backgrounds */
  --color-surface-secondary: #ffffff;         /* White subnav/secondary surfaces */
  --color-surface-overlay: #ffffff;
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-link: var(--color-interactive);
  --color-link-hover: var(--color-interactive-hover);
  --color-button-primary: var(--color-interactive);
  --color-button-primary-hover: var(--color-primary-600);
  --color-focus-ring: var(--color-accent-500);
  --color-border: var(--color-gray-200);      /* Standard borders */
  --color-border-strong: var(--color-gold);
  --color-divider: var(--color-gold);

  /* Font Family Changes */
  --font-family-sans: 'Helvetica', 'Arial', sans-serif;
  --font-family-serif: 'Georgia', serif;  /* Fallback since we don't have Minion Pro installed */
}

/* Apply CHDS fonts to elements */
[data-theme="chds"] body {
  font-family: var(--font-family-sans);
  line-height: 1.96;  /* CHDS style guide: 1.96, not default 1.5 */
}

[data-theme="chds"] h1,
[data-theme="chds"] h2,
[data-theme="chds"] h3,
[data-theme="chds"] h4,
[data-theme="chds"] h5,
[data-theme="chds"] h6 {
  font-family: var(--font-family-serif);
  color: var(--color-primary-600);  /* Navy for headings per style guide */
}

/* Exception: Only main nav items should be white on Navy, not dropdowns */
[data-theme="chds"] nav.bg-primary-600 > div > div > div > a,
[data-theme="chds"] nav.bg-primary-600 > div > div > div > div > button,
[data-theme="chds"] nav.bg-primary-600 > div > div > div > button {
  color: #ffffff;  /* White text for nav items only */
}

/* CHDS Card Structure via PulseCardComponent */

/* PulseCardComponent: Remove Navy backgrounds from header sections */
/* Exclude buttons, links, and inputs to preserve interactive element styling */
[data-theme="chds"] .bg-surface-elevated .bg-primary-600:not(button):not(a):not(input),
[data-theme="chds"] .bg-surface-elevated .bg-primary-700:not(button):not(a):not(input) {
  background-color: transparent !important;  /* Transparent header in cards */
}

/* PulseCardComponent: Override white text to be Navy/dark in card headers */
[data-theme="chds"] .bg-surface-elevated .bg-primary-600:not(button):not(a):not(input) .text-white,
[data-theme="chds"] .bg-surface-elevated .bg-primary-700:not(button):not(a):not(input) .text-white {
  color: var(--color-text-primary) !important;  /* Navy text in transparent headers */
}

/* CRITICAL: CHDS uses SHARP CORNERS (border-radius: 0) for nearly everything */
[data-theme="chds"] .rounded,
[data-theme="chds"] .rounded-sm,
[data-theme="chds"] .rounded-md,
[data-theme="chds"] .rounded-lg,
[data-theme="chds"] .rounded-xl,
[data-theme="chds"] .rounded-2xl,
[data-theme="chds"] .rounded-3xl {
  border-radius: 0 !important;
}

/* Exception: Keep these rounded per style guide */
[data-theme="chds"] .rounded-full {
  border-radius: 9999px !important;  /* Avatars, circular badges */
}

/* CHDS-specific shadows (more subtle than Tailwind defaults) */
[data-theme="chds"] .shadow {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08) !important;  /* Cards */
}

[data-theme="chds"] .shadow-md {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;  /* Metric cards */
}

[data-theme="chds"] .shadow-lg {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;  /* Dropdowns */
}

[data-theme="chds"] .shadow-xl {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;  /* Modals */
}

[data-theme="chds"] .shadow-2xl {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;  /* High elevation */
}

/* CHDS button styling */
[data-theme="chds"] button,
[data-theme="chds"] .btn,
[data-theme="chds"] [type="button"],
[data-theme="chds"] [type="submit"] {
  text-transform: uppercase;
  font-weight: 400;  /* Not 600 */
  border-radius: 0;
}

/* CHDS buttons with bg-primary should use interactive blue instead */
[data-theme="chds"] button.bg-primary-600,
[data-theme="chds"] input[type="submit"].bg-primary-600,
[data-theme="chds"] a.bg-primary-600 {
  background-color: var(--color-interactive) !important;
  color: #ffffff !important;
}

[data-theme="chds"] button.bg-primary-600:hover,
[data-theme="chds"] input[type="submit"].bg-primary-600:hover,
[data-theme="chds"] a.bg-primary-600:hover {
  background-color: var(--color-interactive-hover) !important;
}

/* Exception: Don't uppercase navigation buttons */
[data-theme="chds"] nav button {
  text-transform: none !important;
}

/* CHDS form inputs (very subtle 2px radius) */
[data-theme="chds"] input[type="text"],
[data-theme="chds"] input[type="email"],
[data-theme="chds"] input[type="password"],
[data-theme="chds"] input[type="number"],
[data-theme="chds"] input[type="search"],
[data-theme="chds"] input[type="tel"],
[data-theme="chds"] input[type="url"],
[data-theme="chds"] textarea,
[data-theme="chds"] select {
  border-radius: 2px !important;  /* Very subtle, not sharp */
}

/* CHDS form labels (Navy color) */
[data-theme="chds"] label {
  color: var(--color-primary-600);  /* Navy labels per style guide */
  font-weight: 600;
}

/* =============================================================================
   DARK MODE OVERRIDES (applies to both themes)
   ============================================================================= */

.dark {
  /* Invert surface colors */
  --color-surface: var(--color-gray-900);
  --color-surface-elevated: var(--color-gray-800);
  --color-surface-secondary: var(--color-gray-700);  /* Slightly lighter than elevated */
  --color-surface-overlay: var(--color-gray-800);

  /* Invert text colors */
  --color-text-primary: var(--color-gray-50);
  --color-text-secondary: var(--color-gray-400);
  --color-text-tertiary: var(--color-gray-500);

  /* Adjust borders for dark mode */
  --color-border: var(--color-gray-700);
  --color-border-strong: var(--color-gray-600);
  --color-divider: var(--color-gray-700);

  /* Keep primary/accent colors but adjust brightness */
  --color-primary-600: var(--color-primary-500);
  --color-primary-700: var(--color-primary-400);
  --color-accent-500: var(--color-accent-400);
  --color-accent-600: var(--color-accent-300);

  /* Status colors - slightly lighter for dark mode */
  --color-success: #34d399;    /* green-400 */
  --color-success-light: #064e3b; /* green-900 */
  --color-warning: #fbbf24;    /* amber-400 */
  --color-warning-light: #78350f; /* amber-900 */
  --color-error: #f87171;      /* red-400 */
  --color-error-light: #7f1d1d;   /* red-900 */
}

/* CHDS Dark Mode - Additional Adjustments */
.dark[data-theme="chds"] {
  /* CHDS Yellow is too bright for dark mode, use gold instead */
  --color-highlight: #FCB900;
  --color-highlight-dark: #d39e00;
}

/* CHDS Dark Mode - Fix heading visibility */
.dark[data-theme="chds"] h1,
.dark[data-theme="chds"] h2,
.dark[data-theme="chds"] h3,
.dark[data-theme="chds"] h4,
.dark[data-theme="chds"] h5,
.dark[data-theme="chds"] h6 {
  color: var(--color-primary-200);  /* Lighter blue for dark mode readability */
}