/**
 * SentinelCareAI — variables.css
 * Variables CSS — :root tokens, dark mode, alto contraste, fuente grande, transiciones
 * ─────────────────────────────────────────────────────────────
 */

:root {
  --sage: #6b8f71; --sage-light: #a8c5ad; --teal: #3d7a8a; --teal-light: #7eb8c4;
  --gold: #c8974a; --gold-light: #e8c48a; --cream: #faf6f0; --warm-white: #fff9f2;
  --text-dark: #2c2c3a; --text-mid: #5a5a6e; --text-light: #8a8a9e;
  --red-alert: #c0392b; --orange-alert: #e67e22; --surface: rgba(255,255,255,0.85);
  --card-bg: rgba(255,255,255,0.92); --border: rgba(107,143,113,0.2);
  --shadow: 0 8px 32px rgba(61,122,138,0.12); --shadow-hover: 0 16px 48px rgba(61,122,138,0.22);
  --lavender: #9b8bb4; --lavender-light: #c5b9da;
}
/* ─── ALTO CONTRASTE ─────────────────────────── */
body.high-contrast {
  --cream:#fff; --warm-white:#fff; --text-dark:#000; --text-mid:#111; --text-light:#333;
  --card-bg:#fff; --border:#000; --surface:#fff; --teal:#005577; --sage:#2d5c35;
}
body.high-contrast.dark-mode {
  --cream:#000; --warm-white:#000; --text-dark:#fff; --text-mid:#eee; --text-light:#ccc;
  --card-bg:#111; --border:#fff; --surface:#111; --teal:#55ccff; --sage:#88ddaa;
}
/* ─── FUENTE GRANDE ──────────────────────────── */
body.large-font .landing-subtitle,body.large-font .profile-desc,
body.large-font .step-sub,body.large-font .notice-box{font-size:1.05rem;}
body.large-font .msg-bubble,body.large-font #chat-input{font-size:1rem;}
body.large-font .pro-tab{font-size:0.88rem;}
body.large-font .checklist-card p,body.large-font .pro-info-box{font-size:0.95rem;}

/* ─── DARK MODE OVERRIDES ─────────────────────── */
body.dark-mode {
  --cream: #111318;
  --warm-white: #1a1d25;
  --text-dark: #e8eaf0;
  --text-mid: #a0a8b8;
  --text-light: #6a7280;
  --card-bg: rgba(26,29,37,0.95);
  --border: rgba(100,160,180,0.18);
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-hover: 0 16px 48px rgba(0,0,0,0.55);
  --surface: rgba(26,29,37,0.9);
}
body.dark-mode .bg-layer {
  background: linear-gradient(135deg,#0d1117 0%,#111a22 40%,#141018 80%,#0e0f14 100%);
}
body.dark-mode .bg-blob-1 { opacity:0.15; }
body.dark-mode .bg-blob-2 { opacity:0.12; }
body.dark-mode .bg-blob-3 { opacity:0.08; }
body.dark-mode .landing-card,
body.dark-mode .step-card,
body.dark-mode .chat-input-area { background: var(--card-bg); border-color: var(--border); }
body.dark-mode .profile-card { background: var(--warm-white); border-color: var(--border); }
body.dark-mode .why-item,
body.dark-mode .resource-card,
body.dark-mode .quote-card { background: var(--warm-white); border-color: var(--border); }
body.dark-mode .resource-card .rc-name,
body.dark-mode .why-item strong { color: var(--text-dark); }
body.dark-mode .why-item p,
body.dark-mode .resource-card .rc-desc { color: var(--text-light); }
body.dark-mode .msg.ai .msg-bubble { background: var(--warm-white); border-color: var(--border); color: var(--text-dark); }
body.dark-mode #chat-input { color: var(--text-dark); }
body.dark-mode .char-counter { color: var(--text-light); }
body.dark-mode .chat-disclaimer { background: rgba(200,151,74,0.12); border-color: rgba(200,151,74,0.25); color: var(--text-mid); }
body.dark-mode .notice-box { background: rgba(107,143,113,0.1); }
body.dark-mode .chat-file-chip { background: rgba(61,122,138,0.18); }
body.dark-mode .crisis-banner { background: linear-gradient(135deg,rgba(192,57,43,0.2),rgba(231,76,60,0.12)); }
body.dark-mode .app-header { background: rgba(15,16,22,0.97); border-color: var(--border); }
body.dark-mode .courage-section { background: linear-gradient(135deg,rgba(61,122,138,0.15),rgba(107,143,113,0.1)); }

/* Dark mode toggle button */
.dark-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--warm-white);
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  font-size: 15px;
  color: var(--text-mid);
  transition: all 0.25s;
  flex-shrink: 0;
}
.dark-toggle:hover { border-color: var(--teal); color: var(--teal); transform: rotate(20deg); }
body.dark-mode .dark-toggle { background: rgba(61,122,138,0.2); border-color: var(--teal); color: #7eb8c4; }

/* Smooth transitions */
body, .landing-card, .step-card, .profile-card, .why-item, .resource-card,
.quote-card, .chat-input-area, .msg-bubble, .app-header, .chat-disclaimer {
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}