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

.hidden { display: none; }

/* Variables */

:root {
  --bg:              #f0f0f0;
  --surface:         #ffffff;
  --surface-alt:     #f0f0f0;
  --text:            #333333;
  --text-secondary:  #555555;
  --text-muted:      #808080;
  --text-disabled:   #a0a0a0;
  --border:          #dddddd;
  --border-alt:      #eeeeee;
  --border-focus:    #DC3545;
  --primary:         #DC3545;
  --primary-hover:   #c82333;
  --primary-text:    #ffffff;
  --nav-bg:          #1e1e1e;
  --nav-text:        #ffffff;
  --error-bg:        #fff0f0;
  --error-text:      #cc0000;
}

html.dark {
  --bg:              #1a1a1a;
  --surface:         #242424;
  --surface-alt:     #2e2e2e;
  --text:            #f0f0f0;
  --text-secondary:  #cccccc;
  --text-muted:      #888888;
  --text-disabled:   #555555;
  --border:          #3a3a3a;
  --border-alt:      #2e2e2e;
  --border-focus:    #DC3545;
  --primary:         #DC3545;
  --primary-hover:   #c82333;
  --primary-text:    #ffffff;
  --nav-bg:          #111111;
  --nav-text:        #ffffff;
  --error-bg:        #2d1515;
  --error-text:      #ff6b6b;
}

/* Base */

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
}