/* Baseline element and form styles for the public landing page.
 *
 * WHERE THIS LOADS: only templates/landing_page.html (the marketing page and
 * its sign-in face, served at / and /login/). Nothing else loads it:
 * base_auth.html, base_standalone.html, legal/base_legal.html and the mailer
 * templates carry their own styles, and every signed-in page goes through
 * base.html, which loads summit_theme.css instead.
 *
 * The landing page's own inline <style> does most of the work; this file only
 * supplies the element baseline underneath it (page colors, headings, labels,
 * inputs, buttons, the .btn primary style, .field inputs, .eyebrow, and the
 * card frame on the brand/form/sign-in cards). It used to be a full copy of
 * the old app component layer; everything the landing page cannot match was
 * removed in the phase 4 cleanup. Add app styles to summit_theme.css, not here.
 *
 * THEMING: each name below is an ALIAS of the matching --c-* token from
 * summit_theme.css, with the old dark value as the fallback. summit_theme.css
 * is not loaded on the landing page, so the fallbacks are what renders.
 */

:root{
  --bg-app:var(--c-bg-app, #111315);
  --surface-1:var(--c-surface-0, #1A1D21);
  --surface-2:var(--c-surface-1, #1E2227);
  --border-subtle:var(--c-border, #31363D);
  --text-primary:var(--c-text, #F3F4F6);
  --text-secondary:var(--c-muted, rgba(243,244,246,0.60));
  /* Named "blue" from an older palette; it has been the copper accent for
     a long time. */
  --accent-blue:var(--c-accent, #C97A32);
  --accent-blue-2:var(--c-accent-2, #E29A52);
  --on-accent:var(--c-on-accent, #0e0a06);
  /* Subtle "lift" overlay: white on dark, near-black on light. */
  --tint-rgb:var(--c-tint-rgb, 255, 255, 255);
  --shadow-soft:var(--shadow-md, 0 10px 30px rgba(0,0,0,0.28));
  --ref-line:var(--c-border, #31363D);
  --ref-copy:var(--c-text, #F3F4F6);
  /* NOTE: --shadow-focus is deliberately NOT defined here. summit_theme.css
     owns that name. The one use site below carries the old value as its
     fallback instead. */
}

html, body{
  background:var(--bg-app);
  color:var(--text-primary);
}

body{
  font-family: "Segoe UI", "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ref-copy);
}

h1{
  font-size:clamp(1.5rem, 2vw, 2rem);
  line-height:1.2;
  letter-spacing:0.01em;
  margin:0 0 16px;
  font-weight:700;
  color:var(--text-primary);
}

h2, h3{
  color:var(--text-primary);
  font-weight:650;
}

label{
  color:var(--text-secondary) !important;
}

/* Card frame: matches .brand-card, .form-card and .signin-card. */
[class$="-card"],
[class*="-card "]{
  background:linear-gradient(180deg, var(--surface-1), var(--surface-2)) !important;
  border:1px solid var(--border-subtle) !important;
  border-radius:8px !important;
  box-shadow:var(--shadow-soft) !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea{
  background:rgba(var(--tint-rgb),0.03) !important;
  border:1px solid var(--border-subtle) !important;
  color:var(--text-primary) !important;
  border-radius:5px !important;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--c-accent, rgba(77,163,255,0.68)) !important;
  box-shadow:var(--shadow-focus, 0 0 0 3px rgba(201,122,50,0.28)) !important;
}

/* ── Buttons ─────────────────────────────────────────────────
   Bare .btn is the PRIMARY action style (Summit orange); the landing page
   uses .btn-primary and .btn-outline. :where() keeps specificity at a plain
   class level so the page's inline styles can override these without
   !important. */

.btn,
button,
input[type="button"],
input[type="submit"],
a.btn{
  border:1px solid var(--border-subtle);
  border-radius:5px;
  font-weight:600;
  letter-spacing:0.01em;
  transition:transform .14s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

a.btn{ text-decoration:none; }

/* Primary */
.btn:where(:not(.btn-ghost):not(.btn-secondary):not(.btn-outline):not(.btn-red):not(.btn-link):not(.btn-disabled)),
.btn-primary,
button:where([type="submit"]:not(.btn-ghost):not(.btn-red):not(.btn-secondary):not(.btn-link)),
input[type="submit"]{
  background:linear-gradient(135deg, var(--accent-blue), var(--accent-blue-2));
  border-color:var(--c-accent-border, rgba(201,122,50,0.50));
  color:var(--on-accent);
}

.btn:where(:not(.btn-ghost):not(.btn-secondary):not(.btn-outline):not(.btn-red):not(.btn-link):not(.btn-disabled)):hover,
.btn-primary:hover,
button:where([type="submit"]:not(.btn-ghost):not(.btn-red):not(.btn-secondary):not(.btn-link)):hover,
input[type="submit"]:hover{
  background:var(--accent-blue-2);
  border-color:var(--c-accent-border, rgba(226,154,82,0.70));
}

/* Hover lift */
.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.btn:hover{
  transform:translateY(-1px);
}

table{
  width:100%;
  border-collapse:collapse;
  background:transparent !important;
}

thead th{
  color:var(--text-secondary);
  font-weight:600;
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--border-subtle);
  background:rgba(var(--tint-rgb),0.02) !important;
}

tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(var(--tint-rgb),0.06);
}

tbody tr{
  background:transparent !important;
}

tbody tr:hover{
  background:rgba(var(--tint-rgb),0.03) !important;
}

.field input,
.field select,
.field textarea{
  border-radius:6px !important;
  border-color:var(--ref-line) !important;
  background:rgba(var(--tint-rgb),.04) !important;
  color:var(--ref-copy) !important;
}

.eyebrow{
  color:var(--c-dim, rgba(222,228,241,.56)) !important;
  letter-spacing:.18em !important;
}