/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  /* Application core backgrounds */
  --bg-app: #f8fafc; /* slate-50 */
  --bg-panel: #ffffff;
  --bg-element: #f1f5f9; /* slate-100 */
  --bg-hover: #f8fafc; /* slate-50 */
  --bg-inverse: #0f172a; /* slate-900 */
  
  /* Borders */
  --border-subtle: #f1f5f9; /* slate-100 */
  --border-base: #e2e8f0; /* slate-200 */
  --border-strong: #cbd5e1; /* slate-300 */
  
  /* Text */
  --text-core: #0f172a; /* slate-900 */
  --text-muted: #64748b; /* slate-500 */
  --text-faint: #94a3b8; /* slate-400 */
  --text-inverse: #ffffff;
}

:root.dark {
  /* Application core backgrounds (Dark Theme) */
  --bg-app: #020617; /* slate-950 (Absolute background) */
  --bg-panel: #0f172a; /* slate-900 (Matches Sidenav) */
  --bg-element: #1e293b; /* slate-800 (Fields, Table Headers) */
  --bg-hover: #334155; /* slate-700 (Distinct hover highlights) */
  --bg-inverse: #f8fafc; /* slate-50 (For inverted blocks) */
  
  /* Borders (Dark theme) */
  --border-subtle: #1e293b; /* slate-800 */
  --border-base: #334155; /* slate-700 */
  --border-strong: #475569; /* slate-600 (Clear active borders) */
  
  /* Text (Dark theme - Enhanced for Legibility) */
  --text-core: #ffffff; /* pure white (Primary readables) */
  --text-muted: #cbd5e1; /* slate-300 (Secondary/Descriptions) */
  --text-faint: #94a3b8; /* slate-400 (Tertiary/Subtle) */
  --text-inverse: #0f172a; /* slate-900 */
}