/* Athra design tokens
   Values measured, not invented. Type and ground derive from the naano
   reference DOM; the accent and the sand are ours.
   Last updated 2026-08-15 */

:root{
  /* --- ink ------------------------------------------------------------- */
  --ink:        #17181c;  /* headings, primary text, primary button fill    */
  --ink-2:      #43454c;  /* body copy. never use --ink for paragraphs      */
  --ink-3:      #8e9099;  /* meta, captions, table headers, placeholders    */

  /* --- ground ---------------------------------------------------------- */
  --bone:       #fcfcfb;  /* page background. the only page background      */
  --bone-2:     #f5f5f3;  /* inset / hover fill                             */
  --panel:      #ffffff;  /* cards and mockups                              */

  /* --- lines ----------------------------------------------------------- */
  --line:       #e6e6e2;  /* card borders, table rules, inputs              */
  --line-2:     #f0f0ed;  /* internal row dividers inside a card            */

  /* --- the one accent -------------------------------------------------- */
  /* Means exactly one thing: this is live and verified.
     Never decorative. Never on loaders, dividers, or plain icons.          */
  --live:       #0f7a55;
  --live-bg:    #e8f3ee;
  --live-line:  #cfe6dc;

  /* --- X surface (only inside a cloned X post) -------------------------- */
  --x-ink:      #0f1419;
  --x-meta:     #536471;
  --x-blue:     #1d9bf0;
  --x-line:     #eff3f4;

  /* --- type ------------------------------------------------------------ */
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace; /* machinery text only */

  /* --- motion ---------------------------------------------------------- */
  --eo: cubic-bezier(.23, 1, .32, 1);   /* everything entering or resting   */
  --eio: cubic-bezier(.77, 0, .175, 1); /* moving / morphing on screen      */

  /* --- elevation ------------------------------------------------------- */
  --shadow:    0 1px 2px rgba(24,20,14,.04), 0 12px 32px -20px rgba(24,20,14,.28);
  --shadow-lg: 0 2px 4px rgba(24,20,14,.04), 0 28px 60px -34px rgba(24,20,14,.34);
}

/* --- type scale --------------------------------------------------------
   Weight never exceeds 600. 700+ reads cheap at these sizes.              */
.t-display { font-size:77px; font-weight:600; letter-spacing:-.040em; line-height:1.05 }
.t-h2      { font-size:52px; font-weight:600; letter-spacing:-.050em; line-height:1.00 }
.t-h3      { font-size:19px; font-weight:600; letter-spacing:-.028em; line-height:1.30 }
.t-lede    { font-size:21px; font-weight:400; letter-spacing:normal;  line-height:1.50; color:var(--ink-2) }
.t-body    { font-size:16px; font-weight:400; letter-spacing:normal;  line-height:1.55; color:var(--ink-2) }
.t-meta    { font-size:13.5px; font-weight:400; line-height:1.5; color:var(--ink-3) }

/* Numbers in any column, badge or table get tabular figures so they
   do not jitter between states. */
.t-num { font-variant-numeric: tabular-nums }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}