/*  
  Base CSS for Suspecto Web App  
  --------------------------------  
  This file defines:  
    1. Root-level CSS variables (colors, fonts, spacing)  
    2. Global element resets and body styling  
    3. Base button styles under the `.btn` class  

  Usage:  
    • To apply the default button look, add class="btn" to your <button> elements.  
    • Customize accent colors by overriding the --accent variable in a theme selector.  
    • Do NOT add your own button styles to <button> directly—use the .btn class instead.  
*/

:root {
  /* Color palette */
  --bg-color:   #000;          /* Main background (black) */
  --fg-color:   #fff;          /* Main foreground (white) */
  --muted:      #888;          /* Muted text and borders */
  --accent:     #e53935;       /* Default accent (crime‑scene red) */
  --heading:    #ff5252;       /* Default heading highlight */

  /* Typography */
  --font-base:     'Segoe UI', sans-serif;
  --font-size:     16px;
  --line-height:   1.5;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadow */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.7);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.8);
}

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

/* Base body styling */
body {
  background-color: var(--bg-color);
  color: var(--fg-color);
  font-family: var(--font-base);
  font-size: var(--font-size);
  line-height: var(--line-height);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* Headings default color */
h1, h2, h3, h4, h5 {
  color: var(--heading);
  margin-bottom: var(--space-sm);
}

/* Paragraphs */
p {
  margin-bottom: var(--space-md);
  color: var(--fg-color);
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Button base styling */
/* Use <button class="btn">Your label</button> */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--accent);
  color: var(--fg-color);
  font-family: var(--font-base);
  font-size: 0.9rem;
  font-weight: 600;
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-md),
              inset 0 1px 0 rgba(255,255,255,0.1);
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  text-align: center;
  line-height: 1;
}
.btn:hover {
  background-color: lighten(var(--accent),10%);
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-lg),
              inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn:active {
  background-color: darken(var(--accent),10%);
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm),
              inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Utility classes */
.mt-md { margin-top: var(--space-md); }
.mb-md { margin-bottom: var(--space-md); }
.p-md  { padding: var(--space-md); }
.text-center { text-align: center; }
.hidden { display: none !important; }