/**
 * Theme System - CSS Custom Properties
 *
 * This file defines CSS custom properties (CSS variables) for the theme system.
 * These variables are dynamically overridden by organization-specific values
 * through the theme context processor and dynamic style injection.
 */

:root {
  /* === Primary Color Palette === */
  --color-primary: #1976d2;      /* Iowa blue - default primary */
  --color-secondary: #2e5266;    /* Iowa dark blue - default secondary */
  --color-accent: #0f7173;       /* Iowa teal - default accent */

  /* === Semantic Colors === */
  --color-success: #2e7d32;      /* Iowa green - success states */
  --color-warning: #f57c00;      /* Iowa orange - warning states */
  --color-error: #d32f2f;        /* Iowa red - error states */
  --color-info: #0288d1;         /* Info blue */

  /* === Extended Iowa Palette === */
  --color-iowa-teal-light: #4db6ac;     /* Light teal variant */
  --color-iowa-green-light: #c0ca33;    /* Light green variant */
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-200: #e5e7eb;
  --color-neutral-300: #d1d5db;
  --color-neutral-400: #9ca3af;
  --color-neutral-500: #6b7280;
  --color-neutral-600: #4b5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1f2937;
  --color-neutral-900: #111827;

  /* === Typography === */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Cascadia Code', monospace;
  --font-family-heading: 'Work Sans', sans-serif;
  --font-family-body: 'Source Serif 4', Georgia, serif;

  /* Font Sizes */
  --font-size-badge: 10.5px;      /* Status badge text size */

  /* === Border Radius === */
  --border-radius-base: 0.375rem;  /* 6px - base border radius */
  --border-radius-sm: 0.25rem;     /* 4px - small */
  --border-radius-md: 0.375rem;    /* 6px - medium */
  --border-radius-lg: 0.5rem;      /* 8px - large */
  --border-radius-xl: 0.75rem;     /* 12px - extra large */
  --border-radius-2xl: 1rem;       /* 16px - 2x large */
  --border-radius-full: 9999px;    /* Full circle */

  /* === Spacing Scale === */
  --spacing-1: 0.25rem;    /* 4px */
  --spacing-2: 0.5rem;     /* 8px */
  --spacing-3: 0.75rem;    /* 12px */
  --spacing-4: 1rem;       /* 16px */
  --spacing-5: 1.25rem;    /* 20px */
  --spacing-6: 1.5rem;     /* 24px */
  --spacing-8: 2rem;       /* 32px */
  --spacing-10: 2.5rem;    /* 40px */
  --spacing-12: 3rem;      /* 48px */

  /* === Derived Color Variants (Auto-generated) === */
  /* These will be computed from base colors by CSS or JavaScript */
  /* Fallback values for browsers that don't support color-mix() (Chrome <111, Edge <111, Firefox <113, Safari <16.2) */

  /* Primary color shades - fallback values based on #1976d2 */
  --color-primary-50: #e3f2fd;
  --color-primary-100: #bbdefb;
  --color-primary-200: #90caf9;
  --color-primary-300: #64b5f6;
  --color-primary-400: #42a5f5;
  --color-primary-500: var(--color-primary);
  --color-primary-600: #1565c0;
  --color-primary-700: #0d47a1;
  --color-primary-800: #0a3a7f;
  --color-primary-900: #072d5f;

  /* Secondary color shades - fallback values based on #2e5266 */
  --color-secondary-50: #e8edef;
  --color-secondary-100: #c5d3d9;
  --color-secondary-200: #9fb6c1;
  --color-secondary-300: #7899a9;
  --color-secondary-400: #5b8396;
  --color-secondary-500: var(--color-secondary);
  --color-secondary-600: #264252;
  --color-secondary-700: #1d3340;
  --color-secondary-800: #162633;
  --color-secondary-900: #0f1a26;

  /* Modern browsers: override with dynamic color-mix() */
  @supports (color: color-mix(in srgb, red, blue)) {
    --color-primary-50: color-mix(in srgb, var(--color-primary) 5%, white);
    --color-primary-100: color-mix(in srgb, var(--color-primary) 10%, white);
    --color-primary-200: color-mix(in srgb, var(--color-primary) 20%, white);
    --color-primary-300: color-mix(in srgb, var(--color-primary) 30%, white);
    --color-primary-400: color-mix(in srgb, var(--color-primary) 40%, white);
    --color-primary-600: color-mix(in srgb, var(--color-primary) 80%, black);
    --color-primary-700: color-mix(in srgb, var(--color-primary) 70%, black);
    --color-primary-800: color-mix(in srgb, var(--color-primary) 60%, black);
    --color-primary-900: color-mix(in srgb, var(--color-primary) 50%, black);

    --color-secondary-50: color-mix(in srgb, var(--color-secondary) 5%, white);
    --color-secondary-100: color-mix(in srgb, var(--color-secondary) 10%, white);
    --color-secondary-200: color-mix(in srgb, var(--color-secondary) 20%, white);
    --color-secondary-300: color-mix(in srgb, var(--color-secondary) 30%, white);
    --color-secondary-400: color-mix(in srgb, var(--color-secondary) 40%, white);
    --color-secondary-600: color-mix(in srgb, var(--color-secondary) 80%, black);
    --color-secondary-700: color-mix(in srgb, var(--color-secondary) 70%, black);
    --color-secondary-800: color-mix(in srgb, var(--color-secondary) 60%, black);
    --color-secondary-900: color-mix(in srgb, var(--color-secondary) 50%, black);
  }

  /* === Interactive States === */
  --color-primary-hover: var(--color-primary-700);
  --color-primary-active: var(--color-primary-800);
  --color-primary-focus: var(--color-primary-500);

  --color-secondary-hover: var(--color-secondary-700);
  --color-secondary-active: var(--color-secondary-800);
  --color-secondary-focus: var(--color-secondary-500);

  /* === Theme Text Colors === */
  --theme-text-color: #374151;      /* Primary text - gray-700 */
  --theme-text-muted: #6b7280;      /* Secondary/muted text - gray-500 */
  --theme-text-tertiary: #6a7282;   /* Third-level text */

  /* === Theme Background Colors === */
  --theme-background-color: white;        /* Card/panel backgrounds */
  --theme-background-muted: #f7f6f8;      /* Page backgrounds */
  --theme-background-subtle: #f2f7f8;     /* Breadcrumb, table headers */

  /* === Theme Border Colors === */
  --theme-border-color: #e5e7eb;          /* Card borders, dividers - gray-200 */

  /* === Disabled States === */
  --theme-disabled-bg: #d9d9d9;
  --theme-disabled-text: #b3b3b3;

  /* === Status Colors === */
  /* Published / Approved - Green */
  --status-approved-text: #016630;
  --status-approved-bg: #dcfce7;
  --status-approved-border: #b9f8cf;
  --status-approved-solid: #00652a;

  /* In Review / Pending - Yellow/Amber */
  --status-pending-text: #894b00;
  --status-pending-bg: #fef9c2;
  --status-pending-border: #fff085;
  --status-pending-solid: #a66000;

  /* Ready to Publish - Blue */
  --status-ready-text: #193cb8;
  --status-ready-bg: #dbeafe;
  --status-ready-border: #bedbff;

  /* Draft - Gray */
  --status-draft-text: #515353;
  --status-draft-bg: #f7f6f8;
  --status-draft-border: #dae0e5;

  /* Changes Requested - Red */
  --status-changes-text: #991b1b;
  --status-changes-bg: #fef2f2;
  --status-changes-border: #fecaca;

  /* Archived - Dark Gray */
  --status-archived-solid: #2e3030;
  --status-archived-light: #dae0e5;

  /* Draft - Solid variant for badges */
  --status-draft-solid: #2e3030;

  /* In Review - Blue (solid for badges) */
  --status-in-review-solid: #2563eb;

  /* Pending Approval - Amber (solid for badges) */
  --status-pending-approval-solid: #d97706;

  /* Changes Requested - Orange (solid for badges) */
  --status-changes-solid: #ea580c;

  /* Approved - Green (solid for badges, different from published) */
  --status-approval-solid: #16a34a;

  /* Published Internal - Amber/Brown (solid for badges) */
  --status-published-internal-solid: #a66000;

  /* Resolved - Green (same colors as approved for consistency) */
  --status-resolved-bg: #dcfce7;
  --status-resolved-text: #016630;

  /* === Avatar Colors === */
  --avatar-color-primary: #000000;      /* Primary avatar (odd rows) - black */
  --avatar-color-secondary: #05617b;    /* Secondary avatar (even rows) - teal */
  --avatar-color-resolved: #9ca3af;     /* Resolved/muted avatar - gray-400 */

  /* === Interactive Background States === */
  --theme-hover-bg: #f3f4f6;            /* Hover background - gray-100 equivalent */

  /* === Layout Spacing === */
  --layout-padding-sm: 60px;      /* Tablet horizontal padding */
  --layout-padding-lg: 120px;     /* Desktop horizontal padding */

  /* === Shadows === */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* === Transitions === */
  --transition-base: 150ms ease-in-out;
  --transition-fast: 100ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
}

/* === Utility Classes for Tailwind Arbitrary Values === */

/* Primary color utilities */
.bg-theme-primary { background-color: var(--color-primary); }
.text-theme-primary { color: var(--color-primary); }
.border-theme-primary { border-color: var(--color-primary); }
.ring-theme-primary { --tw-ring-color: var(--color-primary); }

.bg-theme-primary-hover:hover { background-color: var(--color-primary-hover); }
.text-theme-primary-hover:hover { color: var(--color-primary-hover); }

/* Secondary color utilities */
.bg-theme-secondary { background-color: var(--color-secondary); }
.text-theme-secondary { color: var(--color-secondary); }
.border-theme-secondary { border-color: var(--color-secondary); }

.bg-theme-secondary-hover:hover { background-color: var(--color-secondary-hover); }
.text-theme-secondary-hover:hover { color: var(--color-secondary-hover); }

/* Accent color utilities */
.bg-theme-accent { background-color: var(--color-accent); }
.text-theme-accent { color: var(--color-accent); }
.border-theme-accent { border-color: var(--color-accent); }

/* Semantic color utilities */
.bg-theme-success { background-color: var(--color-success); }
.text-theme-success { color: var(--color-success); }
.border-theme-success { border-color: var(--color-success); }

.bg-theme-warning { background-color: var(--color-warning); }
.text-theme-warning { color: var(--color-warning); }
.border-theme-warning { border-color: var(--color-warning); }
.ring-theme-warning { --tw-ring-color: var(--color-warning); }

/* Warning hover state - light orange background */
.bg-theme-warning-hover:hover { background-color: var(--color-warning-hover); } /* orange-50 equivalent */

.bg-theme-error { background-color: var(--color-error); }
.text-theme-error { color: var(--color-error); }
.border-theme-error { border-color: var(--color-error); }

/* Typography utilities */
.font-theme-base { font-family: var(--font-family-base); }
.font-theme-mono { font-family: var(--font-family-mono); }
.text-badge { font-size: var(--font-size-badge); }

/* Border radius utilities */
.rounded-theme-base { border-radius: var(--border-radius-base); }
.rounded-theme-sm { border-radius: var(--border-radius-sm); }
.rounded-theme-lg { border-radius: var(--border-radius-lg); }

/* Shadow utilities */
.shadow-theme-sm { box-shadow: var(--shadow-sm); }
.shadow-theme-base { box-shadow: var(--shadow-base); }
.shadow-theme-md { box-shadow: var(--shadow-md); }
.shadow-theme-lg { box-shadow: var(--shadow-lg); }

/* Transition utilities */
.transition-theme-base { transition: all var(--transition-base); }
.transition-theme-fast { transition: all var(--transition-fast); }
.transition-theme-slow { transition: all var(--transition-slow); }

/* Theme text utilities */
.text-theme { color: var(--theme-text-color); }
.text-theme-muted { color: var(--theme-text-muted); }
.text-theme-tertiary { color: var(--theme-text-tertiary); }

/* Theme text hover utilities */
.text-theme-text-color-hover:hover { color: var(--theme-text-color); }

/* Theme background utilities */
.bg-theme { background-color: var(--theme-background-color); }
.bg-theme-muted { background-color: var(--theme-background-muted); }
.bg-theme-subtle { background-color: var(--theme-background-subtle); }

/* Theme background hover utilities */
.bg-theme-muted-hover:hover { background-color: var(--theme-hover-bg); }
.bg-gray-200-hover:hover { background-color: var(--color-neutral-200); }

/* Theme border utilities */
.border-theme { border-color: var(--theme-border-color); }

/* Disabled state utilities */
.bg-theme-disabled { background-color: var(--theme-disabled-bg); }
.text-theme-disabled { color: var(--theme-disabled-text); }
.border-theme-disabled { border-color: var(--theme-disabled-bg); }

/* Status: Approved/Published - Green */
.status-approved {
  color: var(--status-approved-text);
  background-color: var(--status-approved-bg);
  border-color: var(--status-approved-border);
}
.bg-status-approved { background-color: var(--status-approved-bg); }
.bg-status-approved-solid { background-color: var(--status-approved-solid); }
.text-status-approved { color: var(--status-approved-text); }
.border-status-approved { border-color: var(--status-approved-border); }

/* Status: Pending/In Review - Yellow */
.status-pending {
  color: var(--status-pending-text);
  background-color: var(--status-pending-bg);
  border-color: var(--status-pending-border);
}
.bg-status-pending { background-color: var(--status-pending-bg); }
.bg-status-pending-solid { background-color: var(--status-pending-solid); }
.text-status-pending { color: var(--status-pending-text); }
.border-status-pending { border-color: var(--status-pending-border); }

/* Status: Ready - Blue */
.status-ready {
  color: var(--status-ready-text);
  background-color: var(--status-ready-bg);
  border-color: var(--status-ready-border);
}
.bg-status-ready { background-color: var(--status-ready-bg); }
.text-status-ready { color: var(--status-ready-text); }
.border-status-ready { border-color: var(--status-ready-border); }

/* Status: Draft - Gray */
.status-draft {
  color: var(--status-draft-text);
  background-color: var(--status-draft-bg);
  border-color: var(--status-draft-border);
}
.bg-status-draft { background-color: var(--status-draft-bg); }
.text-status-draft { color: var(--status-draft-text); }
.border-status-draft { border-color: var(--status-draft-border); }

/* Status: Changes Requested - Red */
.status-changes {
  color: var(--status-changes-text);
  background-color: var(--status-changes-bg);
  border-color: var(--status-changes-border);
}
.bg-status-changes { background-color: var(--status-changes-bg); }
.text-status-changes { color: var(--status-changes-text); }
.border-status-changes { border-color: var(--status-changes-border); }

/* Status: Archived - Dark */
.bg-status-archived { background-color: var(--status-archived-solid); }
.bg-status-archived-light { background-color: var(--status-archived-light); }

/* Status: Draft - Solid (for badge default variant) */
.bg-status-draft-solid { background-color: var(--status-draft-solid); }

/* Status: In Review - Solid (for badge default variant) */
.bg-status-in-review-solid { background-color: var(--status-in-review-solid); }

/* Status: Pending Approval - Solid (for badge default variant) */
.bg-status-pending-approval-solid { background-color: var(--status-pending-approval-solid); }

/* Status: Changes Requested - Solid (for badge default variant) */
.bg-status-changes-solid { background-color: var(--status-changes-solid); }

/* Status: Approved - Solid (for badge default variant) */
.bg-status-approval-solid { background-color: var(--status-approval-solid); }

/* Status: Published Internal - Solid (for badge default variant) */
.bg-status-published-internal-solid { background-color: var(--status-published-internal-solid); }

/* Status: Resolved - Green */
.bg-status-resolved { background-color: var(--status-resolved-bg); }
.text-status-resolved { color: var(--status-resolved-text); }

/* === Tab Colors === */
/* Active tab - uses primary theme color for agency branding */
.border-tab-active { border-color: var(--color-primary); }
.text-tab-active { color: var(--color-primary); }
.bg-tab-badge { background-color: var(--color-primary); }

/* Inactive tab - muted/neutral colors */
.text-tab-inactive { color: var(--theme-text-muted); }
.text-tab-inactive-hover:hover { color: var(--theme-text-color); }
.border-tab-inactive-hover:hover { border-color: var(--color-neutral-300); }

/* Resolved/secondary tab - neutral styling */
.border-tab-resolved { border-color: var(--color-neutral-500); }
.text-tab-resolved { color: var(--color-neutral-600); }
.bg-tab-badge-muted { background-color: var(--color-neutral-200); }
.text-tab-badge-muted { color: var(--color-neutral-600); }

/* === Component Patterns === */

/* Button variants using theme colors */
.btn-primary {
  background-color: var(--color-primary);
  color: white;
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-2) var(--spacing-4);
  font-family: var(--font-family-base);
  transition: var(--transition-base);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-2) var(--spacing-4);
  font-family: var(--font-family-base);
  transition: var(--transition-base);
}

.btn-secondary:hover {
  background-color: var(--color-primary);
  color: white;
}

/* Card components */
.card-theme {
  background-color: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-base);
  padding: var(--spacing-6);
  font-family: var(--font-family-base);
}

/* Input components */
.input-theme {
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-2) var(--spacing-3);
  font-family: var(--font-family-base);
  transition: var(--transition-base);
}

.input-theme:focus {
  border-color: var(--color-primary);
  outline: 2px solid var(--color-primary-200);
  outline-offset: 2px;
}

/* === Avatar Colors === */
/* Primary avatar (odd rows in lists) */
.bg-avatar-primary { background-color: var(--avatar-color-primary); }
/* Secondary avatar (even rows in lists) */
.bg-avatar-secondary { background-color: var(--avatar-color-secondary); }
/* Resolved/muted avatar state */
.bg-avatar-resolved { background-color: var(--avatar-color-resolved); }

/* === Alert Colors (for table row highlighting, etc.) === */
/* Error/danger subtle background (red-50 equivalent) */
.bg-theme-alert-error-subtle { background-color: var(--status-changes-bg); }
/* Warning subtle background (yellow-50 equivalent) */
.bg-theme-alert-warning-subtle { background-color: var(--status-pending-bg); }

/* === Interactive Hover States === */
/* Use with Tailwind's hover: prefix, e.g., hover:bg-theme-hover */
.bg-theme-hover { background-color: var(--theme-hover-bg); }

/* === SVG Logo Placeholder === */
/* Circle fill uses primary theme color */
.svg-logo-circle {
  fill: var(--color-primary, #1976d2);
}

/* Text uses heading font with relative sizing */
.svg-logo-text {
  fill: white;
  font-family: var(--font-family-heading, 'Work Sans', sans-serif);
  font-size: 1.25rem;
  font-weight: bold;
}

/* === Badge Utilities === */
/* Plan badges - for Premium/Enterprise/Starter/Basic plans */
.badge-premium {
  background-color: color-mix(in srgb, var(--color-primary) 10%, white);
  color: color-mix(in srgb, var(--color-primary) 80%, black);
}

.badge-basic {
  background-color: var(--status-approved-bg);
  color: var(--status-approved-text);
}

/* Feature category badges */
.badge-category-premium {
  background-color: color-mix(in srgb, var(--color-primary) 10%, white);
  color: color-mix(in srgb, var(--color-primary) 80%, black);
}

.badge-category-custom {
  background-color: var(--status-pending-bg);
  color: var(--status-pending-text);
}

.badge-category-default {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-700);
}