/* Website/wwwroot/css/site.css */
/* BIVONIC Brand System — v1.0 */
/* Source of truth: /docs/BrandGuide.html */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg-void:          #0A0A0F;
  --bg-surface:       #20202B;
  --bg-panel:         #21214F;
  --bg-elevated:      #1A1A26;
  --bg-search-results:#393A4A;
  --bg-card:          #1E1E2E;
  --bg-button:        #3D3D3D;
  --text-primary:     #E8E8F0;
  --text-secondary:   #8888A0;
  --text-muted:       #55556A;
  --accent-blue:      #4A7CFF;
  --accent-blue-light:#6B9AFF;
  --accent-coral:     #FF4D6A;
  --accent-violet:    #8B5CF6;
  --accent-teal:      #2DD4BF;
  --accent-amber:     #F59E0B;
  --gradient-hero:    linear-gradient(135deg, #4A7CFF 0%, #8B5CF6 50%, #FF4D6A 100%);
  --font:             'Outfit', sans-serif;
  --font-mono:        'JetBrains Mono', monospace;
  --radius-sm:        8px;
  --radius:           12px;
  --radius-lg:        20px;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Utility */
.gradient-text {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn-primary {
  display: inline-block;
  background: var(--accent-blue);
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--accent-blue-light); transform: translateY(-1px); }

.btn-secondary {
  display: inline-block;
  color: var(--text-secondary);
  font-family: var(--font);
  font-weight: 500;
  font-size: 15px;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
  background: transparent;
}
.btn-secondary:hover { border-color: var(--accent-blue); color: var(--text-primary); }

.btn-signout {
    flex: 1;
    padding: 0 16px;
    background: var(--bg-elevated);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: border-color .2s;
    width: 100%;
}
.btn-ghost {
  background: none;
  border: none;
  color: var(--accent-blue-light);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.btn-ghost:hover { color: var(--accent-blue-light); }

/* Form elements */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.form-control {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  padding: 12px 16px;
  transition: border-color 0.2s;
  outline: none;
}
.form-control:focus { border-color: var(--accent-blue); }
.form-control::placeholder { color: var(--text-muted); }

.field-validation-error { color: var(--accent-coral); font-size: 13px; margin-top: 4px; display: block; }
.validation-summary-errors ul { list-style: none; padding: 0; margin: 0; }
.validation-summary-errors li { color: var(--accent-coral); font-size: 14px; margin-bottom: 4px; }

/* Alert boxes */
.alert {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 20px;
}
.alert-danger  { background: rgba(255,77,106,0.1);  border: 1px solid rgba(255,77,106,0.3);  color: #ff8fa0; }
.alert-success { background: rgba(45,212,191,0.1);  border: 1px solid rgba(45,212,191,0.3);  color: var(--accent-teal); }
.alert-info    { background: rgba(74,124,255,0.1);  border: 1px solid rgba(74,124,255,0.3);  color: var(--accent-blue-light); }