/* SŌL tokens — roles inherited from design-dna/serotoninn/tokens.json,
   values from sites/sol/translation.md > Foundation (approved). */

:root {
  /* ---- colour (serotoninn roles, inverted to a dark base) ---- */
  --c-bg: #0A0A0A;            /* serotoninn background */
  --c-paper: #F0E9DE;         /* serotoninn surface-photo */
  --c-ink: #F0E9DE;           /* serotoninn ink (text on the field) */
  --c-ink-inverse: #0A0A0A;   /* serotoninn ink-inverse */
  --c-accent: #FF3B1F;        /* serotoninn accent */
  --c-accent-2: #D9FF43;      /* serotoninn accent-2 — live indicators only */
  --c-border: rgba(240, 233, 222, .2);
  --c-steel: #8A8A8A;        /* 5.7:1 on Ink — #767676 was 4.3:1, under AA */
  --c-overlay: rgba(10, 10, 10, .72);

  /* ---- type ---- */
  --f-display: "Anton", "Arial Narrow", sans-serif;
  --f-body: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, monospace;

  /* ---- motion (serotoninn motion_defaults) ---- */
  --ease: cubic-bezier(0.75, 0, 0.25, 1);
  --ease-cursor: cubic-bezier(0.20, 0.00, 0.10, 1.00);
  --ease-out-donor: cubic-bezier(0.16, 1, 0.3, 1);   /* aspensearch */
  --ease-frame: cubic-bezier(.25, .46, .45, .94);    /* amritpalace */
  --dur: .7s;

  /* ---- layout ---- */
  --gutter: 3.5rem;
  --header-h: 6rem;
  --seam: 4.8rem;    /* torn seam height */
}

/* serotoninn root scale: 1rem = 10px at each design width, fluid between */
html { font-size: 2.6666666667vw; }                  /* 375 design width */
@media (min-width: 768px)  { html { font-size: 1.3020833333vw; } }  /* 768  */
@media (min-width: 1024px) { html { font-size: 0.6944444444vw; } }  /* 1440 */
@media (min-width: 2000px) { html { font-size: 13.9px; } }          /* stop growing */

/* ---- type roles (serotoninn type.*) ---- */
.t-display {                      /* serotoninn type.display */
  font-family: var(--f-display);
  font-size: 12rem; line-height: .8; text-transform: uppercase;
  letter-spacing: 0; font-weight: 400;
}
.t-wordmark {                     /* new: brief asks 120–220px */
  font-family: var(--f-display);
  font-size: clamp(76px, 19vw, 280px); line-height: .78;
  text-transform: uppercase; letter-spacing: -.01em;
}
.t-title {                        /* serotoninn type.category-title 6.4rem */
  font-family: var(--f-display);
  font-size: 6.4rem; line-height: .8; text-transform: uppercase;
}
.t-chapter {                      /* serotoninn type.chapter-label 20px accent */
  font-family: var(--f-display);
  font-size: 2rem; line-height: 1; text-transform: uppercase; color: var(--c-accent);
}
.t-statement {                    /* serotoninn type.statement */
  font-family: var(--f-body);
  font-size: 1.6rem; line-height: 1.35; text-transform: uppercase; font-weight: 500;
  letter-spacing: -.02em;
}
.t-meta {                         /* serotoninn type.meta-mono 14px */
  font-family: var(--f-mono);
  font-size: 1.2rem; line-height: 1.2; letter-spacing: -.06em;
  text-transform: uppercase; font-weight: 400;
}
.t-body {
  font-family: var(--f-body);
  font-size: 1.6rem; line-height: 1.45; font-weight: 400;
}

@media (max-width: 767px) {
  .t-display { font-size: 8.2rem; line-height: .86; }
  .t-title { font-size: 4.8rem; }
  .t-chapter { font-size: 1.6rem; }
  .t-meta { font-size: 1.1rem; }
  .t-statement, .t-body { font-size: 1.6rem; }
  :root { --gutter: 1.6rem; --header-h: 5.6rem; }
}