/* =========================
   GLOBAL DESIGN SYSTEM
   FreeResumeOnline
   ========================= */

/* 1. VARIABLES */
:root{
  --primary:#2D5BE3;
  --primary-dark:#1A3FA8;
  --bg:#ffffff;
  --soft-bg:#fafafa;
  --text:#1a1a1a;
  --muted:#666;
  --border:#eaeaea;
  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* 2. RESET */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'DM Sans', sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* 3. TYPOGRAPHY */
h1,h2,h3{
  font-family:'Fraunces', serif;
  color:var(--text);
  line-height:1.2;
}

p{
  color:var(--muted);
  font-size:1rem;
}

/* 4. CONTAINER */
.container{
  max-width:1100px;
  margin:auto;
  padding:0 1.5rem;
}

/* 5. BUTTONS */
.btn-primary{
  background:var(--primary);
  color:#fff;
  padding:12px 22px;
  border-radius:999px;
  text-decoration:none;
  display:inline-block;
  font-weight:600;
  transition:0.2s ease;
  border:none;
  cursor:pointer;
}

.btn-primary:hover{
  background:var(--primary-dark);
  transform:translateY(-2px);
}

.btn-ghost{
  border:1px solid var(--border);
  padding:12px 20px;
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  background:#fff;
}

/* 6. CARDS */
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem;
  box-shadow:var(--shadow);
}

/* 7. SECTIONS */
.section{
  padding:5rem 1.5rem;
}

.section-title{
  text-align:center;
  margin-bottom:2.5rem;
}

/* 8. UTILITIES */
.text-center{text-align:center;}
.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mb-2{margin-bottom:2rem;}

/* 9. ANIMATION */
.fade-in{
  animation:fadeIn 0.4s ease-in;
}

@keyframes fadeIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}

/* 10. INPUTS (for builder/login) */
input, textarea, select{
  font-family:inherit;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  outline:none;
}

input:focus, textarea:focus{
  border-color:var(--primary);
}