/**
 * 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. */
/* A single-line select clips its selected text (WCAG 1.4.10, SAF-J28-06). WebKit counts the full text of a long
   selected option as the select's scrollable overflow even though the box stays its set width, and that overflow
   widened the whole page at 320 px. The full option text stays in the accessibility tree; list boxes (multiple/size)
   keep their own scrolling. */
select:not([multiple]):not([size]) {
  overflow: hidden;
  text-overflow: ellipsis;
}
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;
}

/*
 * Admin portal scroll regions contain their own visually hidden text (FF-J30-02 / EDGE-J30-03 follow-up).
 * Below md the document scrolls instead of <main>. A horizontal scroll region that isn't positioned doesn't clip
 * absolutely positioned descendants such as .sr-only row-action labels, so at 320px they widened the document
 * (the Tags list reached 723px). Positioning the region makes it their containing block, so its overflow clips them.
 */
[data-admin-main] .overflow-x-auto,
[data-admin-main] .overflow-auto {
  position: relative;
}

/* 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-*)].
 */
/* Below 640px the workflow panel and the cards nested in it each give back 8px a side (SAF-J09-07, WCAG 1.4.10):
 * at 320px the AI drafting card's sources chips and Generate button were clipped. */
[data-authoring-card],
[data-supporting-card] {
  padding: var(--spacing-4); /* 16px */
}

@media (min-width: 640px) {
  [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-4); /* 16px */
}

@media (min-width: 640px) {
  .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); }

/* === Admin Portal sidebar width (set by PapaiShell.sidebarResize; the default is the minimum) === */
@media (min-width: 768px) {
  #admin-portal-sidebar { width: clamp(16rem, var(--admin-sidebar-width, 16rem), 30rem); }
}

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

/* Visible focus on native radios in Safari (WCAG 2.4.7, SAF-J25-01).
   WebKit doesn't match :focus-visible on a radio chosen with the arrow keys, so the browser's own focus ring
   disappears as soon as the user moves within a group. Radios that draw their own ring (a focus:ring width utility;
   a ring colour alone such as focus:ring-theme-primary draws nothing) or that are visually hidden (sr-only cards draw
   focus on their label) keep their styling. */
input[type="radio"]:focus:not(.sr-only, [class~="focus:ring"], [class~="focus:ring-1"], [class~="focus:ring-2"], [class~="focus:ring-4"]) {
  outline: var(--focus-outline-width) solid var(--color-primary);
  outline-offset: var(--focus-outline-offset);
}

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