/**
 * Central color root. All component colors reference these variables.
 * Light theme = :root; dark theme = [data-theme="dark"].
 * `--color-text-on-dark` in light is nav-on-light text (same as `--color-text-main`).
 */

/* Self-hosted Lato (SIL OFL 1.1) — see assets/fonts/OFL.txt */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Lato-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Lato-Bold.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/Lato-Italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/Lato-BoldItalic.woff2') format('woff2');
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The DOCX editor island is a third-party light-DOM bundle that may size pages with
   inline width + padding under the browser default; keep it on content-box.
   Zero specificity, so any box-sizing the editor sets itself still wins. */
:where(navet-docx-editor) *,
:where(navet-docx-editor) *::before,
:where(navet-docx-editor) *::after {
  box-sizing: content-box;
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: var(--color-bg-main);
  color: var(--color-text-main);
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Collaboration popover: elevate the Leptos Portal mount wrapper above the DOCX editor toolbar */
body > div:has([data-collab-portal-root]) {
  position: relative;
  z-index: var(--z-portal);
}

:root {
  /* Semantic mapping (light theme) - nav/sidebar/cards same surface, main distinct */
  --color-bg-nav: #ffffff;
  --color-bg-sidebar: #ffffff;
  --color-bg-main: #f9fafb;
  --color-text-main: #1a1a1a;
  /* Nav/side text on light chrome (same as body text; dark overrides to white). */
  --color-text-on-dark: var(--color-text-main);
  --color-text-on-dark-muted: #4a4a4a;
  --color-border-on-dark: #c5c9ce;
  --color-surface-muted-on-dark: #d4d8dc;
  --color-interactive-hover-on-dark: #e4e8ec;
  --color-accent: #6BA7E5;
  --color-accent-hover: #5a96d4;
  /* Inline/markdown links: darker in light mode for readability */
  --color-link: #1d4ed8;
  --color-link-hover: #1e40af;
  --color-cta: #F2994A;
  --color-cta-hover: #E08B3D;
  --color-success: #16a34a;
  --color-warning-700: #b45309;
  --color-error: #dc2626;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  /* Filled danger surfaces (danger button); --color-danger stays the text/icon colour. */
  --color-danger-solid: #dc2626;
  --color-danger-solid-hover: #b91c1c;
  /* Text/icons on filled CTA (orange) and accent (blue) surfaces: dark ink, >= 4.5:1. */
  --color-on-cta: #1a1a1a;
  --color-on-accent: #0f2a4a;
  /* Secondary action: tinted, clearly quieter than the filled primary. */
  --color-secondary-bg: #dbeafe;
  --color-secondary-hover-bg: #bfdbfe;
  --color-secondary-fg: #1e3a8a;
  /* Success as text (the --color-success fill is too light for text on white). */
  --color-success-text: #15803d;
  --color-button-alt-bg: #ffffff;
  --color-button-alt-border: #8b919a;
  --color-button-alt-hover: #f3f4f6;
  --color-button-disabled-bg: #e5e7eb;
  --color-button-disabled-text: #9ca3af;
  --color-toggle-off-thumb: #6b7280;
  --color-nav-icon: #6b7280;
  --color-nav-icon-hover: #f3f4f6;
  --color-dropdown-bg: #ffffff;
  --color-dropdown-border: #e5e7eb;
  --color-dropdown-item-hover: #f3f4f6;
  --color-dropdown-item-active-bg: #f9fafb;
  --color-card-bg: #ffffff;
  --color-card-border: #e5e7eb;
  --color-card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --header-height: 4.25rem;
  --color-accent-text: #fff;
  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-hint-overlay-bg: rgb(0 0 0 / 74%);
  --color-crop-viewport-bg: #111;
  --color-text-muted: #636b78;
  --color-border: var(--color-card-border);
  --color-surface-raised: #f3f4f6;

  /* Aliases — modules reference these names */
  --color-bg-card: var(--color-card-bg);
  --color-bg-muted: var(--color-surface-raised);
  --color-text: var(--color-text-main);
  --color-danger-bg: var(--color-danger);

  /* Layout tokens */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* Spacing scale */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Motion: short, purposeful transitions (reduced motion zeroes them globally). */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Semantic layout spacing — components own padding/gaps; pages supply content only. */
  --page-padding: var(--space-2);
  --layout-gap: var(--space-2);
  --card-padding: var(--space-2);
  --card-content-gap: var(--space-4);
  --panel-padding: var(--space-2);

  /* Table chrome inset (toolbar, header/body cells). Tight on mobile so filters and
     cells use the card width; desktop keeps the roomier Flowbite inset. */
  --table-inset-x: var(--space-2);
  --table-cell-inset-y: var(--space-3);
  --table-toolbar-inset-y: var(--space-2);
  --table-toolbar-gap-row: var(--space-2);
  --table-toolbar-gap-col: var(--space-2);

  /* Brand aliases (checkbox focus/accent) */
  /* Focus indicator: >= 3:1 against card and page in both themes. */
  --color-focus: #1d4ed8;
  --color-bg-elevated: var(--color-surface-raised);
  --color-accent-strong: var(--color-accent-hover);
  /* Form control boundary: >= 3:1 against card and page (WCAG 1.4.11). */
  --color-input-border: #8b919a;
  --color-input-bg: var(--color-card-bg);
  --color-border-muted: var(--color-card-border);
  --color-surface-muted: var(--color-surface-raised);
  --color-bookmark-active: #a16207;

  /* Semantic tone tokens (badges, banners) */
  --tone-muted-fg: var(--color-text-muted);
  --tone-muted-bg: var(--color-bg-main);
  --tone-muted-border: var(--color-card-border);
  --tone-success-fg: #065f46;
  --tone-success-bg: #d1fae5;
  --tone-success-border: #6ee7b7;
  --tone-warning-fg: #92400e;
  --tone-warning-bg: #fef3c7;
  --tone-warning-border: #fbbf24;
  --tone-danger-fg: #7f1d1d;
  --tone-danger-bg: #fee2e2;
  --tone-danger-border: #fca5a5;
  --tone-info-fg: #1e3a5f;
  --tone-info-bg: #dbeafe;
  --tone-info-border: #93c5fd;
  --tone-notice-fg: #312e81;
  --tone-notice-bg: #e0e7ff;
  --tone-notice-border: #a5b4fc;
  --tone-critical-fg: #fef2f2;
  --tone-critical-bg: #7f1d1d;
  --tone-critical-border: #450a0a;

  /* Unique per-persona accent (border-only identity marker; see STYLING.md). Backs the
     training-media "who's acting" stamp (e2e-tests/src/fixtures/recording.rs) — distinct from
     --tone-*, which buckets by severity, not identity. */
  --role-system-operator: #1d4ed8;
  --role-secondary-system-operator: #1e3a8a;
  --role-document-operator: #047857;
  --role-oidc-role-operator: #312e81;
  --role-organization-operator: #7c3aed;
  --role-training-operator: #15803d;
  --role-data-operator: #b91c1c;
  --role-it-service-operator: #92400e;
  --role-user: #64748b;
  --role-area-owner: #be185d;
  --role-area-manager: #a21caf;
  --role-area-member: #4d7c0f;
  --role-area-visitor: #164e63;
  --role-area-outsider: #581c87;

  /* Typography — one scale for every component (xchecks component_css_literal_guard).
     Lato ships 400 and 700 only, so those are the only two weights. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --font-regular: 400;
  --font-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Shadows */
  --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-fab: 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-drawer: 0 -10px 25px -5px rgba(0, 0, 0, 0.15), 0 -4px 10px -2px rgba(0, 0, 0, 0.05);

  /* Focus rings */
  --focus-ring: 0 0 0 2px var(--color-focus);
  --focus-ring-button: 0 0 0 4px var(--color-focus);

  /* Z-index scale */
  --z-dropdown-overlay: 40;
  --z-dropdown-panel: 50;
  --z-nav: 60;
  /* Above the nav: a fixed dropdown panel opened from the top strip must cover it. */
  --z-dropdown-panel-fixed: 61;
  --z-side-panel-overlay: 54;
  --z-side-panel: 55;
  --z-modal-backdrop: 9998;
  --z-modal: 9999;
  --z-modal-footer: 41;
  /* Unique layers, bottom to top: modal < drawer < FAB. */
  --z-drawer-backdrop: 10000;
  --z-drawer: 10001;
  --z-fab: 10002;
  --z-fab-indicator: 10003;
  --z-portal: 10050;
  --z-assemble-overlay: 10100;
}

/* Desktop card/panel/table padding (single page inset + panel and table inner padding). */
@media (min-width: 640px) {
  :root {
    --card-padding: var(--space-6);
    --panel-padding: var(--space-4);
    --table-inset-x: var(--space-6);
    --table-cell-inset-y: var(--space-4);
    --table-toolbar-inset-y: var(--space-3);
    --table-toolbar-gap-row: var(--space-3);
    --table-toolbar-gap-col: var(--space-4);
  }
}

/* Dark overrides only values that change; pass-through aliases on :root keep working. */
[data-theme="dark"] {
  --color-bg-nav: #1f2937;
  --color-bg-sidebar: #1f2937;
  --color-bg-main: #111827;
  --color-text-main: #E0E6EF;
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: #A3B0C7;
  --color-border-on-dark: #2d3a52;
  --color-surface-muted-on-dark: #202B40;
  --color-interactive-hover-on-dark: #252f45;
  --color-accent: #6BA7E5;
  --color-accent-hover: #5a96d4;
  --color-link: #6BA7E5;
  --color-link-hover: #5a96d4;
  --color-cta: #F2994A;
  --color-cta-hover: #E08B3D;
  --color-success: #22c55e;
  --color-warning-700: #f59e0b;
  --color-error: #f87171;
  --color-danger: #f87171;
  --color-danger-hover: #fca5a5;
  --color-danger-solid: #b91c1c;
  --color-danger-solid-hover: #991b1b;
  --color-secondary-bg: #1e3a5f;
  --color-secondary-hover-bg: #24466f;
  --color-secondary-fg: #dbeafe;
  --color-success-text: #22c55e;
  --color-bookmark-active: #ca8a04;
  --color-input-border: #7c8594;
  --color-focus: var(--color-accent);
  --color-button-alt-bg: #202B40;
  --color-button-alt-border: #7c8594;
  --color-button-alt-hover: #252f45;
  --color-button-disabled-bg: #2d3a52;
  --color-button-disabled-text: #6b7280;
  --color-toggle-off-thumb: #a3b0c7;
  --color-nav-icon: #A3B0C7;
  --color-nav-icon-hover: #252f45;
  --color-dropdown-bg: #202B40;
  --color-dropdown-border: #2d3a52;
  --color-dropdown-item-hover: #252f45;
  --color-dropdown-item-active-bg: #2d3a52;
  --color-card-bg: #1f2937;
  --color-card-border: #4b5563;
  --color-card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  --color-accent-text: #fff;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-text-muted: #aab2bf;
  --color-surface-raised: #374151;
  --shadow-popover: 0 10px 15px -3px rgb(0 0 0 / 0.35), 0 4px 6px -2px rgb(0 0 0 / 0.2);

  /* Tone hex values that differ in dark */
  --tone-success-fg: #6ee7b7;
  --tone-success-bg: #064e3b;
  --tone-success-border: #059669;
  --tone-warning-fg: #fef3c7;
  --tone-warning-bg: #78350f;
  --tone-warning-border: #f59e0b;
  --tone-danger-fg: #fecaca;
  --tone-danger-bg: #7f1d1d;
  --tone-danger-border: #f87171;
  --tone-info-fg: #dbeafe;
  --tone-info-bg: #1e3a5f;
  --tone-info-border: #3b82f6;
  --tone-notice-fg: #e0e7ff;
  --tone-notice-bg: #312e81;
  --tone-notice-border: #6366f1;
  --tone-critical-fg: #fef2f2;
  --tone-critical-bg: #450a0a;
  --tone-critical-border: #7f1d1d;

  /* --role-* hex values that differ in dark (lighter tints of the same hues; see light block) */
  --role-system-operator: #60a5fa;
  --role-secondary-system-operator: #bfdbfe;
  --role-document-operator: #34d399;
  --role-oidc-role-operator: #a5b4fc;
  --role-organization-operator: #c4b5fd;
  --role-training-operator: #4ade80;
  --role-data-operator: #f87171;
  --role-it-service-operator: #fbbf24;
  --role-user: #cbd5e1;
  --role-area-owner: #f472b6;
  --role-area-manager: #e879f9;
  --role-area-member: #a3e635;
  --role-area-visitor: #67e8f9;
  --role-area-outsider: #c084fc;
}

/* Shared tone → local CSS variables for badges, pills, and card messages. */
[data-tone="muted"] {
  --tone-fg: var(--tone-muted-fg);
  --tone-bg: var(--tone-muted-bg);
  --tone-border: var(--tone-muted-border);
}

[data-tone="info"] {
  --tone-fg: var(--tone-info-fg);
  --tone-bg: var(--tone-info-bg);
  --tone-border: var(--tone-info-border);
}

[data-tone="notice"] {
  --tone-fg: var(--tone-notice-fg);
  --tone-bg: var(--tone-notice-bg);
  --tone-border: var(--tone-notice-border);
}

[data-tone="success"] {
  --tone-fg: var(--tone-success-fg);
  --tone-bg: var(--tone-success-bg);
  --tone-border: var(--tone-success-border);
}

[data-tone="warning"] {
  --tone-fg: var(--tone-warning-fg);
  --tone-bg: var(--tone-warning-bg);
  --tone-border: var(--tone-warning-border);
}

[data-tone="danger"] {
  --tone-fg: var(--tone-danger-fg);
  --tone-bg: var(--tone-danger-bg);
  --tone-border: var(--tone-danger-border);
}

[data-tone="critical"] {
  --tone-fg: var(--tone-critical-fg);
  --tone-bg: var(--tone-critical-bg);
  --tone-border: var(--tone-critical-border);
}

/* Windows High Contrast / forced colours drop box-shadow rings: draw a system outline. */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}