/* 
   1. DESIGN TOKENS & VARIABLES (Extracted from your Radar UI image)
*/
:root {
    /* Backgrounds */
    --bg-dark: #090C10;          /* Deepest slate/black background */
    --card-dark: #10151B;        /* Slightly lighter dark background for form cards */
    --panel-raised: #161C24;     /* Nested panels, hover states, stat cards */

    /* Brand Accents */
    --primary-gold: #F2A93B;     /* Vibrant radar amber/gold accent text */
    --signal-green: #35D399;     /* Active/tracked signal state — enrichment, live status */
    --radar-teal: #1A3A3A;       /* Subtle dark green-teal undertone from the radar pulse */

    /* Typography Colors */
    --text-white: #FFFFFF;       /* Crisp white for primary headings */
    --text-muted: #8B97A3;       /* Subdued slate for labels and hints */

    /* Structural Elements */
    --border-dark: #1E262F;      /* Subtle dark borders for fields and cards */

    /* Typography & Radius */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Space Grotesk', var(--font-sans);  /* Headings — technical, console character */
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* Data: tables, counts, coordinates */
    --radius-md: 6px;
    --radius-lg: 12px;
}

/*
   2. GLOBAL RESET & BASE STYLES
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* 
   3. REUSABLE FORM DESIGN SYSTEM
*/
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 6px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--card-dark);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    color: var(--text-white);
    font-size: 0.95rem;
    transition: all 0.2s ease-in-out;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(242, 169, 59, 0.15);
}

/* Error message list container style */
.error-alert {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #F87171;
    padding: 12px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.error-alert ul {
    list-style-position: inside;
}

/*
   4. REUSABLE BUTTON SYSTEM 
*/
/* The premium outline button style matching your landing page "Sign in" */
.btn-outline {
    background: transparent;
    color: var(--text-white);
    border: 1px solid var(--border-dark);
    padding: 10px 22px;
    border-radius: var(--radius-md);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    display: inline-block;
}

.btn-outline:hover {
    border-color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Solid CTA button using the vibrant radar amber/gold */
.btn-primary {
    background-color: var(--primary-gold);
    color: #000000;
    border: none;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.2s ease;
    width: 100%; /* Default to full width inside form cards */
    display: block;
    text-align: center;
    text-decoration: none;
}

.btn-primary:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}