/* MOGO Secret Santa — design tokens & shared components
   Brand reference: mogo.co.tz (green #7AB800, navy #003478, white). Christmas layer:
   ivory, restrained red, champagne gold. */
:root{
  --green:#7AB800; --green-600:#66A000; --green-800:#416900; --green-50:#F1F7E4;
  --navy:#003478; --navy-900:#00214D; --navy-700:#0B3F86; --navy-50:#EAF0F8;
  --ivory:#FBF8F1; --paper:#FFFFFF; --line:#E6E1D6; --line-strong:#CFC8B8;
  --ink:#0F1B2D; --ink-2:#4A5568; --ink-3:#6B7280;
  --red:#B3202A; --red-50:#FBEDEE; --gold:#C9A45C; --gold-200:#E9D9B4;

  --font-sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r-sm:8px; --r-md:12px; --r-lg:20px;
  --shadow-1:0 1px 2px rgba(0,33,77,.06),0 2px 8px rgba(0,33,77,.06);
  --shadow-2:0 12px 32px rgba(0,33,77,.14);
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:140ms; --t-med:260ms; --t-slow:520ms;
  --container:1080px; --focus:0 0 0 3px var(--paper),0 0 0 5px var(--navy);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 16px/1.55 var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;line-height:1.15;color:var(--navy)}
p{margin:0}
a{color:var(--navy)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--s4)}
.hidden{display:none!important}

/* Top bar */
.topbar{padding:var(--s4) 0}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.brand{display:flex;align-items:center;gap:var(--s3);text-decoration:none}
.brand img{height:34px;width:auto}
.brand .divider{width:1px;height:24px;background:var(--line-strong)}
.brand .tagline{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}

/* Buttons */
.btn{--bg:var(--navy);--fg:#fff;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s5);border:1.5px solid transparent;border-radius:var(--r-md);background:var(--bg);color:var(--fg);font-weight:800;font-size:16px;letter-spacing:.01em;cursor:pointer;text-decoration:none;transition:background var(--t-fast),transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn[disabled]{cursor:not-allowed;filter:saturate(.4);opacity:.7}
.btn svg{width:18px;height:18px;flex:none}
.btn-green{--bg:var(--green);--fg:var(--navy-900)}
.btn-green:hover{--bg:#86C70A;filter:none}
.btn-navy{--bg:var(--navy);--fg:#fff}
.btn-ghost{--bg:transparent;--fg:var(--navy);border-color:var(--line-strong)}
.btn-ghost:hover{--bg:var(--navy-50);filter:none}
.btn-on-dark{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.35)}
.btn-on-dark:hover{--bg:rgba(255,255,255,.08);filter:none}
.btn-danger{--bg:var(--paper);--fg:var(--red);border-color:var(--red)}
.btn-danger:hover{--bg:var(--red-50);filter:none}
.btn-sm{min-height:36px;padding:0 var(--s3);font-size:14px;border-radius:var(--r-sm)}
.btn-block{width:100%}
.btn .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.linkbtn{background:none;border:0;padding:0;color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.field label,.label{font-weight:800;font-size:14px;color:var(--navy)}
.hint{font-size:13px;color:var(--ink-3)}
.input,select.input,textarea.input{width:100%;min-height:48px;padding:12px 14px;background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--r-md);font-size:16px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
textarea.input{min-height:120px;resize:vertical;line-height:1.5}
.input:hover{border-color:#B5AD9B}
.input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,52,120,.15)}
.input[aria-invalid=true]{border-color:var(--red)}
.alert{display:flex;gap:var(--s2);align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);font-size:14px;font-weight:600}
.alert svg{width:18px;height:18px;flex:none;margin-top:1px}
.alert-error{background:var(--red-50);color:#8A1820}
.alert-ok{background:var(--green-50);color:var(--green-800)}
.alert-info{background:var(--navy-50);color:var(--navy)}

/* Surfaces */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.kicker{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;font-variation-settings:"SOFT" 50,"WONK" 0}
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.04em;background:#EEF0F2;color:var(--ink-2)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-green{background:var(--green-50);color:var(--green-800)}
.badge-navy{background:var(--navy-50);color:var(--navy)}
.badge-red{background:var(--red-50);color:var(--red)}

/* Footer */
.site-footer{margin-top:auto;padding:var(--s6) 0 var(--s5);font-size:13px;color:var(--ink-3)}
.site-footer .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2)}
.site-footer a{color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}