/* ============================================================================
   Amon AI — design tokens. Single source of truth.

   Loaded before marketing.css (public site) or app.css (signed-in app).
   Those two never load together, so they are free to define the same class
   names differently. Nothing but tokens, the reset and the type ramp lives
   here — no components.
   ========================================================================= */

:root{

  /* ---- CHROME -------------------------------------------------------------
     Neutral only. Never colour a button, link, heading or navigation state. */
  --ink:#000000;          /* text, primary buttons, borders, focus rings */
  --ink-hover:#1C1C1C;    /* primary button hover — 17.04:1 with white text */
  --paper:#FFFFFF;        /* surfaces */
  --grey:#5F5F5F;         /* body + secondary text, captions, eyebrows — 6.39:1 */
  --grey-light:#8A8A8A;   /* placeholders and disabled only — 3.45:1, fails AA
                             for body copy. Captions take --grey. */
  --rule:#E4E4E4;         /* hairlines and dividers — 1.27:1, decorative by
                             design and not gated by WCAG. See note below. */
  --wash:#F7F7F8;         /* alternating section backgrounds — 1.02:1 against
                             --paper, so it cannot carry a boundary alone;
                             pair it with a --rule hairline. */

  /* ---- OBJECT PALETTE -----------------------------------------------------
     Illustrations, glyphs, category tags, status marks and chart series ONLY.
     Never buttons, links, headings or navigation chrome. */
  --coral:#FF5F45;
  --amber:#FFB020;
  --mint:#12C7B0;
  --sky:#2E90FA;
  --pink:#F2609E;
  --lime:#9BD62B;
  --indigo:#5B5BD6;

  /* ---- MARK VARIANTS ------------------------------------------------------
     The hues above are calibrated as FILLS. Against white they run 1.74–5.37:1,
     so most fail even the 3:1 non-text bar. Any use as a MARK on paper — glyph,
     icon, stroke, dot, small chart mark — takes the -deep variant below.
     Hue preserved, lightness reduced to ~5.2:1+.

     There is deliberately NO --indigo-deep. Raw --indigo already clears 5.37:1,
     so a variant would be an exact alias of the raw token, and an alias that
     pretends to be a derivation misleads whoever reaches for the set next.
     Use --indigo directly. */
  --coral-deep:#D51E00;   /* 5.23:1 on paper */
  --amber-deep:#976100;   /* 5.22:1 */
  --mint-deep:#0A7566;    /* 5.60:1 */
  --sky-deep:#0569D6;     /* 5.25:1 */
  --pink-deep:#D31164;    /* 5.21:1 */
  --lime-deep:#557617;    /* 5.26:1 */

  /* A label sitting ON an object-colour fill is --ink, never white — every hue
     in the palette fails white-text contrast. On an --ink fill, use --paper. */

  /* ---- TYPE ---------------------------------------------------------------
     SF Pro on Apple devices, Inter everywhere else — visually near-identical.
     Tracking tightens as size grows. Display weight is 600, never 700.
     Uppercase eyebrows keep POSITIVE tracking: negative spacing closes up the
     counters and hurts legibility at small caps sizes. */
  --sf:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter','Segoe UI',Helvetica,Arial,sans-serif;
  --tr-display:-0.038em;  /* hero / largest display text */
  --tr-section:-0.032em;  /* section headings */
  --tr-card:-0.02em;      /* card titles */
  --tr-body:-0.008em;     /* body copy */
}

/* ---- RESET --------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* body font-size is set per stylesheet: 17px marketing, 15px app. */
body{
  font-family:var(--sf);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  letter-spacing:var(--tr-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:inherit;text-decoration:none;}
button,input,select,textarea{font-family:var(--sf);}
img{max-width:100%;}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--rule);border-radius:100px;border:2px solid var(--paper);}