/* ============================================================================
 *  theme.css  —  AGH Inventory design-token system
 *  Loaded FIRST (before every other stylesheet).
 *
 *  This is the SINGLE source of truth for colour. No other CSS file may
 *  contain a literal hex / rgb() colour. Component styles consume the tokens
 *  declared here.
 *
 *  Four themes, selected via  document.documentElement.dataset.theme :
 *    light  (default) · dark · glass-light · glass-dark
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 *  Theme-INDEPENDENT tokens (identical in every palette)
 * ------------------------------------------------------------------------- */
:root {
  /* Type */
  --font-sans: 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  --fs-sm: 15px;
  --fs-base: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-title: 32px;

  /* Legacy responsive-text aliases (consumed by .large/.medium/.small-text
     and the grid text-size classes) — mapped onto the fixed scale. */
  --font-size-large: var(--fs-lg);
  --font-size-medium: var(--fs-base);
  --font-size-small: var(--fs-sm);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Chrome sizing */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 56px;
  --navbar-height: 60px;

  /* Glass defaults (overridden inside the two glass palettes) */
  --glass-blur: 0px;
  --glass-saturate: 1;

  /* Theme-preview swatches for the picker (decorative, constant) */
  --swatch-light: linear-gradient(135deg, #ffffff 0 50%, #0e6fd8 50% 100%);
  --swatch-dark: linear-gradient(135deg, #222a35 0 50%, #4da3ff 50% 100%);
  --swatch-glass-light: linear-gradient(135deg, #e8eef8 0 50%, #bcd7f5 50% 100%);
  --swatch-glass-dark: linear-gradient(135deg, #101a30 0 50%, #5cb0ff 50% 100%);
}

/* ---------------------------------------------------------------------------
 *  LIGHT  (default)
 * ------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --bg: #f4f6f8;
  --bg-gradient: none;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --surface-hover: #f0f4f8;
  --surface-panel: #ffffff;
  --border: #d8dee6;
  --border-strong: #b9c2cd;

  --text: #1a2330;
  --text-muted: #5a6572;
  --text-faint: #8a94a1;

  --accent: #0e6fd8;
  --accent-hover: #0b5cb4;
  --accent-text: #ffffff;
  --accent-soft: #e3effc;

  --danger: #c93a3a;
  --danger-soft: #fbe9e9;
  --danger-text: #ffffff;
  --success: #1e8e4e;
  --success-soft: #e6f6ec;
  --warning: #b97a08;
  --warning-soft: #fdf3df;

  --shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-2: 0 4px 14px rgba(16, 24, 40, .10);

  --focus-ring: #0b5cb4;
  --backdrop: rgba(16, 24, 40, .45);

  --glass-blur: 0px;
  --glass-saturate: 1;

  /* Legacy blue aliases → unified accent (compat shim for any missed ref) */
  --primary-color: var(--accent);
  --primary-hover: var(--accent-hover);
  --brand: var(--accent);
  --text-color: var(--text);
}

/* ---------------------------------------------------------------------------
 *  DARK
 * ------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg: #12161c;
  --bg-gradient: none;
  --surface: #1a2029;
  --surface-2: #222a35;
  --surface-hover: #242e3b;
  --surface-panel: #1a2029;
  --border: #2c3644;
  --border-strong: #3d4c5f;

  --text: #e8edf3;
  --text-muted: #a6b0bd;
  --text-faint: #6e7a88;

  --accent: #4da3ff;
  --accent-hover: #74b8ff;
  --accent-text: #0b1520;
  --accent-soft: #16304d;

  --danger: #ff6b6b;
  --danger-soft: #3a2226;
  --danger-text: #12161c;
  --success: #4ccb7f;
  --success-soft: #16332a;
  --warning: #f0b24a;
  --warning-soft: #382c17;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .5);

  --focus-ring: #74b8ff;
  --backdrop: rgba(0, 0, 0, .6);

  --glass-blur: 0px;
  --glass-saturate: 1;

  --primary-color: var(--accent);
  --primary-hover: var(--accent-hover);
  --brand: var(--accent);
  --text-color: var(--text);
}

/* ---------------------------------------------------------------------------
 *  GLASS LIGHT — translucent surfaces over a fixed gradient
 * ------------------------------------------------------------------------- */
:root[data-theme="glass-light"] {
  --bg: #e3ebf5;
  --bg-gradient:
    radial-gradient(60% 55% at 18% 16%, rgba(188, 215, 245, .55), transparent 72%),
    radial-gradient(55% 50% at 84% 82%, rgba(205, 238, 227, .50), transparent 72%),
    linear-gradient(135deg, #dfe9f5, #eef3fa 40%, #dce8f2 70%, #e8eef8);
  --surface: rgba(255, 255, 255, .55);
  --surface-2: rgba(255, 255, 255, .40);
  --surface-hover: rgba(255, 255, 255, .72);
  --surface-panel: rgba(255, 255, 255, .40);
  --border: rgba(255, 255, 255, .65);
  --border-strong: rgba(120, 140, 170, .55);

  --text: #1a2330;
  --text-muted: #5a6572;
  --text-faint: #8a94a1;

  --accent: #0e6fd8;
  --accent-hover: #0b5cb4;
  --accent-text: #ffffff;
  --accent-soft: rgba(14, 111, 216, .14);

  --danger: #c93a3a;
  --danger-soft: rgba(201, 58, 58, .14);
  --danger-text: #ffffff;
  --success: #1e8e4e;
  --success-soft: rgba(30, 142, 78, .14);
  --warning: #a86e05;
  --warning-soft: rgba(185, 122, 8, .16);

  --shadow-1: 0 2px 10px rgba(31, 38, 135, .10);
  --shadow-2: 0 8px 32px rgba(31, 38, 135, .14);

  --focus-ring: #0b5cb4;
  --backdrop: rgba(31, 38, 135, .22);

  --glass-blur: 20px;
  --glass-saturate: 1.5;

  --primary-color: var(--accent);
  --primary-hover: var(--accent-hover);
  --brand: var(--accent);
  --text-color: var(--text);
}

/* ---------------------------------------------------------------------------
 *  GLASS DARK — translucent surfaces over a fixed gradient
 * ------------------------------------------------------------------------- */
:root[data-theme="glass-dark"] {
  --bg: #0b1220;
  --bg-gradient:
    radial-gradient(60% 55% at 20% 18%, rgba(27, 58, 107, .35), transparent 72%),
    radial-gradient(55% 55% at 82% 80%, rgba(18, 63, 58, .25), transparent 72%),
    linear-gradient(135deg, #0b1220, #101a30 45%, #0a0f1d);
  --surface: rgba(20, 28, 44, .55);
  --surface-2: rgba(255, 255, 255, .06);
  --surface-hover: rgba(255, 255, 255, .09);
  --surface-panel: rgba(20, 28, 44, .42);
  --border: rgba(255, 255, 255, .14);
  --border-strong: rgba(255, 255, 255, .22);

  --text: #e8edf3;
  --text-muted: #a6b0bd;
  --text-faint: #6e7a88;

  --accent: #5cb0ff;
  --accent-hover: #7cc0ff;
  --accent-text: #0b1520;
  --accent-soft: rgba(77, 163, 255, .18);

  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .16);
  --danger-text: #12161c;
  --success: #4ccb7f;
  --success-soft: rgba(76, 203, 127, .16);
  --warning: #f0b24a;
  --warning-soft: rgba(240, 178, 74, .16);

  --shadow-1: 0 2px 10px rgba(0, 0, 0, .35);
  --shadow-2: 0 8px 32px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);

  --focus-ring: #7cc0ff;
  --backdrop: rgba(0, 0, 0, .55);

  --glass-blur: 20px;
  --glass-saturate: 1.5;

  --primary-color: var(--accent);
  --primary-hover: var(--accent-hover);
  --brand: var(--accent);
  --text-color: var(--text);
}

/* ---------------------------------------------------------------------------
 *  Glass surface treatment — real blur/translucency, glass themes only.
 *  Centralised here so all "glass" behaviour lives in the theme layer.
 * ------------------------------------------------------------------------- */
:root[data-theme^="glass"] .sidebar,
:root[data-theme^="glass"] .workspace .navbar,
:root[data-theme^="glass"] .grid-container,
:root[data-theme^="glass"] .filters-pane,
:root[data-theme^="glass"] .modal .modal-content,
:root[data-theme^="glass"] .modal .modal-overlay,
:root[data-theme^="glass"] .fv-viewer,
:root[data-theme^="glass"] .footer,
:root[data-theme^="glass"] .toast,
:root[data-theme^="glass"] .theme-menu,
:root[data-theme^="glass"] .quick-link,
:root[data-theme^="glass"] .stat-tile,
:root[data-theme^="glass"] .activity-card,
:root[data-theme^="glass"] .confirm-card {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* Solid-colour fallback when backdrop-filter is unavailable. Bumps the
 * translucent surfaces up to opaque so text stays legible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="glass-light"] {
    --surface: #ffffff;
    --surface-2: #eef1f4;
    --surface-hover: #f0f4f8;
    --surface-panel: #ffffff;
    --border: #d8dee6;
    --border-strong: #b9c2cd;
  }
  :root[data-theme="glass-dark"] {
    --surface: #1a2029;
    --surface-2: #222a35;
    --surface-hover: #242e3b;
    --surface-panel: #1a2029;
    --border: #2c3644;
    --border-strong: #3d4c5f;
  }
}

/* ---------------------------------------------------------------------------
 *  Global foundation behaviours
 * ------------------------------------------------------------------------- */

/* Visible keyboard focus ring on everything interactive. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
/* Elements that manage their own focus treatment opt out via [data-no-ring]. */
[data-no-ring]:focus-visible { outline: none; }

/* Honour reduced-motion: kill transitions & animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}