/* ============================================================
   INSYTX Design System — Foundations
   Decision Intelligence for leaders who can't afford to guess.
   ============================================================ */

/* Webfonts ---------------------------------------------------
   Urbanist — SOLE SELF-HOSTED BRAND FONT. All 9 weights (100–900).
   Display, serif, brand, body all collapse to Urbanist.
   Mono falls back to system monospace stack (no webfont load).
   ------------------------------------------------------------ */
@font-face { font-family:"Urbanist"; src:url("fonts/Urbanist-Thin.ttf")       format("truetype"); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("fonts/Urbanist-ExtraLight.ttf") format("truetype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("fonts/Urbanist-Light.ttf")      format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("fonts/Urbanist-Regular.ttf")    format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("fonts/Urbanist-Medium.ttf")     format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("fonts/Urbanist-SemiBold.ttf")   format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("fonts/Urbanist-Bold.ttf")       format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("fonts/Urbanist-ExtraBold.ttf")  format("truetype"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Urbanist"; src:url("fonts/Urbanist-Black.ttf")      format("truetype"); font-weight:900; font-style:normal; font-display:swap; }

/* Ethnocentric — restricted to hero lockup only.
   Not exposed via token chain; opt in explicitly with font-family. */
@font-face {
  font-family: "Ethnocentric";
  src: url("fonts/Ethnocentric-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- COLOR: canonical (sampled from INSYTX logo, deepened for executive contrast) --- */
  --ink:              #051D31;   /* primary dark — INSYTX Ink 05 */
  --ink-2:            #041726;   /* Ink 04 — deeper surface / layered panels */
  --graphite:         #0A2A45;   /* card on ink          */
  --graphite-2:       #0F3458;   /* card hover on ink    */
  --slate:            #2B4663;   /* dividers, muted text */
  --slate-2:          #4E6682;   /* secondary on ink     */
  --mist:             #E6E9EE;   /* hairlines on light   */
  --bone:             #F5F2EB;   /* primary light surface */
  --bone-2:           #EDE8DD;   /* raised bone          */
  --paper:            #FFFFFF;   /* tables only          */

  /* ----- COLOR: accents (sampled from INSYTX logo) --------- */
  --signal-amber:      #DDB47B;  /* logo gold — the brand accent */
  --signal-amber-deep: #A87F44;  /* hover/press          */
  --signal-amber-soft: #EDD5B0;  /* backgrounds (rare)   */
  --insight-cyan:      #6FB3B8;  /* data viz only        */
  --alert-rust:        #B54A2E;  /* risk / negative      */
  --clarity-green:     #3E7A5E;  /* positive, never celebratory */

  /* ----- COLOR: semantic (light surface) ------------------- */
  --bg:               var(--bone);
  --bg-raised:        var(--bone-2);
  --bg-inverse:       var(--ink);

  --fg-1:             var(--ink);        /* primary text  */
  --fg-2:             var(--slate);      /* secondary     */
  --fg-3:             var(--slate-2);    /* tertiary      */
  --fg-on-dark:       var(--bone);
  --fg-on-dark-2:     #B7BECA;
  --fg-accent:        var(--signal-amber);

  --border:           rgba(5,29,49,0.14);
  --border-strong:    rgba(5,29,49,0.28);
  --border-on-dark:   rgba(230,233,238,0.12);
  --border-on-dark-2: rgba(230,233,238,0.24);

  --link:             var(--ink);
  --link-hover:       var(--signal-amber-deep);

  /* ----- TYPE: families — strict Urbanist -------------------
     Display / serif / brand / sans all resolve to Urbanist.
     Mono uses system stack (no extra webfont load). */
  --font-sans:    "Urbanist", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-serif:   var(--font-sans);
  --font-brand:   var(--font-sans);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ----- TYPE: scale (desktop, 8/4pt grid) ----------------- */
  --fs-0:  12px;   /* metadata / small caps label */
  --fs-1:  14px;   /* caption, micro              */
  --fs-2:  15px;   /* ui default                  */
  --fs-3:  17px;   /* body                        */
  --fs-4:  20px;   /* body large / lead-in        */
  --fs-5:  24px;   /* h5                          */
  --fs-6:  32px;   /* h4                          */
  --fs-7:  44px;   /* h3                          */
  --fs-8:  60px;   /* h2                          */
  --fs-9:  84px;   /* h1 / display                */
  --fs-10: 120px;  /* hero / slide display        */

  --lh-tight:   1.05;
  --lh-snug:    1.18;
  --lh-normal:  1.45;
  --lh-long:    1.65;

  --tracking-display: -0.015em;
  --tracking-body:    0em;
  --tracking-label:   0.12em;   /* ALL-CAPS labels */
  --tracking-meta:    0.18em;   /* metadata row    */

  /* ----- SPACING (8pt base, 4pt half) ---------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   40px;
  --sp-8:   56px;
  --sp-9:   64px;
  --sp-10:  88px;
  --sp-11:  104px;
  --sp-12:  144px;

  /* ----- RADII --------------------------------------------- */
  --radius-0: 0;     /* framework cards, tables */
  --radius-1: 2px;   /* default                 */
  --radius-2: 4px;   /* pills, chips            */
  --radius-3: 6px;   /* buttons, inputs max     */

  /* ----- ELEVATION (product UI only) ----------------------- */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(11,18,32,0.06);
  --elev-2: 0 1px 0 rgba(11,18,32,0.06), 0 8px 24px -8px rgba(11,18,32,0.18);
  --elev-inverse: 0 1px 0 rgba(230,233,238,0.06), 0 16px 32px -16px rgba(0,0,0,0.6);

  /* ----- MOTION -------------------------------------------- */
  --dur-fast:  120ms;
  --dur:       160ms;
  --dur-slow:  240ms;
  --ease:      cubic-bezier(0.2, 0, 0, 1);      /* decelerate */
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);

  /* ----- LAYOUT -------------------------------------------- */
  --maxw-editorial: 960px;
  --maxw-product:   1280px;
  --gutter:         24px;
  --margin-outer:   64px;
}

/* Dark surface tokens (swap root defaults when on dark) */
.on-dark,
[data-surface="dark"] {
  --bg:             var(--ink);
  --bg-raised:      var(--graphite);
  --fg-1:           var(--bone);
  --fg-2:           var(--fg-on-dark-2);
  --fg-3:           #7A8494;
  --border:         var(--border-on-dark);
  --border-strong:  var(--border-on-dark-2);
  --link:           var(--bone);
  --link-hover:     var(--signal-amber);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Applied via class or element so cards + UI can share rules.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: var(--fs-3);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display + heading scale -------------------------------------- */
/* HERO ONLY — Ethnocentric. Reserved for the single hero lockup on a page.
   All other headlines (h1 body of page, h2–h5) use Urbanist bold for hierarchy. */
.ix-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: var(--fg-1);
  text-wrap: balance;
  text-transform: uppercase;
  font-size: var(--fs-10);
}

/* HEADINGS — Urbanist (brand sans). Weight carries the hierarchy. */
.ix-h1,
.ix-h2,
.ix-h3,
.ix-h4,
.ix-h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
.ix-h1      { font-size: var(--fs-9); font-weight: 800; letter-spacing: -0.025em; }
.ix-h2      { font-size: var(--fs-8); }
.ix-h3      { font-size: var(--fs-7); line-height: var(--lh-snug); }
.ix-h4      { font-size: var(--fs-6); line-height: var(--lh-snug); font-weight: 600; }
.ix-h5      { font-size: var(--fs-5); line-height: var(--lh-snug); font-weight: 600; letter-spacing: -0.01em; }

/* Body + editorial — Urbanist (brand sans), with weight differentiating lead vs body. */
.ix-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-4);
  line-height: var(--lh-long);
  color: var(--fg-1);
  font-weight: 400;
}
.ix-body {
  font-family: var(--font-sans);
  font-size: var(--fs-3);
  line-height: var(--lh-long);
  color: var(--fg-1);
  font-weight: 400;
}
.ix-body-italic {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  color: var(--fg-2);
}
.ix-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

/* Framework label — THE signature type treatment ------------- */
.ix-label {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--fg-1);
}
.ix-label-accent { color: var(--signal-amber); }

/* Brand lockup — Ethnocentric for logo / hero insignia only */
.ix-brand {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.ix-brand-mark {
  font-family: var(--font-brand);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--fs-2);
  color: var(--fg-1);
}

.ix-subtitle {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: var(--fs-3);
  color: var(--fg-2);
  letter-spacing: 0;
}

/* Metadata row (section numbers, dates, bylines) ------------- */
.ix-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* UI + data -------------------------------------------------- */
.ix-ui {
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  line-height: var(--lh-normal);
  letter-spacing: 0;
}
.ix-mono,
.ix-metric {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.ix-metric {
  font-size: var(--fs-6);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

/* Strategic-consequence callout — Urbanist, amber rule. */
.ix-consequence {
  font-family: var(--font-sans);
  font-size: var(--fs-3);
  line-height: var(--lh-long);
  color: var(--fg-1);
  border-left: 2px solid var(--signal-amber);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  font-weight: 400;
}
.ix-consequence b,
.ix-consequence strong {
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--signal-amber-deep);
  display: block;
  margin-bottom: 2px;
}

/* Links, marks, selection ------------------------------------ */
a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur) var(--ease); }
a:hover { color: var(--link-hover); }

::selection { background: var(--signal-amber); color: var(--ink); }

hr, .ix-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-7) 0;
}
.ix-rule-amber { border-top-color: var(--signal-amber); border-top-width: 2px; }

/* Utility grid bg (permitted schematic texture) -------------- */
.ix-schematic-bg {
  background-image: radial-gradient(rgba(11,18,32,0.08) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: 0 0;
}
.on-dark .ix-schematic-bg,
[data-surface="dark"] .ix-schematic-bg {
  background-image: radial-gradient(rgba(230,233,238,0.08) 1px, transparent 1px);
}