/* DrugCheck Africa -- Design tokens & shared components
   Ported from the Africa Rising Academy design system (Montserrat + warm
   cream/green/gold palette, token-driven, light/dark via [data-theme]).
   Load this BEFORE app.css / any page-specific stylesheet -- app.css consumes
   these custom properties rather than hardcoding colors. */

:root {
  /* Brand */
  --green:        #20A941;
  --green-deep:   #0F5021;
  --green-deeper: #0a3817;
  --green-tint:   #80DB99;
  --green-wash:   #eaf7ee;
  --red:          #E22929;
  --red-deep:     #AE1F29;
  --olive:        #564C31;
  --cream:        #FAF8EB;
  --ink:          #1C1C1A;
  --ink-soft:     #4b4b46;
  --muted:        #6b6b63;
  --line:         #e4e2d4;
  --card:         #ffffff;
  --bg:           #f6f5ec;
  --gold:         #c9a227;

  /* Typography */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* Radius / shadow / motion */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(28,28,26,.06), 0 1px 3px rgba(28,28,26,.08);
  --shadow:    0 4px 12px rgba(28,28,26,.08), 0 2px 4px rgba(28,28,26,.05);
  --shadow-lg: 0 18px 40px rgba(15,80,33,.14), 0 6px 14px rgba(28,28,26,.08);
  --ring:      0 0 0 3px rgba(32,169,65,.40);
  --t-fast: 120ms ease;
  --t:      200ms ease;

  --maxw: 1180px;
  --surface-sunken: #efeee1;

  --success:      #20A941; --success-fg: #0B5C28; --success-wash: #eaf7ee;
  --warning:      #C9860F; --warning-fg: #8A5A06; --warning-wash: #fbf1da;
  --error:        #E22929; --error-fg:   #AE1F29; --error-wash:   #fbeaea;
  --info:         #0E7C86; --info-fg:    #0A5C64; --info-wash:    #e4f3f4;

  --elev-1: var(--shadow-sm);
  --elev-2: var(--shadow);
  --elev-3: var(--shadow-lg);
  --r-sm:   8px;  --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-pill: 999px;

  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px;
  --sp6: 32px; --sp7: 48px; --sp8: 64px; --sp9: 96px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --green:        #34c759;
    --green-deep:   #2aa84a;
    --green-tint:   #1d6b34;
    --green-wash:   #15271b;
    --cream:        #15170f;
    --ink:          #ECEADC;
    --ink-soft:     #c6c4b6;
    --muted:        #9a9a8e;
    --line:         #2c2f25;
    --card:         #1c1f17;
    --bg:           #121309;
    --green-deeper: #1e7f37;
    --surface-sunken: #0d0e07;
    --success:      #34c759; --success-fg: #57d97a; --success-wash: #15271b;
    --warning:      #e0a22a; --warning-fg: #e8b54e; --warning-wash: #2a2110;
    --error:        #f26d6d; --error-fg:   #f58a8a; --error-wash:   #2a1414;
    --info:         #3ab0bc; --info-fg:    #5fc4ce; --info-wash:    #10262a;
  }
}
:root[data-theme="dark"] {
  --green:        #34c759;
  --green-deep:   #2aa84a;
  --green-tint:   #1d6b34;
  --green-wash:   #15271b;
  --cream:        #15170f;
  --ink:          #ECEADC;
  --ink-soft:     #c6c4b6;
  --muted:        #9a9a8e;
  --line:         #2c2f25;
  --card:         #1c1f17;
  --bg:           #121309;
  --green-deeper: #1e7f37;
  --surface-sunken: #0d0e07;
  --success:      #34c759; --success-fg: #57d97a; --success-wash: #15271b;
  --warning:      #e0a22a; --warning-fg: #e8b54e; --warning-wash: #2a2110;
  --error:        #f26d6d; --error-fg:   #f58a8a; --error-wash:   #2a1414;
  --info:         #3ab0bc; --info-fg:    #5fc4ce; --info-wash:    #10262a;
}

/* ---- Base ---- */
*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  font-family:var(--font-sans);font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-sans);font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4vw,3rem);line-height:1.18}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.3rem}
a{color:var(--green-deep)}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* ---- Icon system: custom duotone SVG, no emoji, no icon font ---- */
.ico{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;vertical-align:-0.14em;flex:none;line-height:0;color:currentColor}
.ico svg{width:100%;height:100%;display:block}
.ico--lg{width:1.25em;height:1.25em}
.ico--xl{width:1.6em;height:1.6em}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:700;font-size:.95rem;line-height:1;
  padding:12px 20px;border-radius:10px;border:1px solid transparent;
  cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease;
  white-space:nowrap;text-decoration:none;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--green) 0%,var(--green-deep) 100%);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{color:#fff;box-shadow:var(--shadow);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--green-deep);border-color:var(--green)}
.btn-outline:hover{background:var(--green-wash);color:var(--green-deep)}
.btn-ghost{background:transparent;color:var(--ink-soft)}
.btn-ghost:hover{background:var(--green-wash);color:var(--green-deep)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:var(--red-deep);color:#fff}
.btn-gold{background:linear-gradient(135deg,var(--gold),#a9821a);color:#1c1606;box-shadow:var(--shadow-sm)}
.btn-block{width:100%}
.btn-lg{padding:15px 28px;font-size:1.05rem}
.btn-sm{padding:8px 14px;font-size:.85rem}
.btn[disabled],.btn.is-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}

/* ---- Cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.card-pad{padding:22px}
.card-hover:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:color-mix(in srgb,var(--green) 30%,var(--line))}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---- Pills / badges ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--green-wash);color:var(--green-deep)}
.pill-red{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red-deep)}
.pill-olive{background:color-mix(in srgb,var(--olive) 16%,transparent);color:var(--olive)}
.pill-gold{background:color-mix(in srgb,var(--gold) 18%,transparent);color:#8a6d12}
.pill-ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}

/* ---- Forms ---- */
.form-group{margin-bottom:18px}
.label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--ink)}
.input,.select,.textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .12s ease,box-shadow .12s ease}
.input:focus,.select:focus,.textarea:focus{border-color:var(--green);box-shadow:var(--ring);outline:none}
.textarea{min-height:120px;resize:vertical}
.field-error{color:var(--red-deep);font-size:.82rem;margin-top:5px}
.input.has-error,.select.has-error{border-color:var(--red)}
.hint{color:var(--muted);font-size:.82rem;margin-top:5px}

/* ---- Alerts & callouts ---- */
.alert{padding:13px 16px;border-radius:10px;margin-bottom:18px;font-size:.93rem;border:1px solid transparent;display:flex;gap:10px;align-items:flex-start}
.alert-success{background:var(--green-wash);border-color:color-mix(in srgb,var(--green) 35%,transparent);color:var(--green-deep)}
.alert-error{background:#fdecec;border-color:color-mix(in srgb,var(--red) 35%,transparent);color:var(--red-deep)}
.alert-info{background:#eef4ff;border-color:#cdddff;color:#2952cc}
.callout{border-left:4px solid var(--green);background:var(--green-wash);padding:14px 18px;border-radius:0 10px 10px 0;margin:18px 0}
.callout-title{font-weight:700;margin-bottom:4px}
.callout.warn{border-color:var(--red);background:#fdecec}
.callout.note{border-color:var(--olive);background:color-mix(in srgb,var(--olive) 8%,transparent)}
.callout.verify{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent)}

/* ---- Focus-visible (accessibility, per spec: 3px green outline) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--green);outline-offset:3px;
}

/* ---- Theme toggle control ---- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;flex:none}
.theme-toggle:hover{color:var(--green-deep);border-color:var(--green)}