/* CalcForge Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-primary: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --color-primary: #2563EB;   /* blue */
  --color-secondary: #7C3AED; /* purple */
  --color-bg: #F8FAFC;        /* light gray */
  --color-card: #FFFFFF;     /* white */
  --color-text: #1E293B;     /* dark gray */
  --radius: 12px;
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  --transition: 0.3s ease;
}

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

html { font-family: var(--font-primary); background-color: var(--color-bg); color: var(--color-text); line-height:1.5; }

body { display:flex; flex-direction:column; min-height:100vh; }

header, footer { background-color: var(--color-primary); color:#fff; padding:1rem; text-align:center; }

nav { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
nav a { color:#fff; text-decoration:none; font-weight:500; }

.hamburger { display:none; flex-direction:column; cursor:pointer; }
.hamburger span { height:3px; width:25px; background:#fff; margin-bottom:4px; border-radius:2px; }
@media (max-width:768px) {
  nav { flex-direction:column; display:none; }
  nav.active { display:flex; }
  .hamburger { display:flex; }
}

.main-content { flex:1; max-width:1200px; margin:0 auto; padding:1rem; }

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color:#fff;
  padding:3rem 1rem;
  text-align:center;
  border-radius: var(--radius);
  margin-bottom:2rem;
}
.hero h1 { font-size:2.5rem; margin-bottom:0.5rem; }
.hero p { font-size:1.2rem; }

/* Search bar */
.search-bar {
  position:relative;
  max-width:400px;
  margin:1.5rem auto;
}
.search-bar input {
  width:100%;
  padding:0.75rem 1rem 0.75rem 2.5rem;
  border:1px solid #ddd;
  border-radius: var(--radius);
  font-size:1rem;
  transition: var(--transition);
}
.search-bar input:focus { outline:none; border-color:var(--color-primary); }
.search-bar .icon {
  position:absolute; left:0.8rem; top:50%; transform:translateY(-50%);
  font-size:1.2rem; color:#888;
}

/* Card grid */
.grid-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1.5rem;
}
.card {
  background-color: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:1.5rem;
  text-align:center;
  transition: var(--transition);
  display:flex; flex-direction:column; justify-content:space-between;
}
.card:hover { transform:translateY(-4px); box-shadow: 0 6px 12px -2px rgba(0,0,0,0.15); }
.card .icon { font-size:2rem; margin-bottom:0.5rem; }
.card a { margin-top:auto; display:inline-block; padding:0.5rem 1rem; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color:#fff; border-radius: var(--radius); text-decoration:none; font-weight:500; transition: var(--transition); }
.card a:hover { opacity:0.9; }

/* Tool container */
.tool-container {
  background-color: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:2rem;
  margin:2rem auto;
  max-width:800px;
}
.tool-container h1 { margin-bottom:1rem; font-size:2rem; color:var(--color-primary); }
.tool-container form { display:grid; gap:1rem; }
.tool-container input, .tool-container select, .tool-container textarea { width:100%; padding:0.75rem; border:1px solid #ccc; border-radius: var(--radius); font-size:1rem; }
/* Base button style used across the toolkit */
.btn {
  display:inline-block;
  padding:0.75rem 1.5rem;
  font-size:1rem;
  font-weight:500;
  text-align:center;
  text-decoration:none;
  border:none;
  border-radius: var(--radius);
  cursor:pointer;
  transition: var(--transition);
  user-select:none;
}
/* Primary button – main call‑to‑action */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color:#fff;
  box-shadow: var(--shadow);
}
.btn-primary:hover,
.btn-primary:focus {
  opacity:0.9;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
/* Secondary button – alternative actions */
.btn-secondary {
  background: var(--color-secondary);
  color:#fff;
}
.btn-secondary:hover,
.btn-secondary:focus {
  opacity:0.85;
}
/* Outline button – minimal visual weight */
.btn-outline {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.btn-outline:hover,
.btn-outline:focus {
  background: var(--color-primary);
  color:#fff;
}
/* Disabled state */
.btn:disabled,
.btn[disabled] {
  opacity:0.5;
  cursor:not-allowed;
}
/* Size variants */
.btn-sm { padding:0.5rem 1rem; font-size:0.875rem; }
.btn-lg { padding:1rem 2rem; font-size:1.125rem; }

/* Keep legacy selector for backward compatibility */
.tool-container button { padding:0.75rem 1.5rem; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); color:#fff; border:none; border-radius: var(--radius); font-size:1rem; cursor:pointer; transition: var(--transition); }
.tool-container button:hover { opacity:0.9; }

/* Result box */
.result-box {
  background:#f9f9f9; border:1px solid #e0e0e0; border-radius: var(--radius); padding:1rem; margin-top:1rem; position:relative; }
.copy-btn { position:absolute; top:0.5rem; right:0.5rem; background:none; border:none; color:#555; cursor:pointer; font-size:0.9rem; }

/* Breadcrumb */
.breadcrumb { font-size:0.9rem; margin-bottom:1rem; }
.breadcrumb a { color:var(--color-primary); text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }

/* Spinner */
.spinner-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.7); display:flex; align-items:center; justify-content:center; z-index:1000; }
.spinner {
  border:4px solid #f3f3f3;
  border-top:4px solid var(--color-primary);
  border-radius:50%;
  width:40px; height:40px;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.hidden { display:none; }

/* Toast */
.toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:#333; color:#fff; padding:0.5rem 1rem; border-radius:4px; opacity:0; transition:opacity 0.3s;
  z-index:1100;
}
.toast.show { opacity:1; }

/* Footer links */
footer .footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:0.5rem; }
footer .footer-links a { color:#fff; text-decoration:none; font-size:0.9rem; }

/* Responsive adjustments */
@media (max-width:600px) {
  .hero h1 { font-size:2rem; }
  .tool-container { padding:1.5rem; }
}