/* ===========================================================================
   theme.css  —  GLOBAL DESIGN TOKENS  (single source of truth for the look)
   ---------------------------------------------------------------------------
   To re-skin the whole app in future, edit ONLY this file. Nothing else
   hard-codes a colour, font, radius, shadow, or timing — every component in
   style.css reads from these CSS variables.

   Palette is derived from the live event site (omanhealthexpo.com),
   brand green #44b749.
   =========================================================================== */

:root {
  /* ---- brand / accent ------------------------------------------------- */
  --brand:       #44b749;   /* vital green — primary actions, active states  */
  --brand-600:   #37a23d;   /* hover                                         */
  --brand-700:   #2c8a34;   /* active / pressed                              */
  --brand-50:    #eef8ef;   /* tint fills, selected option background         */
  --brand-100:   #d8efda;   /* subtle borders on selected                    */

  /* ---- ink / neutrals ------------------------------------------------- */
  --ink:         #0e2a1b;   /* primary text / headings (green-tinted black)  */
  --muted:       #5b6b60;   /* secondary text, helper notes                  */
  --bg:          #f3f8f3;   /* page background — faint green mist             */
  --surface:     #ffffff;   /* cards, inputs                                 */
  --surface-2:   #f4f8f4;   /* readonly inputs, quiet fills                   */
  --line:        #e1ebe2;   /* hairline borders                              */

  /* ---- feedback ------------------------------------------------------- */
  --danger:      #d92d20;
  --danger-bg:   #fef3f2;
  --ring:        rgba(68,183,73,.30);   /* focus ring                        */

  /* ---- elevation ------------------------------------------------------ */
  --shadow-sm:   0 1px 2px rgba(14,42,27,.06);
  --shadow-md:   0 8px 24px -8px rgba(14,42,27,.18);
  --shadow-pop:  0 16px 48px -12px rgba(14,42,27,.28);

  /* ---- typography ----------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- shape ---------------------------------------------------------- */
  --radius-input: 12px;
  --radius-card:  18px;
  --radius-pill:  999px;
  --maxw:         620px;    /* base desktop column for the email/role steps    */
  --maxw-form:    920px;    /* wider desktop column while the form is on screen */

  /* ---- motion --------------------------------------------------------- */
  --ease:    cubic-bezier(.2,.6,.2,1);
  --t-fast:  .18s;   /* hover / focus state changes                         */
  --t-step:  .32s;   /* step transitions                                    */
}