/* ============================================================
   Plumline — design tokens
   The single home for every colour, size and shape on the site.
   Nothing else should carry a raw hex value or a one-off radius.

   Naming: every colour family is a set of three.
     --name        mid tone — borders, dots, rules. Never text.
     --name-text   dark tone — labels, links. 4.5:1 or better.
     --name-soft   pale tint — backgrounds, pills, current items.

   Linked by the public pages and by /styleguide.html. The staff
   pages still wear the older chrome in styles.css; migrating one
   means linking this file and swapping the old variable names
   for these, one page at a time. The typeface comes
   with it: the @font-face rules below are part of this file,
   so a page that links it needs nothing else.

   Written up in full in docs/style-guide.md.
   ============================================================ */

/* ---- the typeface --------------------------------------
   Poppins, served from public/fonts. Declared here so that
   linking this one file is all a page needs: no second
   stylesheet, and no request to a third party when someone
   opens the site.

   Latin and Latin-Extended only. Poppins also has a
   Devanagari range; we deliberately do not carry it,
   because every word on the site is in Latin script.
   Anything outside the two subsets — Devanagari, Thai,
   most Vietnamese diacritics — falls back to the system
   sans, as it always has.
   ------------------------------------------------------- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* ---- ground, surface and text -------------------------- */
  --ground: #fdf5ef;      /* the page — warm cream, not white */
  --ground-2: #f7ece2;    /* alternating bands, input fills */
  --ground-blur: rgba(253, 245, 239, 0.92); /* sticky header over blurred content */
  --card: #fffdf8;        /* card and panel surface */
  --ink: #2e2a26;         /* body text — 13.2:1 on ground */
  --muted: #6f685e;       /* secondary text — 5.1:1 on ground */
  --rule: #e3dccb;        /* hairlines, borders, dividers */
  --charcoal: #2b2723;    /* footer and any dark band */

  /* ---- action -------------------------------------------
     Orange is the ONLY filled colour on the site, and it always
     means act. Nothing else gets a filled button. */
  --accent: #d2772e;        /* shapes: focus rings, rules. 3.3:1 — not for text */
  --accent-strong: #af5a1a; /* the fill behind white text — 4.9:1 */
  --accent-strong-hover: #9e4f14;
  --accent-soft: #f3e2d2;   /* the glow behind a focused input */
  --on-accent: #fff;        /* text on an orange fill — the only white on the site */

  /* ---- sections -----------------------------------------
     One family per part of the site. These appear as a card's
     top border, a kicker, a link, or a pale pill — never as a
     filled button, so a colour never has to be read as an
     instruction. Drawn from the wordmark: orange and mulberry
     on the figures, blue at their waists, warm earth between. */
  --clay: #b07a56;        --clay-text: #8a5b3c;   --clay-soft: #f1e4d8;   /* Sangha Finder */
  --sage: #7c8a6b;        --sage-text: #4e5b3f;   --sage-soft: #e8ebdf;   /* Sangha Builders */
  --rose: #b25c88;        --rose-text: #7e4257;   --rose-soft: #f4e3e8;   /* Plumliners */
  --indigo: #6b7ba0;      --indigo-text: #495777; --indigo-soft: #e5e9f2; /* Order members */

  /* ---- status -------------------------------------------
     Indigo doubles as the neutral/informational status, rather
     than carrying a second blue that differs only by a hair. */
  --whole: #5f8a5a;       --whole-text: #3f5f3b;   --whole-soft: #e3eedd;   /* confirmed, active */
  --unwhole: #b0564a;     --unwhole-text: #8d4238; --unwhole-soft: #f3e1dc; /* needs attention */

  /* ---- the scope bar -------------------------------------
     The band that rides on top of a container, carrying what
     narrows what is inside it. Lit from above: the paler tone
     at its head, the greyer one at its foot. Alipasha's
     values. */
  --bar-lit: #ede3e3;
  --bar-shade: #e0dbdb;

  /* ---- footer text on charcoal --------------------------- */
  --footer-text: #e8e0d6;
  --footer-link: #e8c9a6;
  --footer-fine: #a89c8d;

  /* ---- type ---------------------------------------------- */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Helvetica, Arial, sans-serif;

  /* ---- layout and shape ---------------------------------- */
  --maxw: 1120px;   /* content width */
  --radius: 14px;   /* cards */
  --radius-sm: 10px;/* rows and list items */
  --radius-xs: 4px; /* every control, and the box holding a view.
                       Focus rings, dots and small chips too. */
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(46, 42, 38, 0.05), 0 8px 24px rgba(46, 42, 38, 0.06);

  /* ---- depth ---------------------------------------------
     How far a control stands out of the page, or sinks into
     it. A thing you press takes --lift; a thing you put words
     into takes --sink. There is no third amount: --shadow is
     for panels, which are not controls. */
  --lift: 0 1px 2px color-mix(in srgb, var(--charcoal) 11%, transparent);
  --sink: inset 0 2px 3px color-mix(in srgb, var(--charcoal) 11%, transparent);
}