/* ============================================================
   Altris Design System — Foundation tokens
   Revised palette (w17·26): cool neutrals anchored by graphite,
   with terracotta + sky-blue used sparingly as accents.
   ============================================================ */

:root {
  /* ---- Type ---- */
  --font-sans: "Axia", "Söhne", "Barlow", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ============================================================
     CORE BRAND — confirmed hex values (revised)
     ============================================================ */
  --brand-graphite: #262A2E;  /* 01 · Primary — Graphite (near-black) */
  --brand-blue:     #5F7998;  /* 02 · Secondary — Baltic blue */
  --brand-steel:    #A7ADB3;  /* 03 · Mid neutral — Steel */
  --brand-mist:     #DDDDDD;  /* 04 · Light neutral — Mist */
  --brand-paper:    #EDEDED;  /* 05 · Off-white — Paper */
  --brand-white:    #FFFFFF;  /* 06 · White */

  /* ---- Accents (sparing use only) ---- */
  --accent-terra:   #F09260;  /* Warm accent — Terracotta */
  --accent-sky:     #A6CAF9;  /* Cool accent — Sky */

  /* Legacy aliases (kept so existing pages render; map onto new core) */
  --brand-ink:      var(--brand-graphite);
  --brand-deep:     var(--brand-graphite);
  --brand-taupe:    var(--accent-terra);
  --brand-cream:    var(--brand-paper);

  /* ============================================================
     TONAL SCALES — derived from core
     10 steps per family, Carbon-style
     ============================================================ */

  /* Graphite — Primary (anchored on #262A2E)
     Note: --deep-70 is repointed to graphite so legacy hero stages
     (which referenced --deep-70 in the old teal palette) now render
     in the brand's graphite. */
  --deep-10:  #eef0f2;
  --deep-20:  #d6dade;
  --deep-30:  #b3b9c0;
  --deep-40:  #8a9099;
  --deep-50:  #646b74;
  --deep-60:  #474d54;
  --deep-70:  #262A2E;  /* repointed → graphite (was #353a40) */
  --deep-80:  #262A2E;  /* CORE */
  --deep-90:  #181b1e;
  --deep-100: #0b0d0f;

  /* Baltic — Secondary blue (anchored on #5F7998 at step 60) */
  --baltic-10:  #eef2f7;
  --baltic-20:  #d4dde8;
  --baltic-30:  #b3c1d3;
  --baltic-40:  #92a3bb;
  --baltic-50:  #7689a6;
  --baltic-60:  #5F7998;  /* CORE */
  --baltic-70:  #4d637e;
  --baltic-80:  #3a4d63;
  --baltic-90:  #283648;
  --baltic-100: #15202c;

  /* Steel — neutral cool gray (anchored on #A7ADB3 at step 40) */
  --steel-10:   #f5f6f7;
  --steel-20:   #EDEDED;  /* CORE — paper */
  --steel-30:   #DDDDDD;  /* CORE — mist */
  --steel-40:   #A7ADB3;  /* CORE — steel */
  --steel-50:   #888e95;
  --steel-60:   #6b7177;
  --steel-70:   #50555a;
  --steel-80:   #383c40;
  --steel-90:   #262A2E;  /* CORE — graphite */
  --steel-100:  #0b0d0f;

  /* Terracotta — warm accent (anchored on #F09260 at step 50) — use sparingly */
  --terra-10:   #fdeee4;
  --terra-20:   #fbd6bf;
  --terra-30:   #f7bb98;
  --terra-40:   #f3a67c;
  --terra-50:   #F09260;  /* CORE */
  --terra-60:   #cb754a;
  --terra-70:   #a25b39;
  --terra-80:   #76422a;
  --terra-90:   #4a291a;
  --terra-100:  #20120b;

  /* Sky — cool accent (anchored on #A9CCF5 at step 40) — use sparingly */
  --sky-10:    #f3f8fe;
  --sky-20:    #dceaf9;
  --sky-30:    #c5dbf6;
  --sky-40:    #A6CAF9;  /* CORE */
  --sky-50:    #8ab1e3;
  --sky-60:    #6e95cb;
  --sky-70:    #54799f;
  --sky-80:    #3c5a78;
  --sky-90:    #253a52;
  --sky-100:   #11202f;

  /* Graphite/grey neutrals — full ramp (legacy gr-* tokens) */
  --gr-0:     #FFFFFF;
  --gr-5:     #f7f7f8;
  --gr-10:    #EDEDED;  /* paper */
  --gr-20:    #DDDDDD;  /* mist */
  --gr-30:    #c4c6c9;
  --gr-40:    #A7ADB3;  /* steel */
  --gr-50:    #888e95;
  --gr-60:    #6b7177;
  --gr-70:    #50555a;
  --gr-80:    #383c40;
  --gr-90:    #262A2E;  /* graphite (was ink) */
  --gr-100:   #0b0d0f;
  --gr-cream: #EDEDED;  /* legacy alias — points at paper now */

  /* ---- Signal ---- */
  --s-success: #4c7a3e;
  --s-warn:    #a37423;
  --s-error:   #9c3a32;
  --s-info:    var(--baltic-60);

  /* ---- Semantic bindings ---- */
  --bg:        var(--brand-white);    /* Default ground is now white */
  --bg-paper:  var(--brand-paper);    /* Cards, callouts */
  --bg-soft:   var(--brand-mist);     /* Quiet panels */
  --bg-white:  #ffffff;
  --bg-deep:   var(--brand-graphite); /* Primary dark surface */
  --bg-ink:    var(--brand-graphite); /* alias */

  --ink:       var(--brand-graphite);
  --ink-muted: var(--gr-60);
  --ink-faint: var(--gr-50);
  --ink-on-dark: #ffffff;
  --ink-on-dark-muted: rgba(255,255,255,0.68);
  --ink-on-dark-faint: rgba(255,255,255,0.42);

  --rule:         rgba(38,42,46,0.14);
  --rule-bold:    rgba(38,42,46,0.28);
  --rule-on-dark: rgba(255,255,255,0.14);

  --brand:     var(--brand-graphite);
  --accent:    var(--accent-terra);
  --accent-2:  var(--accent-sky);
  --link:      var(--brand-graphite);

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ---- Layout ---- */
  --sidebar-w: 272px;
  --content-max: 1040px;
  --content-pad: 64px;
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--deep-90); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-12) 0; }
img { max-width: 100%; display: block; }

/* ============================================================
   Axia-style type scale
   ============================================================ */
.t-display-01 { font-size: 88px; line-height: 1.02; letter-spacing: -0.025em; font-weight: 900; }
.t-display-02 { font-size: 64px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 900; }
.t-h1         { font-size: 56px; line-height: 1.06; letter-spacing: -0.018em; font-weight: 900; }
.t-h2         { font-size: 32px; line-height: 1.18; letter-spacing: -0.008em; font-weight: 700; }
.t-h3         { font-size: 14px; line-height: 1.3;  letter-spacing: 0.08em; font-weight: 500; text-transform: uppercase; }
.t-h4         { font-size: 20px; line-height: 1.3;  letter-spacing: -0.002em; font-weight: 700; }
.t-body-lg    { font-size: 19px; line-height: 1.55; font-weight: 400; }
.t-body       { font-size: 16px; line-height: 1.6;  font-weight: 400; }
.t-body-sm    { font-size: 14px; line-height: 1.55; font-weight: 300; }
.t-caption    { font-size: 12px; line-height: 1.45; font-weight: 500; letter-spacing: 0.02em; }
.t-eyebrow    { font-size: 11px; line-height: 1.2;  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.t-mono       { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0; }

.ink-muted { color: var(--ink-muted); }
.ink-faint { color: var(--ink-faint); }