/**
 * 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-on-primary: #ffffff;   /* Text on primary backgrounds (WCAG AA 4.6:1 vs #1976d2); dynamic.css recomputes per org */
  --color-on-primary-hover: #ffffff; /* Text on the primary hover fill; dynamic.css recomputes per org */
  /* Contrast references for readable theme-editor previews, not saved brand colors. */
  --theme-preview-contrast-dark: #000000;
  --theme-preview-contrast-light: #ffffff;
  --color-secondary: #2e5266;    /* Iowa dark blue - default secondary */
  --theme-secondary-on-color: #ffffff; /* Foreground on the default dark secondary fill */
  --theme-secondary-on-hover: #ffffff; /* Foreground on the default dark secondary hover fill */
  --color-accent: #0f7173;       /* Iowa teal - default accent */

  /* === Semantic Colors === */
  --color-success: #2e7d32;      /* Iowa green - success states */
  --color-warning: #c2410c;      /* Iowa orange - warning states (WCAG AA: 6.36:1) */
  --color-error: #d32f2f;        /* Iowa red - error states */
  --color-error-hover: #b71c1c;  /* Iowa red hover - darker error state */
  --color-info: #0277bd;         /* Info blue (WCAG AA: 4.54:1) */

  /* === Extra Colors (customizable per organization) === */
  --color-extra-1: #1976d2;      /* Extra color 1 - default Iowa blue */
  --color-extra-2: #2e5266;      /* Extra color 2 - default Iowa dark blue */
  --color-extra-3: #0f7173;      /* Extra color 3 - default Iowa teal */
  --color-extra-4: #4db6ac;      /* Extra color 4 - default Iowa light teal */
  --color-extra-5: #2e7d32;      /* Extra color 5 - default Iowa green */
  --color-extra-6: #c0ca33;      /* Extra color 6 - default Iowa light green */
  --color-extra-7: #c2410c;      /* Extra color 7 - default Iowa orange (WCAG AA) */
  --color-extra-8: #d32f2f;      /* Extra color 8 - default Iowa red */

  /* Info state colors (Tailwind blue-* scale) */
  --color-info-50: #eff6ff;      /* Light info background */
  --color-info-200: #bfdbfe;     /* Info border */
  --color-info-400: #60a5fa;     /* Info icon */
  --color-info-800: #1e40af;     /* Info text */

  /* Derived info state colors */
  --color-info-subtle: var(--color-info-50);
  --color-info-border: var(--color-info-200);
  --color-info-icon: var(--color-info-400);
  --color-info-text: var(--color-info-800);

  /* === 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 */
  --font-size-xs: 0.75rem;        /* 12px - matches Tailwind text-xs */
  --font-size-sm: 0.875rem;       /* 14px - matches Tailwind text-sm */
  --font-size-base: 1rem;         /* 16px - matches Tailwind text-base */
  --font-size-lg: 1.125rem;       /* 18px - matches Tailwind text-lg */

  /* === 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);

  /* Primary subtle background (light tint for info boxes, highlights) */
  --color-primary-subtle: color-mix(in srgb, var(--color-primary) 10%, white);
  --color-primary-subtle-fallback: #e3f2fd;  /* Fallback for older browsers */

  /* Primary text ON the primary-subtle surface (EDGE-J09-04, WCAG 1.4.3). The brand colour itself is only
     ~4.0:1 on its own 10% tint (default #1976d2) and falls to ~1.7:1 for light agency primaries, so text drawn
     on --color-primary-subtle uses this darker mix instead. 55% brand / 45% black stays >= 5.2:1 on the tint
     for every primary up to white-ish after dynamic.css darkening (9.1:1 for the default theme). */
  --color-primary-on-subtle: color-mix(in srgb, var(--color-primary) 55%, black);
  --color-primary-on-subtle-fallback: #0e4174;  /* Fallback for older browsers (55% of #1976d2 over black) */

  /* Primary border subtle (for hover states on bordered elements) */
  --color-primary-border-subtle: color-mix(in srgb, var(--color-primary) 40%, white);
  --color-primary-border-subtle-fallback: #90caf9;  /* Fallback for older browsers */

  /* === Theme Text Colors === */
  --theme-text-color: #374151;      /* Primary text - gray-700 */
  --theme-text-muted: #636b74;      /* Secondary/muted text - WCAG AA compliant (5.02:1 on #f7f6f8) */
  --theme-text-tertiary: #656d76;   /* Third-level text - WCAG AA compliant (4.87:1 on #f7f6f8) */
  --theme-placeholder-color: #656d76; /* Input placeholder text - WCAG AA compliant (5.3:1 on white, 4.87:1 on #f7f6f8) */
  --theme-avatar-text-dark: #0f172a; /* Dark text for avatar initials on light backgrounds - slate-900, WCAG AA compliant (4.85:1 on #3b82f6) */

  /* === 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 (decorative only, 1.2:1 on white) */
  /* Boundary of form controls (input, select, textarea) where the border is the only cue (EDGE-S07,
     WCAG 1.4.11): 3.7:1 on white, 3.4:1 on --theme-background-muted / --theme-background-subtle, 3.2:1 on the
     default primary-subtle tint. Neutral, so it is not agency-themed. Do not use it on cards or dividers. */
  --color-control-border: #80868f;

  /* === Sidebar Colors === */
  --theme-sidebar-bg: #111827;            /* Sidebar background - neutral-900 */
  --theme-sidebar-border: #374151;        /* Sidebar border - neutral-700 */
  --theme-sidebar-accent: #1f2937;        /* Sidebar accent elements - neutral-800 */
  --theme-sidebar-accent-hover: #374151;  /* Sidebar accent hover - neutral-700 */
  --theme-sidebar-hover: #1f2937;         /* Sidebar hover state - neutral-800 */
  --theme-sidebar-active: #1f2937;        /* Sidebar active state - neutral-800 */
  --theme-sidebar-text-muted: #9ca3af;    /* Sidebar muted text - gray-400 for WCAG AA contrast */

  /* === Tooltip Colors === */
  --theme-tooltip-bg: #1f2937;           /* Tooltip background - gray-800 */
  --theme-tooltip-text: #ffffff;         /* Tooltip text - white */

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

  /* === Data Visualization (PAP-273 activity analytics) ===
     Fixed, not agency-themed: series colors carry identity across agencies the way
     status colors carry state. Validated on white in tile order 3,4,1,2,5 and as the
     5+2 search stack (dataviz validator: every adjacent pair passes CVD and
     normal-vision separation). Slots 4 and 5 are under 3:1 contrast, so values are
     always also in tooltips, bar labels, and the Table tab. */
  --chart-series-1: #2a78d6;     /* blue: staff views */
  --chart-series-2: #eb6834;     /* orange: public views, searches that found nothing */
  --chart-series-3: #6250d6;     /* violet: sign-ins */
  --chart-series-4: #e87ba4;     /* magenta: active people */
  --chart-series-5: #1baf7a;     /* aqua: searches, searches that found something */
  --chart-grid: #e5e7eb;         /* hairline gridlines (same as --theme-border-color) */
  --chart-axis: #d1d5db;         /* baseline */
  --chart-surface: #ffffff;      /* gap and ring color between marks */

  /* === 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: #c2410c;

  /* Approved - Green (solid for badges, different from published) */
  --status-approval-solid: #15803d; /* 5.02:1 with white (WCAG AA) */

  /* 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;

  /* === Comment Highlighting Colors === */
  /* General comment highlighting (yellow) */
  --comment-highlight-bg: rgba(255, 235, 59, 0.3);
  --comment-highlight-hover-bg: rgba(255, 235, 59, 0.5);
  --comment-highlight-border: #f59e0b;

  /* Change request highlighting (red) */
  --comment-request-bg: rgba(239, 68, 68, 0.2);
  --comment-request-hover-bg: rgba(239, 68, 68, 0.3);
  --comment-request-border: #dc2626;

  /* Interactive effects */
  --comment-pulse-color: rgba(59, 130, 246, 0.7);
  --comment-pulse-transparent: rgba(59, 130, 246, 0);

  /* Hover sync highlighting (blue) - when hovering comment item in panel */
  --comment-hover-sync-bg: rgba(59, 130, 246, 0.4);
  --comment-hover-sync-ring: rgba(59, 130, 246, 0.3);
  --comment-hover-sync-border: #3b82f6;

  /* Comment item states */
  --comment-item-hover-bg: rgba(59, 130, 246, 0.05);
  --comment-item-active-bg: rgba(59, 130, 246, 0.1);
  --comment-item-active-border: #3b82f6;
  --comment-item-selected-bg: rgba(254, 243, 199, 1);  /* amber-100 */
  --comment-item-selected-ring: #f59e0b;  /* amber-500 */

  /* Comment panel scrollbar */
  --scrollbar-track-bg: #f1f1f1;
  --scrollbar-thumb-bg: #888888;
  --scrollbar-thumb-hover-bg: #555555;

  /* === 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 */

  /* === Layout Widths === */
  --max-width-container: 1920px;  /* Maximum width for page-level containers */

  /* === 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);

  /* === Focus & forced colours === */
  --focus-outline-width: 2px;            /* Transparent focus outline that forced colours paint */
  --focus-outline-offset: 2px;           /* Gap between that outline and the control */
  --forced-colors-border-width: 1px;     /* Boundary given to filled buttons in forced colours */

  /* === Overlays & dialogs === */
  --overlay-backdrop: rgb(0 0 0 / 0.5);  /* Scrim behind modal dialogs */
  --dialog-width-md: 30rem;              /* 480px - standard dialog width */

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

/* Keep script-toggled panels hidden even if a future layout utility sets display. */
[hidden] {
  display: none !important;
}

/* === 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); }
.focus\:ring-theme-primary:focus { --tw-ring-color: var(--color-primary); }

.text-theme-on-primary { color: var(--color-on-primary); }
/* Primary fills paired with legacy text-white follow the computed on-primary color, so light brand
   colors get dark text (>= 4.5:1) without touching every template. */
.bg-theme-primary.text-white { color: var(--color-on-primary); }
.bg-theme-primary-hover.text-white:hover { color: var(--color-on-primary-hover); }

/* Primary text on the primary-subtle surface (EDGE-J09-04, WCAG 1.4.3).
   Any element that sets bg-theme-primary-subtle (also as a hover/focus variant) and text-theme-primary, or
   that contains a text-theme-primary descendant, gets --color-primary-on-subtle automatically, so the pair
   is fixed once here rather than in every template. svg is excluded: icons only need 3:1 and keep the brand
   colour. This block sits before the text-theme-primary-hover utility so an explicit hover colour still wins. */
.bg-theme-primary-subtle.text-theme-primary,
.bg-theme-primary-subtle .text-theme-primary:not(svg),
.bg-theme-primary-subtle.text-tab-active,
.bg-theme-primary-subtle .text-tab-active,
.hover\:bg-theme-primary-subtle:hover.text-theme-primary,
.hover\:bg-theme-primary-subtle:hover .text-theme-primary:not(svg),
.focus\:bg-theme-primary-subtle:focus.text-theme-primary,
.focus\:bg-theme-primary-subtle:focus .text-theme-primary:not(svg) {
  color: var(--color-primary-on-subtle);
}

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

/* Primary subtle background utility */
@supports (color: color-mix(in srgb, red, blue)) {
  .bg-theme-primary-subtle { background-color: var(--color-primary-subtle); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  :root { --color-primary-on-subtle: var(--color-primary-on-subtle-fallback); }
  .bg-theme-primary-subtle { background-color: var(--color-primary-subtle-fallback); }
}

/* Primary border subtle utility (with hover variant) */
@supports (color: color-mix(in srgb, red, blue)) {
  .border-theme-primary-subtle { border-color: var(--color-primary-border-subtle); }
}
@supports not (color: color-mix(in srgb, red, blue)) {
  .border-theme-primary-subtle { border-color: var(--color-primary-border-subtle-fallback); }
}

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

.bg-theme-secondary-hover:hover { background-color: var(--theme-secondary-hover, 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); }

/* Accent hover state - darker teal */
.text-theme-accent-hover:hover { color: color-mix(in srgb, var(--color-accent) 80%, black); }

/* 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); }

/* Success hover state - darker green */
.text-theme-success-hover:hover { color: color-mix(in srgb, var(--color-success) 80%, black); }

.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); }
.ring-theme-error { --tw-ring-color: var(--color-error); }

/* Error hover state - darker red background */
.bg-theme-error-hover:hover { background-color: var(--color-error-hover); }
/* Error text hover state - darker red text */
.text-theme-error-hover:hover { color: var(--color-error-hover); }

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

/* Info state utilities */
.bg-theme-info-subtle { background-color: var(--color-info-subtle); }
.border-theme-info-border { border-color: var(--color-info-border); }
.text-theme-info-icon { color: var(--color-info-icon); }
.text-theme-info-text { color: var(--color-info-text); }

/* Extra color utilities (1-8) */
.bg-extra-1 { background-color: var(--color-extra-1); }
.text-extra-1 { color: var(--color-extra-1); }
.border-extra-1 { border-color: var(--color-extra-1); }

.bg-extra-2 { background-color: var(--color-extra-2); }
.text-extra-2 { color: var(--color-extra-2); }
.border-extra-2 { border-color: var(--color-extra-2); }

.bg-extra-3 { background-color: var(--color-extra-3); }
.text-extra-3 { color: var(--color-extra-3); }
.border-extra-3 { border-color: var(--color-extra-3); }

.bg-extra-4 { background-color: var(--color-extra-4); }
.text-extra-4 { color: var(--color-extra-4); }
.border-extra-4 { border-color: var(--color-extra-4); }

.bg-extra-5 { background-color: var(--color-extra-5); }
.text-extra-5 { color: var(--color-extra-5); }
.border-extra-5 { border-color: var(--color-extra-5); }

.bg-extra-6 { background-color: var(--color-extra-6); }
.text-extra-6 { color: var(--color-extra-6); }
.border-extra-6 { border-color: var(--color-extra-6); }

.bg-extra-7 { background-color: var(--color-extra-7); }
.text-extra-7 { color: var(--color-extra-7); }
.border-extra-7 { border-color: var(--color-extra-7); }

.bg-extra-8 { background-color: var(--color-extra-8); }
.text-extra-8 { color: var(--color-extra-8); }
.border-extra-8 { border-color: var(--color-extra-8); }

/* Group hover text variants for extra colors */
.group:hover .group-hover\:text-extra-4 { color: var(--color-extra-4) !important; }
.group:hover .group-hover\:text-extra-5 { color: var(--color-extra-5) !important; }
.group:hover .group-hover\:text-extra-7 { color: var(--color-extra-7) !important; }
.group:hover .group-hover\:text-extra-8 { color: var(--color-extra-8) !important; }

/* 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); }

/* Layout width utilities */
.max-w-container { max-width: var(--max-width-container); }

/* 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); }

/* Placeholders: Tailwind's default (#9ca3af) is 2.5:1 on white, below WCAG AA. theme.css loads after
   tailwind.css, so this replaces the preflight rule everywhere. */
input::placeholder,
textarea::placeholder { color: var(--theme-placeholder-color); opacity: 1; }

/* Dropdowns: the browser's chevron sits hard against the right edge. Draw our own, inset
   ~1rem, and leave room for it. Selects that already draw an icon use .appearance-none
   and are left alone; the :not() selectors also outrank Tailwind padding utilities. */
select:not([multiple]):not([size]):not(.appearance-none) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--theme-text-muted) 50%),
    linear-gradient(135deg, var(--theme-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9375rem) 50%;
  background-size: 0.3125rem 0.3125rem;
  background-repeat: no-repeat;
}
select:not([multiple]):not([size]):not(.appearance-none):disabled {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--theme-disabled-text) 50%),
    linear-gradient(135deg, var(--theme-disabled-text) 50%, transparent 50%);
}
/* Forced colours (Windows High Contrast) drop gradient backgrounds, which left no dropdown cue:
   bring back the native, system-coloured arrow there. */
@media (forced-colors: active) {
  select:not([multiple]):not([size]):not(.appearance-none),
  select:not([multiple]):not([size]):not(.appearance-none):disabled {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
  }
}
.text-theme-avatar-dark { color: var(--theme-avatar-text-dark); }

/* 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-bg-muted and bg-theme-bg-subtle are generated by Tailwind from tailwind.config.js */

/* 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); }
.border-control { border-color: var(--color-control-border); }

/* Control boundaries (EDGE-S07, WCAG 1.4.11). The border is the only cue that shows where an input, select or
   textarea is, so it needs 3:1 against the page. Cards, tables and dividers keep the decorative border-theme
   colour; only these form controls are darkened, wherever the template gave them a decorative border colour
   (border-theme, border-theme-border[-color|-muted], Tailwind gray/neutral 200-300, or the token used as an
   arbitrary value).
   - Specificity is (0,1,1), above the utilities (0,1,0) and below every focus rule (focus:border-*, .input-theme:focus,
     .input-focus-theme:focus are (0,2,0)), so focus and error borders are untouched.
   - An explicit state colour on the same control (error, status, primary, disabled) keeps winning: those classes are
     excluded as exact class tokens ([class~=]), so focus:/hover: variants such as focus:border-theme-primary do not
     match and the control keeps the control border until focused.
   - A control with a bare border (`border`, `border-2` or `border-4`, no colour class, so Tailwind's preflight
     #e5e7eb) gets it through the zero-specificity :where() rule below. theme.css loads after tailwind.css, so it beats
     preflight by order, while any border colour utility (0,1,0) still wins.
   - Disabled controls are exempt from 1.4.11 and keep the light border. Native checkboxes and radios ignore
     border-color and are drawn by the browser (4.5:1 or better), so they are not listed. */
:is(input, select, textarea):is(
  .border-theme,
  .border-theme-border,
  .border-theme-border-color,
  .border-theme-border-muted,
  .border-gray-200,
  .border-gray-300,
  .border-neutral-200,
  .border-neutral-300,
  [class*="--color-neutral-300"],
  [class*="--theme-border-color"]
):where(:not(
  :disabled, [type="checkbox"], [type="radio"], [type="hidden"], [type="image"],
  [class~="border-theme-error"], [class~="border-theme-primary"], [class~="border-theme-disabled"],
  [class~="border-status-error"], [class~="border-status-changes"], [class~="border-status-changes-border"],
  [class~="border-status-changes-solid"], [class~="border-status-approved"], [class~="border-status-pending"],
  [class~="border-status-pending-border"], [class~="border-status-ready"], [class~="border-status-draft"],
  [class~="border-status-draft-border"], [class~="border-red-300"], [class~="border-red-500"],
  [class~="border-red-600"]
)) {
  border-color: var(--color-control-border);
}
:where(input, select, textarea):where(.border, .border-2, .border-4):where(
  :not(:disabled, [type="checkbox"], [type="radio"], [type="hidden"], [type="image"])
) {
  border-color: var(--color-control-border);
}

/* 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); }

/* Tooltip utilities */
.bg-theme-tooltip { background-color: var(--theme-tooltip-bg); }
.text-theme-tooltip { color: var(--theme-tooltip-text); }
.border-t-theme-tooltip { border-top-color: var(--theme-tooltip-bg); }

/* === Glossary Tooltip Component ===
 * Floating definition card shown on hover over [data-glossary-term] spans.
 * Create the element via JS and append to <body> so it never disrupts layout.
 * Usage:
 *   JS: el.classList.add('glossary-tooltip')
 *   JS: el.classList.add('visible')   ← to show
 *   JS: el.classList.remove('visible') ← to hide
 */
.glossary-tooltip {
    position: fixed;
    z-index: 9999;
    background-color: var(--theme-tooltip-bg);
    color: var(--theme-tooltip-text);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-2) var(--spacing-3);
    font-family: var(--font-family-base);
    font-size: 0.875rem;
    line-height: 1.5;
    max-width: 320px;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.glossary-tooltip.visible {
    opacity: 1;
}

/* Term heading inside the tooltip */
.glossary-tooltip-term {
    font-weight: 700;
    margin-bottom: var(--spacing-1);
    color: var(--color-primary-300, #64b5f6);
}

/* Inline underline shown on [data-glossary-term] spans in rendered content */
.glossary-term,
[data-glossary-term] {
    border-bottom: 2px dashed var(--color-primary);
    cursor: help;
    color: inherit;
}

/* 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); }

/* === Rich Text (onboarding instructions and tips) ===
   Formatted text from the small TinyMCE editor: paragraphs, lists and links. Tailwind's
   preflight removes list markers and spacing, so restore them here with tokens. */
.rich-text > * + * { margin-top: 0.5rem; }
.rich-text ul { list-style: disc; padding-left: 1.25rem; }
.rich-text ol { list-style: decimal; padding-left: 1.25rem; }
.rich-text li + li { margin-top: 0.25rem; }
.rich-text a { color: var(--color-primary); text-decoration: underline; }
.rich-text a:hover { color: var(--color-primary-hover); }
.rich-text strong, .rich-text b { font-weight: 600; }
.rich-text em, .rich-text i { font-style: italic; }

/* === 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);
}

/*
 * Document authoring workflow cards.
 * Padding lives here (not arbitrary Tailwind classes) so it always ships with
 * theme.css and does not depend on a Tailwind rebuild of p-[var(--spacing-*)].
 */
[data-authoring-card],
[data-supporting-card] {
  padding: var(--spacing-6); /* 24px */
}

@media (min-width: 768px) {
  [data-authoring-card],
  [data-supporting-card] {
    padding: var(--spacing-8); /* 32px */
  }
}

.authoring-workflow-panel {
  padding: var(--spacing-6); /* 24px */
}

@media (min-width: 768px) {
  .authoring-workflow-panel {
    padding: var(--spacing-8); /* 32px */
  }
}

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

/* Disabled controls are exempt from 1.4.11 and keep the light decorative border (as with the rules above). */
.input-theme:disabled {
  border-color: var(--theme-border-color);
}

.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); }
.bg-theme-alert-error-subtle-hover:hover { background-color: var(--status-changes-bg); }
.bg-theme-alert-error-subtle-focus:focus { 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); }

/* === Sidebar Utilities === */
.bg-theme-sidebar { background-color: var(--theme-sidebar-bg); }
.border-theme-sidebar-border { border-color: var(--theme-sidebar-border); }
.bg-theme-sidebar-accent { background-color: var(--theme-sidebar-accent); }
.bg-theme-sidebar-accent-hover:hover { background-color: var(--theme-sidebar-accent-hover); }
.bg-theme-sidebar-hover:hover { background-color: var(--theme-sidebar-hover); }
.bg-theme-sidebar-active { background-color: var(--theme-sidebar-active); }
.text-theme-sidebar-muted { color: var(--theme-sidebar-text-muted); }
.text-theme-sidebar-hover:hover,
.text-theme-sidebar-hover:focus { color: var(--color-on-primary); }

/* Ring offset for sidebar focus states */
.focus\:ring-offset-theme-sidebar:focus {
  --tw-ring-offset-color: var(--theme-sidebar-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: var(--color-primary-on-subtle);
}

.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: var(--color-primary-on-subtle);
}

.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);
}

/* === File Upload Input Utilities === */
/* File upload button styling with theme colors */
.file-input-theme {
  color: var(--theme-text-muted);
}

.file-input-theme::file-selector-button {
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid var(--theme-border-color);
  font-size: 0.875rem;
  font-weight: 500;
  background-color: white;
  color: var(--theme-text-color);
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.file-input-theme::file-selector-button:hover {
  background-color: var(--theme-bg-muted);
  border-color: var(--color-primary);
}

/* === Compound Focus Utilities === */

/* Combined focus ring and border for input fields.
   The focus utilities below draw their ring with box-shadow, which forced colours (Windows High Contrast)
   drop; the transparent outline is invisible normally but is painted in a system colour there, so focus
   stays visible (WCAG 2.4.7). Do not remove the outline when the only ring is a box-shadow. */
.input-focus-theme:focus {
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
  border-color: var(--color-primary);
  --tw-ring-offset-shadow: 0 0 0 0px #fff;
  --tw-ring-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* General purpose focus styling (ring + border) */
.focus-theme:focus {
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
  --tw-ring-offset-shadow: 0 0 0 2px #fff;
  --tw-ring-shadow: 0 0 0 4px var(--color-primary);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* === Button Variant Classes === */

/* Primary button - uses theme primary color with white text */
.btn-theme-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--border-radius-base);
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  transition: var(--transition-base);
  cursor: pointer;
}

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

.btn-theme-primary:focus {
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
  --tw-ring-offset-shadow: 0 0 0 2px #fff;
  --tw-ring-shadow: 0 0 0 4px var(--color-primary);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.btn-theme-primary:disabled {
  background-color: var(--theme-disabled-bg);
  color: var(--theme-disabled-text);
  cursor: not-allowed;
}

/* Secondary/outline button - transparent with primary border/text */
.btn-theme-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-primary);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--border-radius-base);
  color: var(--color-primary);
  background-color: transparent;
  transition: var(--transition-base);
  cursor: pointer;
}

.btn-theme-secondary:hover {
  background-color: var(--color-primary-subtle);
  color: var(--color-primary-on-subtle);
}

.btn-theme-secondary:focus {
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
  --tw-ring-offset-shadow: 0 0 0 2px #fff;
  --tw-ring-shadow: 0 0 0 4px var(--color-primary);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.btn-theme-secondary:disabled {
  border-color: var(--theme-disabled-bg);
  color: var(--theme-disabled-text);
  cursor: not-allowed;
}

/* Ghost/text-only button - minimal styling */
.btn-theme-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--border-radius-base);
  color: var(--color-primary);
  background-color: transparent;
  transition: var(--transition-base);
  cursor: pointer;
}

.btn-theme-ghost:hover {
  background-color: var(--theme-hover-bg);
}

.btn-theme-ghost:focus {
  outline: var(--focus-outline-width) solid transparent;
  outline-offset: var(--focus-outline-offset);
  --tw-ring-offset-shadow: 0 0 0 2px #fff;
  --tw-ring-shadow: 0 0 0 4px var(--color-primary);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.btn-theme-ghost:disabled {
  color: var(--theme-disabled-text);
  cursor: not-allowed;
}

/* Forced colours replace backgrounds with Canvas, so a filled button without a border would read as bare
   text (WCAG 1.4.11). Give filled theme buttons a boundary there in their own forced text colour
   (currentColor: ButtonText on a button's ButtonFace, LinkText on a link's Canvas), so it always contrasts
   with the background behind it. Normal-mode layout is untouched because the rule only applies in forced
   colours. .btn-theme-primary already keeps a transparent 1px border, which forced colours paint. */
@media (forced-colors: active) {
  :where(button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).bg-theme-primary,
  :where(button, a, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]).bg-theme-error {
    border-width: var(--forced-colors-border-width);
    border-style: solid;
    border-color: currentColor;
  }
}

/* === Badge Variant Classes === */

/* Primary badge - light background with dark text using theme color */
@supports (color: color-mix(in srgb, red, blue)) {
  .badge-theme-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--border-radius-full);
    background-color: var(--color-primary-subtle);
    color: var(--color-primary-on-subtle);
  }
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .badge-theme-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--border-radius-full);
    background-color: var(--color-primary-subtle-fallback);
    color: var(--color-primary-on-subtle-fallback);
  }
}

/* Info badge - informational styling */
.badge-theme-info {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--border-radius-full);
  background-color: var(--color-info-subtle);
  color: var(--color-info-text);
}

/* === Link Variant Classes === */

/* Primary link - standard themed link with hover state */
.link-theme-primary {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition-base);
}

.link-theme-primary:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

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

/* Muted link - subdued link styling */
.link-theme-muted {
  color: var(--theme-text-muted);
  text-decoration: none;
  transition: var(--transition-base);
}

.link-theme-muted:hover {
  color: var(--theme-text-color);
  text-decoration: underline;
}

.link-theme-muted:focus {
  outline: 2px solid var(--theme-text-muted);
  outline-offset: 2px;
}

/* === Skip Link - WCAG 2.4.1 Bypass Blocks / 2.4.7 Focus Visible ===
 *
 * Single source of truth for the keyboard skip navigation link.
 * !important is intentional: the dynamic organization theme CSS loads after
 * theme.css and could otherwise override the focus-reveal pattern.
 */
.skip-link {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  z-index: 9999;
  padding: 0.75rem 1rem;
  background: white;
  color: var(--theme-primary-color);
  font-weight: 500;
  border-radius: 0.375rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  outline: 2px solid var(--theme-primary-color) !important;
  outline-offset: 2px;
  white-space: nowrap;
  text-decoration: none;
}