/**
 * client/assets/css/theme.css
 *
 * The single shared design-token file (UI/UX Spec §1). Every value a
 * component or page needs — color, gradient, type scale, radius,
 * elevation, spacing, icon size — is declared here as a CSS custom
 * property and referenced by name everywhere else. No page or
 * component in any later phase hard-codes a color, radius, shadow, or
 * spacing value; they reference these tokens instead, which is what
 * lets Phase 32 (Dark Mode) activate `[data-theme="dark"]` without
 * touching any component file.
 *
 * Phase 3 scope only: tokens are defined here. No component styling
 * beyond token declarations lives in this file — see components.css.
 */

:root {
  /* ---------------------------------------------------------------
   * Brand Blues — primary scale, dark to light (UI/UX §1.1)
   * --------------------------------------------------------------- */
  --color-primary-900: #050B1F;
  --color-primary-800: #0A1233;
  --color-primary-700: #0F1B4C;
  --color-primary-600: #15296B;
  --color-primary-500: #1E3A8A; /* primary brand color */
  --color-primary-400: #2E52B8;
  --color-primary-300: #5B7FD6;
  --color-primary-200: #9CB4EA;
  --color-primary-100: #D3DEF7;
  --color-primary-50:  #F0F4FE;

  /* ---------------------------------------------------------------
   * Gradients — dark-blue → dark-blue only, no hue shifts
   * --------------------------------------------------------------- */
  --gradient-hero:        linear-gradient(135deg, var(--color-primary-900), var(--color-primary-600));
  --gradient-card-accent: linear-gradient(120deg, var(--color-primary-800), var(--color-primary-500));
  --gradient-sidebar:     linear-gradient(180deg, var(--color-primary-900), var(--color-primary-800));

  /* ---------------------------------------------------------------
   * Neutrals — light mode
   * --------------------------------------------------------------- */
  --color-neutral-white: #FFFFFF;
  --color-neutral-50:  #F6F8FC;
  --color-neutral-100: #EDF1F8;
  --color-neutral-200: #DCE3F0;
  --color-neutral-300: #CBD5E6;
  --color-neutral-500: #7C8AA8;
  --color-neutral-600: #5A6B8F;
  --color-neutral-700: #3A4A6B;
  --color-neutral-900: #0E1830;

  /* Neutrals — dark mode values (activated by [data-theme="dark"] below;
     declared here per UI/UX §1.1 defining both light and dark values
     together, consumed as a set by Phase 32). */
  --color-dark-bg-base: #080D1F;
  --color-dark-surface: #111B38;
  --color-dark-border:  #243357;

  /* ---------------------------------------------------------------
   * Semantic colors
   * --------------------------------------------------------------- */
  --color-success-500: #1FA97A;
  --color-success-100: #DCF5EC;
  --color-warning-500: #E0A72E;
  --color-warning-100: #FBF0D9;
  --color-error-500:   #E14B4B;
  --color-error-100:   #FCE1E1;
  --color-info-500:    #3B82C4;
  --color-info-100:    #DEEBF7;

  /* ---------------------------------------------------------------
   * Live theme roles — components reference THESE, not the raw scale
   * above, so Phase 32's dark-mode toggle only has to repoint the
   * roles, never touch a component file.
   * --------------------------------------------------------------- */
  --color-bg-app:      var(--color-neutral-50);
  --color-bg-surface:  var(--color-neutral-white);
  --color-bg-subtle:   var(--color-neutral-100);
  --color-border:      var(--color-neutral-300);
  --color-border-soft: var(--color-neutral-100);
  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-placeholder: var(--color-neutral-500);

  /* UI Redesign — interaction chrome */
  --focus-ring-color: rgba(30, 58, 138, 0.16);
  --focus-ring-width: 4px;

  /* Scrollbars — styled site-wide so panels (sidebar, tables, feeds)
     never expose a raw OS scrollbar. */
  --scrollbar-size: 10px;
  --scrollbar-thumb: var(--color-neutral-300);
  --scrollbar-thumb-hover: var(--color-neutral-500);
  --scrollbar-track: transparent;

  /* Select2 skin roles (light + dark shared by select2.css) */
  --select2-bg: var(--color-bg-surface);
  --select2-border: var(--color-border);
  --select2-hover-bg: var(--color-neutral-50);
  --select2-highlight-bg: var(--color-primary-50);
  --select2-highlight-text: var(--color-primary-700);
  --select2-current-bg: var(--color-primary-100);
  --select2-current-text: var(--color-primary-700);
  --select2-multi-tag-bg: var(--color-primary-50);
  --select2-multi-tag-border: var(--color-primary-100);
  --select2-disabled-bg: var(--color-neutral-100);

  /* ---------------------------------------------------------------
   * Typography (UI/UX §1.2)
   * --------------------------------------------------------------- */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-size-display: 40px;
  --font-size-h1: 32px;
  --font-size-h2: 26px;
  --font-size-h3: 20px;
  --font-size-h4: 16px;
  --font-size-body: 15px;
  --font-size-caption: 13px;
  --font-size-label: 12px;

  --line-height-display: 1.15;
  --line-height-h1: 1.2;
  --line-height-h2: 1.25;
  --line-height-h3: 1.3;
  --line-height-h4: 1.35;
  --line-height-body: 1.5;
  --line-height-caption: 1.4;
  --line-height-label: 1.3;

  --font-weight-heading-strong: 700;
  --font-weight-heading: 600;
  --font-weight-body: 400;
  --font-weight-body-strong: 600;
  --font-weight-label: 600;

  --letter-spacing-label: 0.04em;

  /* Mobile overrides consumed via the --bp-mobile breakpoint (§2.5) */
  --font-size-display-mobile: 30px;
  --font-size-h1-mobile: 26px;
  --font-size-h2-mobile: 22px;
  --font-size-h3-mobile: 18px;
  --font-size-h4-mobile: 16px;
  --font-size-body-mobile: 14px;
  --font-size-caption-mobile: 12px;
  --font-size-label-mobile: 12px;

  /* ---------------------------------------------------------------
   * Shape, elevation, spacing, icons (UI/UX §1.3)
   * --------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(14, 24, 48, 0.04), 0 1px 3px rgba(14, 24, 48, 0.06);
  --shadow-2: 0 4px 12px rgba(14, 24, 48, 0.08), 0 2px 4px rgba(14, 24, 48, 0.04);
  --shadow-3: 0 12px 32px rgba(14, 24, 48, 0.14), 0 4px 12px rgba(14, 24, 48, 0.06);
  --shadow-4: 0 24px 56px rgba(14, 24, 48, 0.2), 0 8px 20px rgba(14, 24, 48, 0.08);

  --shadow-focus: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --icon-size-inline: 16px;
  --icon-size-button: 18px;
  --icon-size-nav: 24px;
  --icon-size-empty-state: 32px;

  /* ---------------------------------------------------------------
   * Responsive breakpoints (UI/UX §2.5) — exposed as custom
   * properties for JS (matchMedia) consumers; actual CSS media
   * queries still need literal values, kept in sync with these.
   * --------------------------------------------------------------- */
  --bp-tablet: 640px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
  /* UI Redesign — the admin canvas is now full-bleed (client
     requirement: app must fill every screen width). */
  --content-max-width: 100%;
  --content-pad: clamp(16px, 2.5vw, 40px);

  /* Sidebar width used by layout.css (kept as a token for theming) */
  --sidebar-width: 256px;
}

/* ---------------------------------------------------------------------
 * Dark mode — token role overrides only (Phase 32 adds the toggle
 * mechanism; the values already exist here per UI/UX §1.1).
 * --------------------------------------------------------------- */
[data-theme='dark'] {
  --color-bg-app: var(--color-dark-bg-base);
  --color-bg-surface: var(--color-dark-surface);
  --color-bg-subtle: #0B1330;
  --color-border: var(--color-dark-border);
  --color-border-soft: #1B2950;
  --color-text-primary: var(--color-neutral-50);
  --color-text-secondary: var(--color-primary-200);
  --color-text-placeholder: var(--color-neutral-500);

  /* Dark-mode-appropriate hover/emphasis tints for menu items,
     active nav pills, table hover rows, etc. */
  --color-primary-50: #142147;
  --color-primary-700: #A5BCF5;

  --focus-ring-color: rgba(126, 160, 245, 0.22);

  --scrollbar-thumb: #2A3C66;
  --scrollbar-thumb-hover: #3A5280;

  --select2-bg: #0F1A3A;
  --select2-border: #243357;
  --select2-hover-bg: #152449;
  --select2-highlight-bg: #15296B;
  --select2-highlight-text: #D3DEF7;
  --select2-current-bg: #15296B;
  --select2-current-text: #D3DEF7;
  --select2-multi-tag-bg: #15296B;
  --select2-multi-tag-border: #243357;
  --select2-disabled-bg: #0B1330;
}

/* UI Redesign — site-wide styled scrollbars. Uses the role tokens
   above so both themes automatically get a soft, modern scrollbar. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
*::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}
*::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Utility for hiding scrollbars entirely (chip rows, sidebar nav). */
.ant-hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ant-hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Smooth page-level focus outlines everywhere; components that want a
   ring instead of the outline opt out with  .no-focus-ring */
:where(a, button, input, select, textarea, [tabindex]) {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--color-primary-400);
  outline-width: 2px;
}

/* ---------------------------------------------------------------------
 * Interactive-state derivations (UI/UX §1.1): expressed as utility
 * classes rather than literal per-color mixes, since CSS has no
 * runtime color-mix fallback guarantee across the supported browser
 * matrix. Components apply these classes on top of a base token color.
 * --------------------------------------------------------------- */
.state-hover-on-light {
  filter: brightness(0.92); /* approximates 12% mix toward primary-900 */
}
.state-hover-on-dark {
  filter: brightness(1.12); /* approximates 12% mix toward white */
}
.state-pressed {
  filter: brightness(0.8); /* approximates 20% mix toward black */
}
.state-disabled {
  opacity: 0.4;
  color: var(--color-neutral-500);
  pointer-events: none;
}