/*
 * caarmo-theme.css — single source of truth for design tokens + shared components.
 *
 * Load BEFORE any page-specific <style> block so per-page rules can override
 * via specificity, but the base tokens are always available via var(--token).
 *
 * Reference: portal.html cream-and-cards aesthetic. Public pages get a top
 * header with the SVG logo; portal/admin keep their sidebar nav.
 */

/* ────────────────────────────────────────────────────────────────
 * 1. Design tokens
 * ──────────────────────────────────────────────────────────────── */
:root {
  /* — Inks (dark to light text) — */
  --black:  #09090A;
  --ink:    #111110;
  --ink2:   #2A2A27;
  --ink3:   #5A5A54;
  --ink4:   #9A9A90;
  --ink5:   #C8C8BC;

  /* — Creams (light backgrounds) — */
  --cream:  #F8F6F0;
  --cream2: #F2EFE7;
  --cream3: #E8E4D8;

  /* — Surfaces & borders — */
  --bg:      var(--cream);
  --surface: #FFFFFF;
  --surface2:var(--cream2);
  --border:  var(--cream3);
  --border2: #D5D0C4;

  /* — Brand greens — */
  --green:    #1A4030;   /* deep brand */
  --green2:   #2A6048;   /* hover / mid */
  --green3:   #3AB54A;   /* CTA bright */
  --green-lt: #D5EDE3;
  --green-mid:#EAF4EE;

  /* — Accents — */
  --gold:    #B8924A;
  --gold-lt: #F5EDD8;
  --purple:  #3A1870;
  --purple2: #5B2D9E;
  --purple-lt:#EAE4F8;
  --blue:    #162848;
  --blue2:   #1D5FA8;
  --blue-lt: #D8E4F5;
  --rose:    #7A1525;
  --rose-lt: #F5D8DC;
  --amber:   #7A4A08;
  --amber-lt:#F5EDD8;

  /* — Typography — */
  --font-sans:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* — Radius — */
  --r:    3px;
  --rsm:  3px;
  --rmd:  8px;
  --rlg:  12px;
  --rxl:  20px;
  --rpill:9999px;

  /* — Shadows — */
  --shsm: 0 2px 8px  rgba(17,17,16,.06);
  --shmd: 0 8px 32px rgba(17,17,16,.10);
  --shlg: 0 24px 80px rgba(17,17,16,.18);

  /* — Spacing scale (use in rem) — */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* — Transitions — */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t-base: 200ms cubic-bezier(.4,0,.2,1);
}

/* ────────────────────────────────────────────────────────────────
 * 2. Reset + base
 * ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background:  var(--bg);
  color:       var(--ink);
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.serif { font-family: var(--font-serif); }

/* ────────────────────────────────────────────────────────────────
 * 3. Top header (public pages: index, auth, diagnostics, results)
 *    Signed-in dashboards (portal, admin) keep their sidebar.
 * ──────────────────────────────────────────────────────────────── */
.caarmo-hdr {
  width: 100%;
  background: var(--black);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 100;
}
.caarmo-hdr-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.caarmo-hdr-link {
  font-size: 13px;
  color: rgba(248,246,240,.55);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: .02em;
  transition: color var(--t-fast);
}
.caarmo-hdr-link:hover { color: rgba(248,246,240,.9); }

/* ────────────────────────────────────────────────────────────────
 * 4. Brand SVG logo  (injected by caarmo.logo() helper in caarmo-common.js)
 *    Container is just a flex slot; the SVG inside handles its own colors.
 * ──────────────────────────────────────────────────────────────── */
.caarmo-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  line-height: 1;
}
.caarmo-logo svg { display: block; height: 32px; width: auto; }
.caarmo-logo .caarmo-logo-mark { display: block; height: 32px; width: auto; flex-shrink: 0; }
.caarmo-logo .caarmo-logo-text {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────────
 * 5. Buttons
 * ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  border: 1.5px solid transparent;
  border-radius: var(--rmd);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-base);
  user-select: none;
}
.btn-primary {
  background: var(--black);
  color: var(--cream);
}
.btn-primary:hover { background: var(--ink2); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--cream2); border-color: var(--border2); }
.btn-cta {
  background: var(--green3);
  color: #fff;
}
.btn-cta:hover { background: var(--green2); transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ────────────────────────────────────────────────────────────────
 * 6. Cards
 * ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rlg);
  overflow: hidden;
}
.card-hdr {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.card-sub {
  font-size: 12px;
  color: var(--ink4);
  margin-top: 2px;
}
.card-body { padding: var(--space-6); }

/* ────────────────────────────────────────────────────────────────
 * 7. Forms
 * ──────────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-4); }
.field-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink3);
  margin-bottom: 6px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.field-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font-sans);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  outline: none;
  border-radius: var(--rsm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field-input:focus {
  border-color: var(--ink4);
  box-shadow: 0 0 0 3px rgba(17,17,16,.04);
}
.field-input::placeholder { color: var(--ink5); }
.field-input.err { border-color: var(--rose); }
.field-err {
  font-size: 11px;
  color: var(--rose);
  margin-top: 4px;
  display: none;
}
.field-err.show { display: block; }

/* ────────────────────────────────────────────────────────────────
 * 8. Status messages
 * ──────────────────────────────────────────────────────────────── */
.alert {
  padding: .875rem 1rem;
  font-size: 13px;
  border-radius: var(--rsm);
  margin-bottom: var(--space-4);
  font-weight: 300;
  border-left: 3px solid;
}
.alert-ok   { background: var(--green-lt); border-color: var(--green2); color: var(--green); }
.alert-err  { background: var(--rose-lt);  border-color: var(--rose);   color: var(--rose); }
.alert-info { background: var(--gold-lt);  border-color: var(--gold);   color: var(--amber); }
.alert-warn { background: var(--amber-lt); border-color: var(--amber);  color: var(--amber); }

/* ────────────────────────────────────────────────────────────────
 * 9. Utilities
 * ──────────────────────────────────────────────────────────────── */
.muted     { color: var(--ink4); }
.text-sm   { font-size: 12px; }
.text-md   { font-size: 14px; }
.text-lg   { font-size: 16px; }
.hidden    { display: none !important; }
.no-scroll { overflow: hidden; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* — Loading spinner (small) — */
.spin {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(17,17,16,.2);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: caarmo-spin .7s linear infinite;
}
@keyframes caarmo-spin { to { transform: rotate(360deg); } }