/* ============================================================
   workwithAMA.io · design tokens
   The single source of truth for color, type, and interaction.
   Every color on the site is one of the 5 brand hues, a formal
   text tint of one, white, or a grey step. Nothing else.
   ============================================================ */

@font-face{font-family:'Space Grotesk';src:url(../assets/fonts/space-grotesk-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url(../assets/fonts/manrope-var.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url(../assets/fonts/clash-display-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Martian Mono';src:url(../assets/fonts/martian-mono-var.woff2) format('woff2');font-weight:300 800;font-style:normal;font-display:swap}

:root{
  /* ---- type roles ---- */
  --disp:'Space Grotesk',system-ui,sans-serif;        /* headlines */
  --cardface:'Clash Display',system-ui,sans-serif;    /* module titles */
  --mono:'Martian Mono',ui-monospace,'SF Mono',Menlo,monospace; /* labels, buttons, meta */
  --body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- ground (near-black greys, AMA-specified) ---- */
  --canvas:#11121A;          /* page ground */
  --deep:#0D0E14;            /* wells, quote interiors, nav bar chrome */
  --raised:#1A1C25;          /* raised surfaces, tile borders at rest */
  --raised-2:#1D202B;        /* hover surface step */
  --panel:#222735;           /* bright section band (The Present); the lightest ground */
  --hatch-a:#171922;         /* photo-placeholder hatching pair */
  --hatch-b:#1D202B;

  /* ---- ink (text greys) ---- */
  --ink:#FFFFFF;             /* headlines, emphasis */
  --paper:#F4F6FC;           /* long-form near-white */
  --bright:#E7E9EF;          /* origin-story body */
  --mist:#B7BBC5;            /* standard body copy */
  --faint:#7E8492;           /* meta, attributions, quiet labels */

  /* ---- the 5 brand hues (locked, AMA-specified) ---- */
  --royal:#0A1FB7;
  --purple:#8D23B5;
  --iris:#5C48AE;
  --sky:#5498E2;
  --pink:#EF4782;            /* buttons + one era; never body text */

  /* ---- formal text tints (readable-on-dark versions of dark hues).
         Use where the raw hue fails contrast as text.
         RULE (AMA, Jul 28): raw royal #0A1FB7 is a fill/gradient color ONLY.
         It fails as a hairline, border, row edge, or tint on the dark canvas;
         every treatment like that uses --royal-t instead. ---- */
  --royal-t:#7A8CF0;
  --purple-t:#B072D0;
  --iris-t:#9A8AE0;
  /* sky and pink are their own text tints */

  /* ---- gradients: live on rules, borders, auras. Never on type. ---- */
  --grad-brand:linear-gradient(90deg,var(--royal),var(--purple) 42%,var(--iris) 68%,var(--sky));
  --grad-border:linear-gradient(135deg,var(--royal),var(--purple) 50%,var(--sky));
  --grad-quote:linear-gradient(150deg,var(--royal),var(--purple));
  --grad-closer:linear-gradient(120deg,var(--purple),var(--pink));

  /* ---- lines ---- */
  --line:rgba(244,246,252,.09);
  --line-strong:rgba(244,246,252,.14);

  /* ---- era hues: one hue per claim, reused by the roster ---- */
  --era-2005:var(--sky);    --era-2005-t:var(--sky);
  --era-2006:var(--purple); --era-2006-t:var(--purple-t);
  --era-2008:var(--pink);   --era-2008-t:var(--pink);
  --era-2012:var(--iris);   --era-2012-t:var(--iris-t);
  --era-2016:var(--royal-t);  --era-2016-t:var(--royal-t); /* royal-t for borders/washes; raw royal illegible here */
  --era-2017:var(--sky);    --era-2017-t:var(--sky);

  /* ---- motion (daisy-derived cadence, sitewide) ---- */
  --breath:2.8s;                                  /* every pulse on the site */
  --spin:5.6s;                                    /* full rotations */
  --ease-breath:cubic-bezier(.77,0,.175,1);       /* the daisy's ease */
  --ease-out:cubic-bezier(.2,.7,.3,1);            /* reveals */
}

/* ============================================================
   INTERACTION GRAMMAR · four rollover treatments, used
   identically everywhere. If a new element needs a hover,
   it picks one of these; it does not invent a fifth.
   ------------------------------------------------------------
   1 · QUIET LINK (nav, meta): faint/mist -> white.
   2 · INLINE LINK (in copy): white text, era-color underline ->
       text takes the underline's color.
   3 · BUTTON (Say Hi and kin): pink -> purple, text -> white,
       lift 1-2px. Offset sky hairline stays put.
   4 · MODULE (cards, tiles, cells): rest border -> brand
       gradient (or era hue at 60%), lift 3px, surface steps
       from raised to raised-2. Companion pixel brightens.
   Focus-visible always mirrors the hover state + sky outline.
   ============================================================ */

.u-quiet-link{transition:color .2s}
.u-quiet-link:hover,.u-quiet-link:focus-visible{color:var(--ink)}

.u-inline-link{color:var(--ink);border-bottom:1px solid var(--u,var(--sky));padding-bottom:2px;transition:color .2s}
.u-inline-link:hover,.u-inline-link:focus-visible{color:var(--u,var(--sky))}

:focus-visible{outline:1.5px solid var(--sky);outline-offset:3px}