/* Kit tokens. A client's brand kit is a brand.css loaded after this file that overrides :root (and the dark block).
   Values documented in DESIGN.md; the colour layer came from paystack/ui/checkout.css (2026-10-14). */
:root {
  --brand: #2F5D50;        /* buttons, sliders, selected states, focus rings, links */
  --on-brand: #FFFFFF;     /* text on --brand */
  --brand-soft: #EAF1EE;   /* status pills, success rings, selected backgrounds */
  --ground: #F2F3F5;       /* page background */
  --surface: #FFFFFF;      /* cards, sheets, inputs */
  --ink: #16181D;          /* text */
  --muted: #4A505C;        /* secondary text, 4.5:1+ on surface and ground */
  --line: #E3E5EA;         /* dividers, track backgrounds */
  --field: #858B96;        /* input and control borders, 3:1+ on surface and ground */
  --danger: #A23A22;       /* errors, declined, low stock */
  --danger-soft: #FBEAE5;  /* error and low-stock backgrounds */
  --success: #2B6E45;      /* good results (the admin's Good labels); 5.3:1 on --success-soft */
  --success-soft: #E3F1E8;
  --placeholder: #E6E8EC;  /* photo slots */
  --radius: 16px;          /* cards, sheets, primary buttons */
  --radius-sm: 12px;       /* inputs, chips, alerts, thumbnails */
  --radius-sheet: 24px;    /* the phone sheet's top corners */
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font);
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);     /* everything that moves into place */
  --spring: cubic-bezier(.34, 1.56, .64, 1); /* the one overshoot per block */
  --shadow: 0 1px 2px rgb(22 24 29 / .06), 0 12px 32px rgb(22 24 29 / .07);
  --confetti: var(--brand), #F2C14E, #E8836B, #7FB7A4, var(--ink);
  /* scale */
  --w-content: 1160px; --w-narrow: 520px; --w-prose: 68ch;
  --pad: 24px;
  --header-h: 72px;        /* the shell's sticky header; the shell overrides it */
  --section: clamp(56px, 8vw, 112px);
  --t-display: clamp(40px, 6vw, 72px); --t-h1: clamp(28px, 4vw, 38px); --t-h2: clamp(26px, 3.4vw, 40px); --t-h3: 22px; --t-lead: clamp(17px, 1.6vw, 20px);
  --d-fast: .15s; --d: .2s; --d-tick: .32s; --d-enter: .5s; --d-spring: .7s;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --brand: #7CC2A9; --on-brand: #0E1012; --brand-soft: #1C3029;
  --ground: #0E1012; --surface: #181B1F; --ink: #ECEEF1; --muted: #A3AAB5; --line: #2A2F36; --field: #6B7380;
  --danger: #F2917B; --danger-soft: #3A1D17; --success: #8FD3A8; --success-soft: #16301F; --placeholder: #22262B;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #7CC2A9; --on-brand: #0E1012; --brand-soft: #1C3029;
    --ground: #0E1012; --surface: #181B1F; --ink: #ECEEF1; --muted: #A3AAB5; --line: #2A2F36; --field: #6B7380;
    --danger: #F2917B; --danger-soft: #3A1D17; --success: #8FD3A8; --success-soft: #16301F; --placeholder: #22262B;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px rgb(0 0 0 / .35);
    color-scheme: dark;
  }
}
@media (max-width: 720px) { :root { --pad: 16px; } }