app.css

/* app.css */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans, 'Inter', sans-serif);
  background-color: var(--theme-dark); /* Fallback if gradient doesn't load */
  color: var(--theme-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings styling with Orbitron */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', sans-serif;
  color: var(--theme-accent);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

h1 { font-size: 2.25rem; } /* Corresponds to Tailwind text-4xl */
h2 { font-size: 1.875rem; } /* Corresponds to Tailwind text-3xl */
h3 { font-size: 1.5rem; }   /* Corresponds to Tailwind text-2xl */
h4 { font-size: 1.25rem; }  /* Corresponds to Tailwind text-xl */

p {
  margin-bottom: 1rem;
  color: var(--theme-text);
}

a {
  color: var(--theme-accent);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: var(--theme-hover);
  text-decoration: underline;
}

/* Basic button styling (can be overridden by Tailwind or specific component styles) */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  font-family: 'Orbitron', sans-serif;
  cursor: pointer;
  padding: 0.65rem 1.25rem; /* Slightly more padding */
  border-radius: 0.375rem; /* rounded-md */
  border: 1px solid transparent;
  font-weight: 600; /* semi-bold */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.1s ease, box-shadow 0.2s ease;
}

/* Default button theme (if no Tailwind bg-* class is applied) */
button:not([class*="bg-"]), 
input[type="button"]:not([class*="bg-"]),
input[type="submit"]:not([class*="bg-"]),
input[type="reset"]:not([class*="bg-"]) {
  background-color: var(--theme-primary);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

button:not([class*="bg-"]):hover,
input[type="button"]:not([class*="bg-"]):hover,
input[type="submit"]:not([class*="bg-"]):hover,
input[type="reset"]:not([class*="bg-"]):hover {
  background-color: var(--theme-secondary);
  border-color: var(--theme-accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active {
    transform: scale(0.98);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

/* Input field styling */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea,
select {
  background-color: var(--theme-dark);
  color: var(--theme-text);
  border: 1px solid var(--theme-border);
  padding: 0.65rem 0.85rem;
  border-radius: 0.375rem; /* rounded-md */
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 0.9rem;
  width: 100%; /* Make inputs take full width by default within their container */
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--theme-accent);
  box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb, 0, 169, 224), 0.3); /* Uses --theme-accent-rgb from index.html */
}

/* Placeholder styling */
::placeholder {
  color: var(--theme-secondary);
  opacity: 0.7;
}

/* Custom Scrollbar (more global) */
::-webkit-scrollbar {
  width: 12px; /* Slightly wider scrollbar */
  height: 12px;
}

::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1); /* More subtle track */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--theme-primary);
  border-radius: 10px;
  border: 3px solid transparent; /* Creates padding around thumb */
  background-clip: content-box; /* Important for border to act as padding */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--theme-secondary);
}

/* Container utility */
.container {
    width: 90%;
    max-width: 1200px; /* Standard max-width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Add any other global styles or utility classes here */
/* Example: A class for a subtle card-like element */
.card-base {
  background-color: var(--theme-dark);
  border: 1px solid var(--theme-border);
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}