/*
 * messAIging — Base Styles
 * /static/css/base.css
 *
 * Contains: CSS custom properties, reset, typography, shared utilities.
 * Loaded by: every page.
 */

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --brand:     #2a4736;
  --brand-dk:  #1e3327;
  --brand-lt:  #3b6350;
  --gold:      #c9a84c;

  /* Neutral palette */
  --bg:        #f4f2ed;
  --surface:   #ffffff;
  --border:    #e3dfd7;
  --text:      #1c1c1c;
  --muted:     #737373;

  /* Semantic */
  --danger:    #c0392b;
  --success:   #27ae60;
  --warning:   #d97706;

  /* Legacy aliases (used by app_workspace.html) */
  --bg-oatmeal:      var(--bg);
  --surface-white:   var(--surface);
  --text-slate:      var(--text);
  --text-muted:      var(--muted);
  --accent-clay:     #b85d43;
  --accent-pine:     var(--brand);
  --border-soft:     var(--border);
  --border-light:    var(--border);
  --shadow-premium:  0 8px 30px rgba(44,62,80,0.06);

  /* Radii */
  --radius:    12px;
  --radius-lg: 16px;
  --radius-sm: 8px;

  /* Transitions */
  --transition: 0.15s ease;
}

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

/* ── Base typography ───────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand);
}

/* ── Shared utility classes ────────────────────────────────────────────────── */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* Flash messages */
.flash {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}
.flash.success { background: #edf7ed; border: 1px solid rgba(42,71,54,.2);  color: var(--brand); }
.flash.error   { background: #fdf0ef; border: 1px solid rgba(192,57,43,.2); color: var(--danger); }
.flash.warning { background: #fef9f0; border: 1px solid rgba(217,119,6,.2); color: var(--warning); }

/* Shared button primitives */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition);
  min-height: 44px;
}
.btn-primary:hover { background: var(--brand-dk); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  background: none;
  color: var(--brand);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  min-height: 44px;
}
.btn-ghost:hover { border-color: var(--brand); background: #f0f6f2; }

/* Toggle switch — shared across admin, workspace, team pages */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 26px;
  cursor: pointer;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 20px; width: 20px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--brand); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Brand wordmark helper */
.brand-ai { color: var(--gold); font-weight: 800; }