/* =========================================
   Global reset
   ========================================= */

/* Reset margins/paddings and use border-box everywhere
   so components start from a clean base and sizes are predictable. */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================================
   Theme colors (CSS variables)
   ========================================= */

/* App-wide color tokens you can reuse inside components. */
:root {
  /* main app background */
  --bg-primary: #17181f;

  /* alt background (e.g. header/footer) */
  --bg-secondary: #111218;

  /* cards / panels */
  --bg-elevated: #222431;

  /* main text color on dark bg */
  --text-primary: #f5f6f8;

  /* secondary / muted text */
  --text-muted: #a5acb8;

  /* Primary accent */
  --accent-primary: #4b6fd6;
  --accent-primary-soft: #252c45;
  --accent-primary-dark: #334899;

  /* Info accent maps to primary accent */
  --accent-info: var(--accent-primary);

  /* Danger / error */
  --accent-danger: #e25b5b;
  --accent-danger-soft: #3c1b1f;
  --accent-danger-dark: #b1363a;

  /* Special accents */
  --accent-gold: #d8b86a;
  --accent-mystery: #b39adf;

  /* State colors */
  --state-success: #33a852;
  --state-warning: #f2be4f;
  --state-error: var(--accent-danger);
}

/* =========================================
   Base page styles
   ========================================= */

/* Base document + body styling:
   - full-height
   - dark background
   - default text color and font.
*/
html,
body {
  height: 100%;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* Root app container:
   - Fill the full document height (100% of body)
   - Use flex so pages + footer layout nicely
*/
#root {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}