/* ============================================================
   PassCMFAS — Shared Foundation Stylesheet
   ------------------------------------------------------------
   This file holds the design tokens and common components that
   every page shares. Page-specific styles stay in each page's
   own <style> block (or its own .css file) for now.

   USAGE:  <link rel="stylesheet" href="styles.css">
   Place this in the same folder as the HTML files.

   See MIGRATION-NOTE.md for how to finish wiring this in.
   ============================================================ */

/* ---------- DESIGN TOKENS (canonical) ---------- */
:root {
  /* Brand */
  --navy:       #1D3F7A;
  --navy-dark:  #142D5A;
  --navy-light: #2B52A0;
  --amber:      #F5A623;
  --amber-lt:   #FCC04A;
  --amber-pale: #FEF3DC;

  /* Neutrals */
  --white:      #FFFFFF;
  --g50:        #F4F6FB;
  --g100:       #E8EDF5;
  --g200:       #D0D9E8;
  --g400:       #8A97AE;
  --g600:       #4A5568;
  --dark:       #1A2B4A;

  /* Status */
  --green:      #16A34A;
  --green-bg:   #DCFCE7;
  --red:        #DC2626;
  --red-bg:     #FEE2E2;
  --orange:     #EA580C;
  --orange-bg:  #FFF0E6;

  /* Third-party */
  --wa:         #25D366;

  /* Warm amber text (used on amber-pale fills) */
  --amber-text: #B45309;

  /* Legacy alias — older pages used --emerald for --green.
     Kept so older files don't break during migration. */
  --emerald:    #16A34A;
}

/* ---------- RESET ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--g50);
  color: var(--dark);
  min-height: 100vh;
}

/* ---------- SHARED NAV ---------- */
.topnav {
  background: var(--white);
  border-bottom: 1px solid var(--g100);
  height: 64px;
  display: flex; align-items: center;
  padding: 0 2rem; gap: 1rem;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 4px rgba(29,63,122,0.06);
}
.logo, .nav-logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem; font-weight: 700;
  color: var(--navy); letter-spacing: -0.02em;
  text-decoration: none; flex-shrink: 0;
}
.logo span, .nav-logo span { color: var(--amber); }
.nav-spacer { flex: 1; }
.nav-link {
  font-size: 0.875rem; font-weight: 500; color: var(--g600);
  text-decoration: none; padding: 0.4rem 0.75rem;
  border-radius: 6px; transition: all 0.15s;
}
.nav-link:hover { color: var(--navy); background: var(--g50); }
.nav-user-chip {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.3rem 0.875rem 0.3rem 0.375rem;
  border: 1px solid var(--g100); border-radius: 20px;
  font-size: 0.8375rem; font-weight: 600; color: var(--dark); cursor: pointer;
}
.nav-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 0.75rem; font-weight: 700;
}

/* ---------- SHARED SECTION LABEL ---------- */
.section-label {
  font-size: 0.7rem; font-weight: 700; color: var(--g400);
  text-transform: uppercase; letter-spacing: 0.1em;
  display: flex; align-items: center; gap: 0.5rem;
}
.section-label::before {
  content: ''; display: block; width: 16px; height: 2px;
  background: var(--amber); border-radius: 2px;
}

/* ---------- SHARED BUTTONS ---------- */
.btn-amber {
  background: var(--amber); color: var(--dark);
  border: none; border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-family: 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-amber:hover { background: var(--amber-lt); transform: translateY(-1px); }

.btn-navy {
  background: var(--navy); color: var(--white);
  border: none; border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-family: 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, transform 0.1s;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-navy:hover { background: var(--navy-dark); transform: translateY(-1px); }

.btn-outline {
  background: var(--white); color: var(--navy);
  border: 1.5px solid var(--g200); border-radius: 8px;
  padding: 0.75rem 1.5rem;
  font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 600;
  cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.btn-outline:hover { border-color: var(--navy); }

.btn-wa {
  background: var(--wa); color: var(--white);
  border: none; border-radius: 7px;
  padding: 0.6rem 0.875rem;
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: background 0.15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn-wa:hover { background: #1ebe5a; }

/* ---------- SHARED SUBJECT BADGE ---------- */
.subj-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--white); background: var(--navy);
  padding: 0.375rem 0.75rem; border-radius: 6px; text-transform: uppercase;
}

/* ---------- SHARED STATUS CHIPS ---------- */
.chip { font-size: 0.68rem; font-weight: 700; padding: 0.225rem 0.7rem; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em; }
.chip-active   { background: var(--green-bg);  color: var(--green); }
.chip-trial    { background: var(--amber-pale); color: var(--amber-text); }
.chip-expired  { background: var(--red-bg);    color: var(--red); }
.chip-expiring { background: var(--orange-bg); color: var(--orange); }