/* ============================================================================
   CAREER COMPASS — BRAND DESIGN SYSTEM (PRUSSIAN BLUE & SATIN GOLD)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Outfit:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* Typography */
  --font-display: 'Cinzel', serif;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  /* Prussian Blue Hierarchy */
  --bg-deep: #081220;
  --bg-prussian: #0B192C;
  --bg-surface: #12233C;
  --bg-surface-elevated: #182F4F;
  --border-subtle: #1F3D66;
  --border-medium: #2C5287;
  --border-highlight: #3D6DAA;

  /* Satin Gold Accents */
  --gold-primary: #D4AF37;
  --gold-hover: #C5A028;
  --gold-light: #F3E5AB;
  --gold-muted: rgba(212, 175, 55, 0.15);
  --gold-border: rgba(212, 175, 55, 0.4);

  /* Typography Colors */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #8FA4BF;
  --text-gold: #E5C358;

  /* Status Tokens */
  --status-success-bg: rgba(16, 185, 129, 0.12);
  --status-success-border: #10B981;
  --status-success-text: #6EE7B7;

  --status-pending-bg: rgba(212, 175, 55, 0.12);
  --status-pending-border: #D4AF37;
  --status-pending-text: #FDE68A;
}

/* Global Reset & Base */
body {
  font-family: var(--font-body);
  background-color: var(--bg-prussian);
  background-image: 
    radial-gradient(at 10% 10%, rgba(30, 62, 98, 0.4) 0px, transparent 60%),
    radial-gradient(at 90% 90%, rgba(11, 25, 44, 0.8) 0px, transparent 60%);
  color: var(--text-secondary);
  min-height: 100vh;
}

/* Heading Typography */
h1, h2, h3, h4, .font-heading {
  font-family: var(--font-heading);
  color: var(--text-primary);
  letter-spacing: -0.015em;
}

.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

/* Gold Button Variants */
.btn-gold {
  background: linear-gradient(135deg, #E5C358 0%, #D4AF37 50%, #B89020 100%);
  color: #081220;
  font-weight: 700;
  border-radius: 0.75rem;
  box-shadow: 0 4px 14px 0 rgba(212, 175, 55, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-gold:hover {
  background: linear-gradient(135deg, #F0D575 0%, #DCB842 50%, #C49B28 100%);
  box-shadow: 0 6px 20px 0 rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}

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

/* Outline Gold Button */
.btn-gold-outline {
  border: 1px solid var(--gold-border);
  color: var(--gold-light);
  background: rgba(212, 175, 55, 0.05);
  transition: all 0.2s ease;
}

.btn-gold-outline:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--gold-primary);
  color: #ffffff;
}

/* Prussian Blue Card Container */
.panel-prussian {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.panel-prussian-elevated {
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: 1.25rem;
}

/* Form Input Theming for Prussian Canvas */
input, select, textarea {
  background-color: #091524 !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: #5A7494 !important;
}