/* ============================================================
   GLOBAL SUMMIT FOR EYE HEALTH 2026 — Commitment Suite
   Shared design system  ·  stakeholder-review wireframes
   ------------------------------------------------------------
   Brand fonts:   Lexend (headings)  ·  Reddit Sans (body/UI)
   Brand colours: GS-Tech Electric #003DFF · GS-Brighter #0098FF
                  GS-Core #000000 · White #FFFFFF
   NOTE: red/green below are FUNCTIONAL status colours only
   (overdue / complete). Swap for official brand values if any.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Lexend';
  src: url('../fonts/Lexend-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Reddit Sans';
  src: url('../fonts/RedditSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Reddit Sans';
  src: url('../fonts/RedditSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Reddit Sans';
  src: url('../fonts/RedditSans-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Reddit Sans';
  src: url('../fonts/RedditSans-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --gs-electric: #003DFF;   /* GS-Tech Electric — primary action / accent */
  --gs-bright:   #0098FF;   /* GS-Brighter — secondary accent / info      */
  --gs-core:     #000000;   /* GS-Core                                    */
  --white:       #FFFFFF;

  /* Electric tints (for soft fills) */
  --electric-soft: #E7ECFF;
  --bright-soft:   #E3F3FF;

  /* Functional status ONLY (not brand — see note above) */
  /* Darkened from #12855B / #D42D2D so the badge text clears WCAG AA (4.5:1) against
     its own soft background — the originals sat at 4.09 and 4.26. Same hues, and these
     were always designated swappable. */
  --ok:        #107A53;   /* complete / signed off · 4.72:1 on --ok-soft    */
  --ok-soft:   #E3F5EC;
  --alert:     #C62828;   /* overdue / critical    · 4.80:1 on --alert-soft */
  --alert-soft:#FCE9E9;

  /* Neutral greys (cool) */
  --g-0:  #FFFFFF;
  --g-50: #F5F7FA;
  --g-100:#EAEEF3;
  --g-200:#D8DEE6;
  --g-300:#BAC3CE;
  --g-400:#8B95A3;
  --g-500:#616B7A;
  --g-600:#414A56;
  --g-700:#2A313A;
  --g-800:#171C22;

  /* Fonts */
  --font-head: 'Lexend', system-ui, sans-serif;
  --font-body: 'Reddit Sans', system-ui, sans-serif;

  /* Type scale — bumped up for legibility vs. the old wireframes */
  --fs-eyebrow: 12px;
  --fs-2xs: 12.5px;
  --fs-xs:  13.5px;
  --fs-sm:  15px;
  --fs-base:16px;
  --fs-md:  18px;
  --fs-lg:  21px;
  --fs-xl:  25px;
  --fs-2xl: 31px;
  --fs-3xl: 40px;
  --fs-4xl: 52px;

  /* Structure */
  --border: 2px solid var(--gs-core);
  --shadow: 5px 5px 0 0 var(--gs-core);
  --shadow-sm: 3px 3px 0 0 var(--gs-core);
  --radius: 0px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--g-50);
  color: var(--gs-core);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--gs-core); cursor: pointer; text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
:focus-visible { outline: 3px solid var(--gs-bright); outline-offset: 1px; }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--gs-bright); outline-offset: 0; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--g-500);
}
.head { font-family: var(--font-head); font-weight: 800; }
.muted { color: var(--g-500); }
.h1 { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-3xl); line-height: 1.05; letter-spacing: -0.02em; }
.h2 { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-xl); line-height: 1.1; }
.h3 { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-md); line-height: 1.2; }

/* ---------- Layout ---------- */
.topbar {
  background: var(--gs-core);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-2xs);
  letter-spacing: 0.05em;
  text-align: center;
  padding: 8px 14px;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: clamp(18px,3vw,30px) clamp(16px,3.5vw,28px) 72px; }

/* ---------- Brand mark ---------- */
.mark {
  width: 44px; height: 44px; background: var(--gs-core);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mark svg { display: block; }

/* ---------- Cards ---------- */
.card { border: var(--border); background: var(--white); }
.card-pop { border: var(--border); background: var(--white); box-shadow: var(--shadow); }
.card-accent { border-top: 8px solid var(--gs-electric); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  border: var(--border);
  background: var(--white);
  color: var(--gs-core);
  padding: 11px 17px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: transform .04s ease, box-shadow .08s ease, background .1s ease;
}
.btn:hover { box-shadow: var(--shadow-sm); }
.btn:active { transform: translate(2px,2px); box-shadow: none; }
.btn-primary { background: var(--gs-electric); color: var(--white); border-color: var(--gs-core); }
.btn-primary:hover { background: #0030CC; }
.btn-dark { background: var(--gs-core); color: var(--white); }
.btn-ghost { border-color: var(--g-300); color: var(--g-600); font-size: var(--fs-2xs); padding: 8px 12px; }
.btn-lg { font-size: var(--fs-md); padding: 14px 22px; }
.btn-sm { font-size: var(--fs-2xs); padding: 8px 12px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* ---------- Inputs ---------- */
.input, .select, .textarea {
  width: 100%;
  border: var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: 11px 13px;
  border-radius: 0;
  color: var(--gs-core);
}
.textarea { line-height: 1.55; resize: vertical; }
.field-label { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); margin-bottom: 6px; display: block; }
.field-hint { font-size: var(--fs-2xs); color: var(--g-500); margin-top: 5px; }

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  border: 1.5px solid var(--gs-core); padding: 3px 8px; white-space: nowrap;
}
.badge-ref { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-2xs);
  background: var(--g-100); border: 1px solid var(--g-300); padding: 3px 8px; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.badge-electric { background: var(--gs-electric); color: var(--white); border-color: var(--gs-core); }
.badge-bright { background: var(--gs-bright); color: var(--gs-core); }
.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.badge-alert { background: var(--alert-soft); color: var(--alert); border-color: var(--alert); }
.badge-dark { background: var(--gs-core); color: var(--white); }
.badge-soft { background: var(--g-100); color: var(--g-600); border-color: var(--g-300); }

/* ---------- Callouts ---------- */
.callout { border: var(--border); border-left: 7px solid var(--gs-electric); background: var(--white); padding: 13px 16px; }
.callout-bright { border-left-color: var(--gs-bright); }
.callout-alert { border-left-color: var(--alert); }
.callout-ok { border-left-color: var(--ok); }
.callout-dash { border: 2px dashed var(--g-400); padding: 13px 16px; color: var(--g-600); }

/* ---------- Misc ---------- */
.rule { height: 1px; background: var(--g-200); border: 0; margin: 0; }
.scrollx::-webkit-scrollbar { height: 7px; }
.scrollx::-webkit-scrollbar-thumb { background: var(--g-300); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-2xs);
  background: var(--gs-core); color: var(--white); padding: 5px 10px; cursor: pointer;
}
.link-underline { font-family: var(--font-head); font-weight: 700; border-bottom: 2px solid var(--gs-core); padding-bottom: 1px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .suite-grid, .arch-grid, .two-col { grid-template-columns: 1fr !important; }
}