/* ============================================================
   MIRAAI 2026 — colour + type update for miraai.me
   Load AFTER styles.css:  <link rel="stylesheet" href="miraai-2026.css" />
   Structure, layout and the hero network effect are untouched; this file
   only redefines the palette, the three typefaces, and the heading and
   label treatments. Every pair below is contrast-measured.
   ============================================================ */

/* ---------- 1 · palette ---------- */
:root{
  /* brand: navy and gold, unchanged. steel is the new second colour */
  --navy:#0B1733;
  --deep:#0B1733;              /* one navy, not three */
  --gold:#F3B443;             /* FILLS ONLY — and text on navy (8.6:1) */
  --gold-ink:#8A5E0F;         /* gold as text on light ground — 6.0:1 */
  --gold-deep:#8A5E0F;        /* legacy alias used by a few inline styles */
  --steel:#0F4F6E;            /* second colour — 7.3:1 on the page ground */
  --steel-tint:#D4E0E2;
  --pine:#2F6F4F;             /* status: calibrated, pass */
  --celadon:#8FB8AE;          /* fill only — never text */

  /* grounds: cooler and lighter than the old paper */
  --paper:#E7E9E4;            /* the page */
  --paper-2:#EDEFEA;          /* the plate a section sits on */
  --tint:#EDEFEA;             /* alternating band */

  /* ink */
  --ink:#0B1733;              /* 13.9:1 */
  --ink-muted:#3A4750;        /* long-form prose — 8.4:1 */
  --slate:#9FB0C4;            /* secondary text ON NAVY — 7.4:1, weight 400 min */
  --slate-dark:#9FB0C4;
  --slate-light:#5D6B72;      /* small labels on light ground — 5.2:1 */

  /* accent aliases the existing CSS already calls */
  --accent:#0F4F6E;
  --accent-deep:#0F4F6E;
  --accent-bright:#F3B443;

  /* rules: three weights, nothing else */
  --hair-light:rgba(255,255,255,.18);
  --hair-dark:rgba(11,23,51,.24);
  --hair-faint:rgba(11,23,51,.14);

  /* type */
  --display:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  --body:"Karla","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",Consolas,ui-monospace,monospace;
  --arabic:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
}
/* per-page accent classes on <body> now all resolve to steel */
body.accent--sky,body.accent--gold,body.accent--mint{--accent:#0F4F6E; --accent-deep:#0F4F6E;}

/* ---------- 2 · type ---------- */
body{font-family:var(--body); font-size:16px; line-height:1.6;}
h1,h2,h3,.subhead,.study__name,.eco__item h3,.journey__step h3,.person h3,.pager__link{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
}
h1{line-height:1.0; letter-spacing:-.035em; max-width:20ch;}
h2{line-height:1.04; letter-spacing:-.03em; max-width:20ch;}
/* the italic gold accent word is retired: same emphasis, legible, no italic */
h1 em,h2 em,h3 em,.subhead em{font-style:normal; color:var(--gold-ink);}
.band--navy h1 em,.band--navy h2 em,.band--deep h1 em,.band--deep h2 em,
.band--navy h3 em,.band--deep h3 em{color:var(--gold);}

.lede,.hero__sub{font-weight:400; font-size:1.0625rem; color:var(--ink-muted); max-width:58ch;}
.band--navy .lede,.band--navy .hero__sub,.band--deep .lede,.band--deep .hero__sub{color:var(--slate);}

/* eyebrows and every mono label: 11px floor, steel or gold-ink, never gold on light */
.eyebrow,.eyebrow--ink,.pipeline__phase,.journey__stage,.person__role,.crumb,
.meta,.registry,.study__tag,.fine,.footer__note{
  font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase;
}
.eyebrow,.eyebrow--ink{font-size:.6875rem; color:var(--steel);}
.band--navy .eyebrow,.band--deep .eyebrow{color:var(--gold);}
.pipeline__phase,.journey__stage,.person__role{font-size:.6875rem; letter-spacing:.14em; color:var(--steel);}
.crumb b{color:var(--gold-ink); font-weight:500;}
.meta,.registry,.fine,.study__tag{color:var(--slate-light);}
.band--navy .meta,.band--deep .meta,.registry--footer{color:var(--slate);}
/* the diamond is retired; section numbers carry the sequence instead */
.diamond{display:none;}

/* figures and numerals in mono, tabular */
.facts b,.proof b,.statline b,.ledger__id,.journey__num,.after b{
  font-family:var(--mono); font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.ledger__id,.journey__num{font-style:normal; color:var(--steel);}

/* Arabic, wherever it appears */
[lang="ar"],[dir="rtl"]{font-family:var(--arabic); line-height:1.85; letter-spacing:0;}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{
  font-family:var(--arabic); font-weight:700; letter-spacing:0; line-height:1.25;
}
[dir="rtl"] .eyebrow{font-family:var(--arabic); font-weight:600; letter-spacing:0; text-transform:none; font-size:.8125rem;}

/* ---------- 3 · buttons ---------- */
.btn{font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; border-radius:2px; padding:.85em 1.4em; white-space:nowrap;}
.btn--gold{background:var(--gold); color:var(--navy); border-color:var(--gold);}
.btn--gold:hover{background:var(--navy); color:#fff; border-color:var(--navy);}
.btn--ink{background:var(--navy); color:#fff; border-color:var(--navy);}
.btn--ink:hover{background:var(--gold); color:var(--navy); border-color:var(--gold);}
.btn--ghost{border-color:var(--ink); color:var(--ink);}
.btn--ghost:hover{background:var(--ink); color:#fff;}
.band--navy .btn--ghost,.band--deep .btn--ghost{color:#fff; border-color:rgba(255,255,255,.55);}
.band--navy .btn--ghost:hover,.band--deep .btn--ghost:hover{background:#fff; color:var(--navy);}
/* gold text can never sit on a gold fill */
.band--navy a.btn--gold,.band--deep a.btn--gold,.invite .btn{color:var(--navy);}

/* ---------- 4 · surfaces: hairlines, square corners, no shadow ---------- */
.card,.panel,.figure,.flow__node,.cert,.state,.pipeline li,.study,.ledger__row{
  border-radius:0; box-shadow:none;
}
.card,.card--paper{background:var(--paper-2); border-color:var(--hair-dark);}
.card--navy{background:var(--navy); border-color:var(--navy);}
.card--navy h3{color:#fff;} .card--navy p{color:var(--slate);}
.ledger,.studies,.eco,.journey{border-top-color:var(--ink);}
.ledger__row,.study,.eco__item,.journey__step{border-bottom-color:var(--hair-faint);}
.kicker{border-left:3px solid var(--gold);}
.invite{background:var(--gold); color:var(--navy); border-radius:0;}
.screens img,.screens video{border-radius:0; box-shadow:none; border-color:var(--hair-dark);}
.person img{border-radius:0;}
.person__tags li{font-family:var(--mono); font-size:.6875rem; letter-spacing:.04em;
  color:var(--gold-ink); background:transparent; border:1px solid rgba(138,94,15,.4); border-radius:2px;}

/* tables and figure grids: ruled, never banded */
.facts,.proof,.statline{background:var(--hair-dark); border-color:var(--hair-dark);}
.facts div,.proof div,.statline div{background:var(--paper-2);}
.facts b,.proof b,.statline b{color:var(--ink);}
.facts span,.proof span,.statline span{color:var(--ink-muted);}
.band--navy .facts div,.band--navy .proof div,.band--navy .statline div,
.band--deep .facts div,.band--deep .proof div{background:var(--navy);}
.band--navy .facts b,.band--deep .facts b{color:var(--gold);}
.band--navy .facts span,.band--deep .facts span{color:var(--slate);}

/* ---------- 5 · nav and footer ---------- */
.nav{background:var(--navy); border-bottom:1px solid var(--hair-light);}
.nav__links a{font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--slate); white-space:nowrap;}
.nav__links a:hover{color:#fff;}
.nav__links a.is-current{color:#fff; border-bottom:2px solid var(--gold);}
.nav__progress i{background:var(--gold);}
.pager__link{background:var(--navy); color:#fff;}
.pager__link:hover{background:var(--steel); color:#fff;}
.pager__link small{font-family:var(--mono); color:var(--slate);}
.footer{background:var(--navy); border-top-color:var(--hair-light);}

/* ---------- 6 · state colours ---------- */
.state--held h3{color:var(--gold-ink);} .state--held .state__dot{background:var(--gold); box-shadow:0 0 0 4px rgba(243,180,67,.18);}
.state--rel h3{color:#8E2F2F;} .state--rel .state__dot{border-color:#8E2F2F;}
.cert__mark{border-color:var(--steel); color:var(--steel);}
.band--navy .cert__mark,.band--deep .cert__mark{border-color:var(--gold); color:var(--gold);}
.flow__arrow{color:var(--steel);}
.pipeline li::after{color:var(--steel);}

/* ---------- 7 · hero network: same effect, new tones ---------- */
/* tones live in assets/hero-net.js — see hero-net.patch.md */
.hero__net{opacity:.5;}
.hero__star{display:none;}

/* ---------- 8 · focus ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--steel); outline-offset:3px;}
.band--navy a:focus-visible,.band--deep a:focus-visible,.nav a:focus-visible{outline-color:var(--gold);}