@charset "UTF-8";
/* ==========================================================================
   Gospel Training Initiative (GTI) — South Sudan
   variables.css — the single source of design tokens.

   Every colour, type step, radius, shadow and timing used by the public site
   *and* the admin dashboard is declared here. The dashboard (assets/css/admin.css)
   imports this file, which is why the two interfaces can never drift apart:
   change --navy here and both the website and the CMS re-brand.

   Palette derived from the GTI logo:
     navy #213B6D · green #2AB579 · sky #CDE9F4
   ========================================================================== */

:root {
  /* Brand — navy */
  --navy-ink: #0f1d38;
  --navy-deep: #16294d;
  --navy: #213b6d;
  --navy-soft: #2c4c86;
  --navy-mid: #4a6ba5;
  --navy-line: #dbe4f1;

  /* Brand — green */
  --green-dark: #14663f;
  --green-deep: #1e8f5e;
  --green: #2ab579;
  --green-light: #63d1a1;
  --green-pale: #e6f7ef;

  /* Brand — sky */
  --sky: #cde9f4;
  --sky-soft: #dff1f8;
  --sky-pale: #f0f9fc;

  /* Neutrals */
  --white: #ffffff;
  --surface: #ffffff;
  --surface-alt: #f6f9fc;
  --surface-warm: #fbf8f2;
  --line: #e3eaf3;
  --line-soft: #eef3f8;

  /* Text */
  --ink: #16233c;
  --body: #4a5a73;
  --muted: #6b7c96;
  --on-dark: #eaf1fa;
  --on-dark-muted: #a9bcd6;

  /* Type */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
  --step-0: clamp(0.97rem, 0.93rem + 0.2vw, 1.06rem);
  --step-1: clamp(1.12rem, 1.03rem + 0.42vw, 1.35rem);
  --step-2: clamp(1.35rem, 1.16rem + 0.9vw, 1.85rem);
  --step-3: clamp(1.65rem, 1.31rem + 1.6vw, 2.6rem);
  --step-4: clamp(2rem, 1.44rem + 2.6vw, 3.5rem);
  --step-5: clamp(2.35rem, 1.4rem + 4.2vw, 4.6rem);

  /* Space + shape */
  --container: 1200px;
  --container-narrow: 860px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.6rem, 7vw, 7rem);
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15, 29, 56, 0.06);
  --shadow-sm: 0 4px 14px -6px rgba(15, 29, 56, 0.12);
  --shadow: 0 16px 38px -18px rgba(15, 29, 56, 0.22);
  --shadow-lg: 0 34px 70px -30px rgba(15, 29, 56, 0.34);
  --shadow-green: 0 18px 38px -18px rgba(30, 143, 94, 0.48);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s var(--ease);
  --t: 0.34s var(--ease);
  --t-slow: 0.7s var(--ease-out);
  /* Drawer travel: a decelerating curve that settles rather than eases out over
     0.7s, which reads as lag across a full panel width. */
  --t-drawer: 0.4s cubic-bezier(0.32, 0.72, 0.28, 1);

  /* Chrome */
  --header-h: 78px;
  --topbar-h: 42px;
  --z-header: 60;
  --z-drawer: 70;
  --z-overlay: 90;
}
/* --------------------------------------------------- admin-only scale --- */
:root {
  /* A comfortable dashboard rhythm (the public site uses --section-y). */
  --admin-sidebar-w: 264px;
  --admin-topbar-h: 68px;
  --admin-gutter: clamp(1rem, 2.4vw, 2rem);
  --admin-card-pad: clamp(1.05rem, 1.8vw, 1.5rem);
  --admin-radius: 14px;
  --admin-bg: #f4f7fb;
  --admin-surface: #ffffff;
  --admin-border: #e4ebf4;
  --admin-sidebar: var(--navy-ink);
  --admin-sidebar-soft: #172a4e;
  --admin-sidebar-ink: #c9d8ee;
  --admin-sidebar-active: rgba(42, 181, 121, 0.16);
  --admin-shadow: 0 10px 30px -18px rgba(15, 29, 56, 0.28);
  --admin-shadow-lg: 0 24px 60px -30px rgba(15, 29, 56, 0.42);
  --admin-ok: var(--green);
  --admin-warn: #d98324;
  --admin-err: #cf4436;
  --admin-info: var(--navy-mid);
}