/* ============================================================
   myCFAOS — BRAND SYSTEM
   The design tokens and base components for the myCFAOS web app.
   Palette, typography (Poppins), buttons, inputs, and cards all
   live here so every screen shares one look.

   Palette source: Ryan's myCFAOS brand guidelines (2026-07-24).
   ============================================================ */

:root{
  /* ── Brand palette ── */
  --navy:#0B1F33;      /* Deep Navy   — primary ink, headers, buttons (matches logo) */
  --blue:#1E3A8A;      /* Brand Blue  — links, focus, accents */
  --red:#E51636;       /* Accelerate Red — the "OS", highlights, motion (matches logo) */
  --slate:#475569;     /* Slate       — body text, secondary */
  --gray:#94A3B8;      /* Medium Gray — muted labels, hints */
  --light:#F1F5F9;     /* Light Gray  — page background, tracks */
  --green:#16A34A;     /* Success */
  --orange:#F59E0B;    /* Warning */
  --purple:#7C3AED;    /* Focus */
  --white:#ffffff;
  --line:#e2e8f0;      /* hairline borders on the light UI */

  /* ── Type ── */
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* ── Shape ── */
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(13,27,42,0.08);
  --shadow-sm:0 2px 8px rgba(13,27,42,0.06);
}

/* ── Reset & base ── */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:var(--font);
  color:var(--navy);
  background:var(--light);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ── Wordmark (myCFAOS) ── */
.wordmark{
  font-weight:700;letter-spacing:-0.02em;line-height:1;
  color:var(--navy);white-space:nowrap;
}
.wordmark .my{font-weight:500;}
.wordmark .os{color:var(--red);}

.logo{display:inline-flex;align-items:center;gap:10px;}
.logo .mark{display:block;flex-shrink:0;}

/* ── Buttons ── */
.btn{
  font-family:inherit;font-weight:600;font-size:14px;
  padding:11px 20px;border-radius:var(--radius-sm);
  border:1.5px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background 0.15s, border-color 0.15s, transform 0.05s, box-shadow 0.15s;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--navy);color:#fff;}
.btn-primary:hover{background:#132639;}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{background:#c4162a;}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line);}
.btn-ghost:hover{background:var(--light);border-color:#cbd5e1;}
.btn-sm{font-size:13px;padding:7px 13px;}

/* ── Inputs ── */
.input{
  width:100%;font-family:inherit;font-size:15px;
  padding:11px 14px;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;color:var(--navy);
}
.input::placeholder{color:var(--gray);}
.input:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(30,58,138,0.12);
}

/* ── Card ── */
.card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}

/* ── Motion lines (the "Accelerate" accent) ── */
.motion-accent{
  height:4px;width:100%;border-radius:4px;
  background:linear-gradient(90deg, var(--navy) 0%, var(--blue) 55%, var(--red) 100%);
}