/* ============================================================
   Brownjackets — design tokens
   The one home for the site's colours, type and shapes, so that
   a page can name them and not repeat raw values.

   Naming: a colour family is a set of three.
     --name        mid tone: borders, dots, map fills. Not for text.
     --name-text   dark tone: labels and links. 4.5:1 or better.
     --name-soft   pale tint: backgrounds, pills, the current item.

   The jacket family is the site's own. Its brown was taken from
   a photograph of the brown jacket Order members wear.

   Shown live at /styleguide/ and written up in
   docs/style-guide.md. Modelled on Plumline's tokens.css, so the
   two sites read as relatives.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- the jacket -----------------------------------------
     The one filled colour of the site's frame: the navigation
     bar, the primary button, the footer. */
  --jacket: #5f3f37;        /* the cloth in even light. 8.6:1 on ground, and 8.8:1 under --on-jacket */
  --jacket-deep: #46251c;   /* the cloth in a fold: hover and pressed */
  --jacket-light: #775148;  /* the cloth where light falls: borders on the bar. 6.4:1 on ground */
  --jacket-soft: #efe4df;   /* a wash of it: the current item, a quiet band */
  --on-jacket: #fff7e8;     /* text and icons on the jacket */
  --on-jacket-link: #f0c98a;/* a link on the jacket. 6.0:1 */

  /* ---- ground, surface and text --------------------------- */
  --ground: #fdf5ef;        /* the page: warm cream, not white */
  --ground-2: #f7ece2;      /* alternating bands */
  --card: #fffdf8;          /* card, panel and field surface */
  --ink: #2e2a26;           /* body text. 13.2:1 on ground */
  --muted: #6f685e;         /* secondary text. 5.1:1 on ground; do not go lighter */
  --rule: #e3dccb;          /* hairlines, borders, dividers */
  --rule-strong: #b9a68d;   /* a line that must be seen: the links in a graph */
  --veil: rgb(46 42 38 / 45%); /* the dimmed page behind a lightbox */

  /* ---- focus ---------------------------------------------- */
  --accent: #d2772e;        /* the focus ring. 3.0:1, never text */
  --accent-strong: #af5a1a; /* the same orange where it must be seen as a line: Dharma teacher mentors in the lineage graph */

  /* ---- content families -----------------------------------
     For maps, kickers and pale pills. Never a filled button. */
  --clay: #b07a56;   --clay-text: #8a5b3c;   --clay-soft: #f1e4d8;   /* a represented region */
  --rose: #b25c88;   --rose-text: #7e4257;   --rose-soft: #f4e3e8;   /* regions that overlap */
  --sage: #7c8a6b;   --sage-text: #4e5b3f;   --sage-soft: #e8ebdf;   /* sanghas, section labels */
  --indigo: #6b7ba0; --indigo-text: #495777; --indigo-soft: #e5e9f2; /* councils, and mentors in the lineage graph */
  --sea: #dfe8ea;                                                     /* water on a drawn map */

  /* ---- status --------------------------------------------- */
  --whole: #5f8a5a;   --whole-text: #3f5f3b;   --whole-soft: #e3eedd;   /* approved, saved */
  --unwhole: #b0564a; --unwhole-text: #8d4238; --unwhole-soft: #f3e1dc; /* needs attention */
  --caution: #d9b55a; --caution-text: #7a4f00; --caution-soft: #fff4d6; /* waiting, possible, not yet settled */

  /* ---- type ----------------------------------------------- */
  --font-heading: Georgia, "Times New Roman", serif;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- layout and shape ----------------------------------- */
  --maxw: 1120px;
  --gutter: clamp(1rem, 4vw, 3.75rem);
  --radius: 14px;      /* cards */
  --radius-sm: 10px;   /* rows and list items */
  --radius-xs: 4px;    /* every control */
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(46, 42, 38, 0.05), 0 8px 24px rgba(46, 42, 38, 0.06);
  --lift: 0 1px 2px rgba(70, 37, 28, 0.14);        /* a thing you press */
  --sink: inset 0 2px 3px rgba(70, 37, 28, 0.11);  /* a thing you write in */
}