/* ============================================================
   FTFamily — Timberlake Church brand foundation

   Design tokens shared by the server-rendered family sign-up pages
   and the team review SPA, so both surfaces look like one product.
   Ported from Clearview's index.css (tokens extracted from
   timberlakechurch.com) — keep the two in sync when the brand moves.
   ============================================================ */

:root {
  /* ── Brand palette ──────────────────────────────────────── */
  --tlc-salmon:      #f47c70;  /* primary accent */
  --tlc-salmon-700:  #e0685c;  /* hover / pressed */
  --tlc-charcoal:    #161616;
  --tlc-dark-gray:   #302f2c;
  --tlc-mid-gray:    #888680;
  --tlc-copy-gray:   #555555;
  --tlc-light-gray:  #f5f5f7;
  --tlc-white:       #ffffff;
  --tlc-bice:        #1a6dab;  /* secondary blue */
  --tlc-green:       #07bc9f;  /* secondary green */
  --tlc-powder:      #9cc1e4;  /* secondary light blue */
  --tlc-sunset:      #ffcb77;  /* secondary yellow */

  /* ── Semantic tokens (light theme) ──────────────────────── */
  --bg:            var(--tlc-light-gray);
  --surface:       var(--tlc-white);
  --surface-alt:   var(--tlc-light-gray);
  --surface-sunken:#ececef;
  --text:          var(--tlc-charcoal);
  --text-body:     var(--tlc-copy-gray);
  --text-muted:    var(--tlc-mid-gray);
  --border:        #e2e2e6;
  --border-strong: #c8c8cc;
  --accent:        var(--tlc-salmon);
  --accent-hover:  var(--tlc-salmon-700);
  --accent-soft:   rgba(244, 124, 112, 0.12);
  --on-accent:     #ffffff;

  /* ── Status colours ─────────────────────────────────────── */
  --ok-bg:      rgba(7, 188, 159, 0.12);
  --ok-border:  rgba(7, 188, 159, 0.4);
  --ok-text:    #06715f;
  --err-bg:     #fdecea;
  --err-border: #f5c6cb;
  --err-text:   #a02622;
  --warn-bg:    rgba(255, 203, 119, 0.22);
  --warn-border:rgba(255, 203, 119, 0.75);
  --warn-text:  #8a5a00;

  /* ── Type ───────────────────────────────────────────────── */
  --font-sans: 'General Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Radius / shadow / motion ───────────────────────────── */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(22, 22, 22, 0.06), 0 1px 3px rgba(22, 22, 22, 0.08);
  --shadow:    0 4px 16px rgba(22, 22, 22, 0.08);
  --shadow-lg: 0 12px 40px rgba(22, 22, 22, 0.16);
  --ease:      0.18s ease;

  font-family: var(--font-sans);
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-body);
  background-color: var(--bg);

  color-scheme: light;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Dark theme — brand-tuned (charcoal surfaces, salmon accent) ──────── */
:root[data-theme='dark'] {
  --bg:            #141312;
  --surface:       #1f1d1b;
  --surface-alt:   #2a2824;
  --surface-sunken:#0e0d0c;
  --text:          #f4f3f0;
  --text-body:     #d2cfc8;
  --text-muted:    #9c988d;
  --border:        #34322c;
  --border-strong: #4a463e;
  --accent:        var(--tlc-salmon);
  --accent-hover:  #f8978c;
  --accent-soft:   rgba(244, 124, 112, 0.16);
  --on-accent:     #1a1413;

  --ok-bg:      rgba(7, 188, 159, 0.14);
  --ok-border:  rgba(7, 188, 159, 0.45);
  --ok-text:    #3fd9c0;
  --err-bg:     rgba(160, 38, 34, 0.18);
  --err-border: rgba(245, 198, 203, 0.35);
  --err-text:   #f6a9a5;
  --warn-bg:    rgba(255, 203, 119, 0.16);
  --warn-border:rgba(255, 203, 119, 0.4);
  --warn-text:  #ffcb77;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow:    0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text-body);
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--text);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--ease);
}
a:hover { color: var(--accent-hover); }

button { font-family: var(--font-sans); cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Shared primitives ──────────────────────────────────────────
   The card / button / field / message vocabulary Clearview uses on
   its admin page, named neutrally so both surfaces can share it. */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
}

.btn {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  font-family: var(--font-sans);
  font-weight: 500;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover:not(:disabled) { background: var(--surface-alt); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  padding: 0.5rem 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn--danger { color: var(--err-text); border-color: #f1b0b7; }
.btn--danger:hover:not(:disabled) { background: var(--err-bg); }

.btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-alt); color: var(--text); }

.message {
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
}
.message--success { background: var(--ok-bg);   border: 1px solid var(--ok-border);   color: var(--ok-text); }
.message--error   { background: var(--err-bg);  border: 1px solid var(--err-border);  color: var(--err-text); }
.message--warn    { background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); }

.badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.badge--pending { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.badge--pushed  { background: var(--ok-bg);   border-color: var(--ok-border);   color: var(--ok-text); }
.badge--partial { background: var(--err-bg);  border-color: var(--err-border);  color: var(--err-text); }
.badge--rejected{ background: var(--surface-sunken); border-color: var(--border-strong); color: var(--text-muted); }

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