/* Saltpond Design Language — tokens.css v1.0.0 (approved 2026-07-04)
   One grammar, per-venture packs. Apply a theme with data-theme="saltpond|aipa|councilpulse"
   on any container; the grammar classes below read whatever theme is in scope.
   Source of truth for values: design-tokens.json. */

:root,
[data-theme="saltpond"] {
  --dl-font-display: "Avenir Next", Avenir, Futura, Jost, "Century Gothic", sans-serif;
  --dl-font-body: "Avenir Next", Avenir, Jost, -apple-system, sans-serif;
  --dl-font-script: "Caveat", "Bradley Hand", cursive;

  --dl-paper: #FAFAF6;
  --dl-ink-neutral: #20241F;
  --dl-ink-soft: #5A6058;
  --dl-hairline: #E3E2D8;

  /* Saltpond Advisory (master) */
  --dl-ink: #1B3A33;      /* kelp */
  --dl-accent: #3E9C8B;   /* brine */
  --dl-warm: #C4685C;     /* halophile rose */
  --dl-surface: #F1EEE3;  /* salt */
  --dl-tint: #EAF0EA;     /* pond tint */
  --dl-accent-deep: #2C7264; /* brine deep, small text on tint */
}

[data-theme="aipa"] {
  --dl-ink: #1A237E;      /* dark navy */
  --dl-accent: #1E88E5;   /* primary blue */
  --dl-warm: #42A5F5;     /* light blue */
  --dl-surface: #F5F5F5;  /* light grey */
  --dl-tint: #EAF2FB;     /* sky tint */
  --dl-accent-deep: #1565C0;
  --dl-ink-neutral: #37474F; /* charcoal body text per AIPA guide */
}

[data-theme="councilpulse"] {
  --dl-ink: #22303C;      /* chamber slate */
  --dl-accent: #2FB47C;   /* pulse */
  --dl-warm: #5C7A99;     /* steel */
  --dl-surface: #F6F5F1;  /* paper */
  --dl-tint: #E9F0EA;     /* pulse tint */
  --dl-accent-deep: #1E7A54;
}

[data-theme="wellspring"] {   /* Wellspring Support - own purple/teal/pink brand (Styleguide 2017) */
  --dl-ink: #4C2041;      /* deep purple */
  --dl-accent: #5FCEC7;   /* teal */
  --dl-warm: #FE448D;     /* pink */
  --dl-surface: #F4F1EA;  /* soft neutral */
  --dl-tint: #EAF6F4;     /* teal tint (derived) */
  --dl-accent-deep: #1F7A73; /* teal deep, small text on tint (derived) */
}

/* ---- Grammar move 1: the band ---------------------------------------- */
.dl-band { display: flex; height: 8px; width: 100%; }
.dl-band span:nth-child(1) { flex: 6; background: var(--dl-ink); }
.dl-band span:nth-child(2) { flex: 2; background: var(--dl-accent); }
.dl-band span:nth-child(3) { flex: 1; background: var(--dl-warm); }

/* ---- Grammar move 2: tint panel --------------------------------------- */
.dl-tintpanel {
  background: var(--dl-tint);
  border-left: 4px solid var(--dl-accent);
  padding: 20px 24px;
}
.dl-tintpanel .dl-label { color: var(--dl-accent-deep); }

/* ---- Grammar move 4: type discipline ---------------------------------- */
.dl-display {
  font-family: var(--dl-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--dl-ink);
  text-wrap: balance;
}
.dl-body {
  font-family: var(--dl-font-body);
  color: var(--dl-ink-neutral);
  line-height: 1.55;
}
.dl-label {
  font-family: var(--dl-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dl-script { font-family: var(--dl-font-script); font-size: 1.6em; line-height: 1; }

/* ---- Pop Pack secondary devices ---------------------------------------- */
.dl-spine {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--dl-accent);
}
.dl-cornerblock {
  background: var(--dl-warm);
  color: #fff;
  padding: 14px 22px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}
.dl-captionbox {
  border: 1px solid var(--dl-hairline);
  padding: 12px 18px;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dl-ink-soft);
}

/* ---- Document scaffold -------------------------------------------------- */
.dl-page { background: #fff; color: var(--dl-ink-neutral); font-family: var(--dl-font-body); }
.dl-page-pad { padding: 30px 40px; }
.dl-hairline { border: 0; border-top: 1px solid var(--dl-hairline); }
