/* MAGMA — colour tokens. Values transcribed verbatim from MAGMA New Website.fig */
:root{
  /* Base neutrals — the "ink" ramp */
  --magma-ink:#100C0B;              /* rgb(16,12,11)  — primary text, buttons, dark surfaces */
  --magma-ink-90:#2C2C2C;           /* rgb(44,44,44)  — gradient partner for badge chrome */
  --magma-ink-80:#3A3938;           /* rgb(58,57,56)  — script step numbers on dark */
  --magma-ink-70:#272727;           /* rgb(39,39,39)  — hairline on dark */
  --magma-ink-56:rgba(16,12,11,0.56);
  --magma-ink-muted:#58514F;        /* rgb(88,81,79)  — quiet ink on light surfaces */

  --magma-grey-900:#777777;         /* rgb(119,119,119) — legal / copyright text */
  --magma-grey-700:#7E7E7E;         /* rgb(126,126,126) — vector fills in badges */
  --magma-grey-600:#99968F;         /* rgb(153,150,143) — secondary caption */
  --magma-grey-500:#9D9D9D;         /* rgb(157,157,157) — footer field labels */
  --magma-grey-400:#9E9E9E;         /* rgb(158,158,158) */
  --magma-grey-300:#A09F9D;         /* rgb(160,159,157) — inactive highlight rows, news dates */
  --magma-grey-200:#CCC9C5;         /* rgb(204,201,197) — hairline rules, table borders */
  --magma-grey-100:#E8E8E8;         /* rgb(232,232,232) */

  --magma-bone-500:#EFEEEC;         /* rgb(239,238,236) — text on dark surfaces */
  --magma-bone-56:rgba(239,238,236,0.56); /* quiet text on dark — script step numbers */
  --magma-bone-76:rgba(239,238,236,0.76); /* quiet text on dark, legible over panel imagery */
  --magma-bone-400:#F1F1F1;         /* rgb(241,241,241) — header hairline */
  --magma-bone-300:#F3F3F2;         /* rgb(243,243,242) — quiet icon button */
  --magma-bone-200:#F5F5F3;         /* rgb(245,245,243) — carousel nav button */
  --magma-bone-100:#F5F3F0;         /* rgb(245,243,240) — feature card surface */
  --magma-paper:#F6F6F6;            /* rgb(246,246,246) — utility bar text */
  --magma-white:#FFFFFF;
  --magma-black:#000000;            /* store buttons only */

  /* Flame — the single chromatic accent: the logo gradient, and every hover /
     press state in the system (see tokens/interactions.css). */
  --magma-flame-1:#631101;          /* rgb(99,17,1)    */
  --magma-flame-2:#BB1E00;          /* rgb(187,30,0)   */
  --magma-flame-3:#F95C04;          /* rgb(249,92,4)   */
  --magma-flame-4:#FEB400;          /* rgb(254,180,0)  */
  --magma-flame-5:#E9D776;          /* rgb(233,215,118)*/
  --magma-flame-gradient:linear-gradient(147.115deg,#631101 17.16%,#BB1E00 30.51%,#F95C04 52.21%,#FEB400 74.74%,#E9D776 100.61%); /* @kind color */

  /* Atmosphere — the sand/dust washes behind every light section */
  --magma-wash-flat:#F4F4F2;           /* rgba(219,217,212,0.3) flattened — the page ground */
  --magma-wash-sand:rgba(222,204,175,0);
  --magma-wash-dust:rgba(219,217,212,0.3);
  --magma-wash-down:linear-gradient(180deg,rgba(222,204,175,0) 0%,rgba(219,217,212,0.3) 100%); /* @kind color */
  --magma-wash-up:linear-gradient(180deg,rgba(219,217,212,0.3) 0%,rgba(222,204,175,0) 100%); /* @kind color */
  --magma-wash-diag:linear-gradient(226.684deg,rgba(219,217,212,0.3) 18.48%,rgba(222,204,175,0) 96.77%); /* @kind color */
  --magma-badge-gradient:linear-gradient(225.945deg,#100C0B 8.13%,#2C2C2C 72.22%); /* @kind color */
  --magma-glass:linear-gradient(170.889deg,rgba(255,255,255,0.058) 12.23%,rgba(255,255,255,0.01) 47.65%); /* @kind color */

  /* Semantic aliases — prefer these in component code */
  --text-primary:var(--magma-ink);
  --text-secondary:var(--magma-grey-300);
  --text-tertiary:var(--magma-grey-600);
  --text-legal:var(--magma-grey-900);
  --text-on-dark:var(--magma-bone-500);
  --text-on-dark-quiet:var(--magma-bone-76);
  --text-on-dark-strong:var(--magma-white);
  --text-inverse:var(--magma-white);

  --surface-page:var(--magma-wash-flat);
  --surface-card:var(--magma-bone-100);
  --surface-quiet:var(--magma-bone-300);
  --surface-nav:var(--magma-bone-200);
  --surface-inverse:var(--magma-ink);
  --surface-utility:var(--magma-ink);

  --border-hairline:var(--magma-grey-200);
  --border-strong:var(--magma-ink);
  --border-header:var(--magma-bone-400);
  --border-on-dark:rgba(255,255,255,0.08);
  --border-on-dark-strong:rgba(255,255,255,0.2);

  --action-primary-bg:var(--magma-ink);
  --action-primary-fg:var(--magma-white);
  --action-secondary-bg:transparent;
  --action-secondary-fg:var(--magma-ink);
  --action-quiet-bg:var(--magma-bone-300);
  --action-quiet-fg:var(--magma-ink);
}