/* ═══════════════════════════════════════════════════════════════════════════
   Organically Affiliated — the design system.

   ── WHY THIS FILE EXISTS ───────────────────────────────────────────────────
   Every page carried its own copy of the palette, and the copies had drifted.
   The marketing page and the dashboards used two different greens, two
   different body greys and two different border colours, so the same product
   looked like two products depending on which door you came in.

   This holds the tokens. A page still owns its own layout, but it takes its
   colours, spacing, type scale, buttons, fields, cards, pills and empty states
   from here, so changing one of them changes it everywhere.

   ── IT IS LOADED BEFORE EACH PAGE'S OWN STYLES ─────────────────────────────
   Deliberately. A page's inline <style> wins at equal specificity, so a page
   can still override a token or a component where it genuinely needs to,
   without this file having to know about it.

   ── CONTRAST ───────────────────────────────────────────────────────────────
   The greys are the ones an earlier contrast pass settled on for the
   dashboards, which were audited; the marketing page's lighter set is gone.
   --faint was the one value that failed AA at 3.0:1 and is now 4.7:1, so it is
   safe on text as well as on rules and dividers.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Surfaces ── */
  --bg:#FAFAF8;
  --card:#FFFFFF;
  --warm:#F1EFE9;          /* alternating band on the marketing pages */
  --sunk:#F4F3EF;          /* inset surfaces: code boxes, read only fields */

  /* ── Text ── */
  --ink:#1D201A;           /* headings. 15.9:1 on white */
  --body:#2E312B;          /* body copy. 12.6:1 */
  --mute:#474D42;          /* secondary. 8.4:1 */
  --faint:#6F756A;         /* tertiary. 4.7:1, so it is still legible text */

  /* ── Lines ── */
  --line:#D5D8CF;          /* dividers and card edges */
  --line-strong:#8A9084;   /* input borders. 3.3:1, a real UI boundary */
  --card-edge:#A9ACA2;     /* the heavier edge used where cards must separate */

  /* ── Brand ── */
  --accent:#4E6844;        /* 6.1:1 on white, and white on it is 6.1:1 */
  --accent-deep:#3C5134;   /* hover and pressed */
  --accent-soft:#EAEFE6;   /* tinted background for selected and active states */
  --accent-line:#C9D5C2;

  /* ── Status ── */
  --amber:#A9842F;
  --amber-text:#7A5C1E;
  --amber-soft:#F8F1DF;
  --danger:#9A3B2F;
  --danger-soft:#F8E9E6;
  --ok:#3F6B44;
  --ok-soft:#E6F0E5;
  /* Names the system pages already used for the same two colours. Aliased
     rather than renamed: a rename means editing a dozen files to change
     nothing, and each of these now resolves to the one audited value. */
  --err:var(--danger);
  --red:var(--danger);
  --red-soft:var(--danger-soft);

  /* ── Spacing scale. Every gap on every page comes from these ── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:80px;

  /* ── Type scale ── */
  --t-micro:12px; --t-tiny:13px; --t-small:15px; --t-base:16px;
  --t-lead:17px;  --t-h4:20px;   --t-h3:24px;    --t-h2:30px;

  /* ── Radii ── */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;

  /* ── Elevation. Two layers each, so a card reads as lifted, not outlined ── */
  --sh-sm:0 1px 2px rgba(29,32,26,.05);
  --sh-md:0 2px 6px rgba(29,32,26,.05),0 8px 24px rgba(29,32,26,.06);
  --sh-lg:0 4px 12px rgba(29,32,26,.07),0 20px 56px rgba(29,32,26,.10);

  /* ── Motion ── */
  --ease:cubic-bezier(.2,.7,.3,1);
  --fast:.14s; --slow:.28s;

  /* Kept because the dashboards already name it. */
  --r:var(--r-lg);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--t-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
::selection{background:var(--accent);color:#fff;}

/* ── FOCUS. One rule, every page, every control ────────────────────────────
   :focus-visible rather than :focus, so a mouse click does not leave a ring
   behind but a Tab key always does. The offset is what makes it readable on a
   filled button, where an inset outline disappears into the fill. */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline-offset:3px;}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px;}

/* ── AND THE OTHER HALF, STATED ONCE ───────────────────────────────────────
   A mouse click still focuses, so :focus still matches, and every page that
   wanted a soft highlight on click used to write `outline:none` into its own
   :focus rule to get one. That out-specificities the rule above, so it killed
   the KEYBOARD ring too: the one thing :focus-visible exists to protect. It was
   in eleven rules across ten files, so the ring was off almost everywhere.

   This says it in one place instead. A page describes the highlight it wants on
   :focus, borders and glows, and never writes `outline:none` again. */
:focus:not(:focus-visible){outline:none;}

/* Skip link, for keyboard users landing on a dashboard with a sidebar. */
.oa-skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--accent);color:#fff;padding:var(--s3) var(--s5);
  border-radius:0 0 var(--r-sm) 0;font-weight:600;text-decoration:none;
}
.oa-skip:focus{left:0;}

/* ── BUTTONS ───────────────────────────────────────────────────────────────
   One shape, four intents, three sizes. Height is set by padding and
   line-height together so a button and an input of the same size line up. */
.oa-btn{
  appearance:none;border:1.5px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:13px 26px;border-radius:var(--r-md);
  font-size:var(--t-base);font-weight:600;line-height:1.25;
  text-decoration:none;text-align:center;white-space:nowrap;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),
             color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             transform var(--fast) var(--ease);
}
.oa-btn:disabled,.oa-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}

.oa-btn-primary{background:var(--accent);color:#fff;box-shadow:var(--sh-sm);}
.oa-btn-primary:hover:not(:disabled){background:var(--accent-deep);box-shadow:var(--sh-md);transform:translateY(-1px);}
.oa-btn-primary:active:not(:disabled){transform:none;box-shadow:var(--sh-sm);}

.oa-btn-secondary{background:var(--card);color:var(--ink);border-color:var(--line-strong);}
.oa-btn-secondary:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-soft);}

.oa-btn-ghost{background:transparent;color:var(--accent);padding-left:var(--s3);padding-right:var(--s3);}
.oa-btn-ghost:hover:not(:disabled){background:var(--accent-soft);}

/* For the dark band on the marketing page, where the primary green disappears. */
.oa-btn-light{background:#fff;color:var(--ink);box-shadow:var(--sh-sm);}
.oa-btn-light:hover:not(:disabled){box-shadow:var(--sh-lg);transform:translateY(-1px);}

.oa-btn-lg{padding:17px 34px;font-size:var(--t-lead);border-radius:var(--r-md);}
.oa-btn-sm{padding:9px 16px;font-size:var(--t-tiny);border-radius:var(--r-sm);}
.oa-btn-block{width:100%;}

/* ── CARDS ─────────────────────────────────────────────────────────────── */
.oa-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);
}
.oa-card-raised{box-shadow:var(--sh-md);border-color:var(--line);}
.oa-card-pad{padding:var(--s6);}

/* A card that is a link. Keyboard reachable because it is a real <a> or
   carries tabindex; the hover and the focus ring are the same affordance. */
.oa-card-link{
  display:block;text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),
             transform var(--fast) var(--ease);
}
.oa-card-link:hover{border-color:var(--accent-line);box-shadow:var(--sh-md);transform:translateY(-2px);}

/* ── FORM FIELDS ───────────────────────────────────────────────────────── */
.oa-field{display:block;margin-bottom:var(--s5);}
.oa-label{
  display:block;font-size:var(--t-small);font-weight:600;
  color:var(--ink);margin-bottom:var(--s2);
}
.oa-label .oa-optional{font-weight:400;color:var(--faint);}
.oa-input,.oa-select,.oa-textarea{
  width:100%;background:var(--card);color:var(--ink);
  border:1.5px solid var(--line-strong);border-radius:var(--r-md);
  padding:13px 16px;font-size:var(--t-base);line-height:1.4;
  transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);
}
.oa-textarea{min-height:120px;resize:vertical;}
.oa-input:hover,.oa-select:hover,.oa-textarea:hover{border-color:var(--mute);}
.oa-input:focus,.oa-select:focus,.oa-textarea:focus{
  border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);
}
.oa-input::placeholder,.oa-textarea::placeholder{color:var(--faint);}
.oa-select{
  appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%234E6844' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.oa-help{font-size:var(--t-tiny);color:var(--mute);margin-top:var(--s2);line-height:1.55;}
.oa-error{font-size:var(--t-tiny);color:var(--danger);margin-top:var(--s2);font-weight:500;}
.oa-input[aria-invalid="true"]{border-color:var(--danger);}
.oa-input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px var(--danger-soft);}

/* Two fields side by side, stacking on a phone rather than squeezing. */
.oa-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
@media(max-width:600px){.oa-row{grid-template-columns:1fr;gap:0;}}

/* ── PILLS ─────────────────────────────────────────────────────────────── */
.oa-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:var(--r-pill);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.03em;
  background:var(--accent-soft);color:var(--accent);white-space:nowrap;
}
.oa-pill-neutral{background:#ECEDE9;color:var(--mute);}
.oa-pill-warn{background:var(--amber-soft);color:var(--amber-text);}
.oa-pill-danger{background:var(--danger-soft);color:var(--danger);}
.oa-pill-ok{background:var(--ok-soft);color:var(--ok);}

/* ── EYEBROW, the small uppercase label above a heading ────────────────── */
.oa-eyebrow{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);
}

/* ── EMPTY STATES ──────────────────────────────────────────────────────────
   One shape everywhere: a line saying what is not here, and a line saying what
   would put something here. An empty state with no second line is a dead end. */
.oa-empty{
  padding:var(--s8) var(--s6);text-align:center;
  color:var(--mute);font-size:var(--t-small);line-height:1.6;
}
.oa-empty-title{
  display:block;font-size:var(--t-lead);font-weight:600;
  color:var(--ink);margin-bottom:var(--s2);
}
.oa-empty-mark{
  width:44px;height:44px;margin:0 auto var(--s4);border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:var(--t-h4);
}

/* ── MEDIA SLOT ────────────────────────────────────────────────────────────
   A placeholder for artwork that does not exist yet. It says what belongs
   there, so an unfilled slot reads as a decision rather than a broken image,
   and so nobody has to guess what to commission. */
.oa-slot{
  position:relative;border:2px dashed var(--accent-line);
  border-radius:var(--r-lg);background:
    repeating-linear-gradient(135deg,transparent,transparent 11px,rgba(78,104,68,.05) 11px,rgba(78,104,68,.05) 22px),
    var(--accent-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);padding:var(--s7) var(--s5);text-align:center;min-height:200px;
}
.oa-slot-tag{
  position:absolute;top:12px;left:12px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:3px 10px;border-radius:var(--r-pill);
}
.oa-slot-title{font-size:var(--t-small);font-weight:700;color:var(--accent);}
.oa-slot-desc{font-size:var(--t-tiny);color:var(--mute);max-width:34ch;line-height:1.55;}

/* ── STAT CARD ─────────────────────────────────────────────────────────────
   Shared by both dashboards. A caption is for money only: captioning a count
   of partners is how a caption becomes noise. */
.oa-stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s5);min-width:0;
}
.oa-stat-label{
  font-size:var(--t-micro);font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--mute);line-height:1.35;
}
.oa-stat-value{
  font-size:28px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin-top:var(--s2);line-height:1.15;
}
.oa-stat-caption{font-size:var(--t-tiny);color:var(--body);margin-top:var(--s1);}

/* ── PROSE, for the legal pages and anything else that is mostly words ──── */
.oa-prose{max-width:70ch;color:var(--body);font-size:var(--t-lead);line-height:1.75;}
.oa-prose h2{font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:var(--s8) 0 var(--s3);line-height:1.25;}
.oa-prose h3{font-size:var(--t-lead);font-weight:700;color:var(--ink);margin:var(--s6) 0 var(--s2);}
.oa-prose p{margin-bottom:var(--s4);}
.oa-prose ul,.oa-prose ol{margin:0 0 var(--s4) var(--s6);}
.oa-prose li{margin-bottom:var(--s2);}
.oa-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}

/* ── LAYOUT HELPERS ────────────────────────────────────────────────────── */
.oa-container{max-width:1120px;margin:0 auto;padding-left:var(--s7);padding-right:var(--s7);}
@media(max-width:680px){.oa-container{padding-left:var(--s5);padding-right:var(--s5);}}

/* ── MOTION ────────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .oa-btn:hover,.oa-card-link:hover{transform:none!important;}
}