/* ============================================================
   InferFoundry Design System — Colors & Type
   Mood: Industrial Forge — graphite, blackened steel,
         controlled heat, precision casting.
   ============================================================ */

/* ---- Webfonts (Google Fonts substitutes — see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     PRIMARY PALETTE — 5 brand colors
     ============================================================ */

  /* Graphite — deep neutral base. Near-black with a subtle cool
     cast (blackened steel, not pure black). Body backgrounds in
     dark mode, headlines on light, primary type. */
  --c-graphite:        #1A1C1F;   /*  26  28  31  */
  --c-graphite-800:    #24272B;
  --c-graphite-700:    #2E3237;
  --c-graphite-600:    #3A3F45;

  /* Ember — warm copper accent. Used SPARINGLY: brand moments,
     hero accent, single-letter detail in the wordmark.
     NEVER for body text, never for >5% of a surface. */
  --c-ember:           #B96A3C;   /* 185 106  60  */
  --c-ember-deep:      #8E4F2A;
  --c-ember-soft:      #D4895E;

  /* Signal — hotter orange/red. STATE ONLY: alerts, hover
     emphasis, destructive actions, "live" indicators.
     NEVER as a fill color or decoration. */
  --c-signal:          #E0521B;   /* 224  82  27  */
  --c-signal-deep:     #B53E10;

  /* Slate — institutional steel blue. Trust tone for finance /
     compliance / sovereignty moments, secondary nav, links on
     light surfaces. NEVER for primary CTAs. */
  --c-slate:           #4F6573;   /*  79 101 115  */
  --c-slate-deep:      #36495A;
  --c-slate-soft:      #7E919E;

  /* Parchment — warm off-white. Default page surface in light
     mode. Tested not to pull pink/yellow under projection.
     NEVER use as a text color on white. */
  --c-parchment:       #F1ECE2;   /* 241 236 226  */
  --c-parchment-deep:  #E6DFD0;

  /* ============================================================
     SUPPORTING NEUTRALS — 3 grays
     ============================================================ */
  --c-paper:           #FAF8F4;   /* lightest surface, "above" parchment */
  --c-fog:             #C5C9CE;   /* dividers on light, disabled fg */
  --c-steel:           #6B7079;   /* secondary text on light */

  /* ============================================================
     SEMANTIC TOKENS — light mode (default)
     ============================================================ */

  /* Surfaces */
  --bg:                var(--c-parchment);
  --bg-raised:         var(--c-paper);
  --bg-sunk:           var(--c-parchment-deep);
  --bg-inverse:        var(--c-graphite);

  /* Foreground */
  --fg1:               var(--c-graphite);      /* primary text */
  --fg2:               var(--c-steel);         /* secondary text */
  --fg3:               #8C9097;                /* tertiary / captions */
  --fg-inverse:        var(--c-parchment);
  --fg-on-ember:       var(--c-parchment);
  --fg-on-signal:      #FFFFFF;

  /* Lines */
  --line:              #D9D3C6;                /* default divider on parchment */
  --line-strong:       #BFB8A8;
  --line-inverse:      var(--c-graphite-700);

  /* Brand / accent semantic */
  --accent:            var(--c-ember);
  --accent-fg:         var(--c-parchment);
  --link:              var(--c-slate-deep);
  --link-hover:        var(--c-graphite);

  /* State */
  --state-hover:       var(--c-signal);
  --state-success:     #4A6E48;
  --state-warn:        #B07E1F;
  --state-error:       var(--c-signal);
  --state-info:        var(--c-slate);

  /* Code */
  --code-bg:           var(--c-graphite);
  --code-fg:           var(--c-parchment);
  --code-line:         var(--c-graphite-700);
  --code-comment:      #7E8189;
  --code-string:       #D4895E;
  --code-keyword:      #8FA8B5;
  --code-fn:           #E6DFD0;

  /* ============================================================
     TYPE — families
     ============================================================ */
  --font-display:      'Söhne', 'Archivo', 'Inter Tight', system-ui, sans-serif;
  --font-body:         'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:         'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ============================================================
     TYPE — type scale (1.250 — major third)
     ============================================================ */
  --t-display:    clamp(48px, 6vw, 80px);
  --t-h1:         clamp(36px, 4vw, 56px);
  --t-h2:         32px;
  --t-h3:         24px;
  --t-h4:         20px;
  --t-body-lg:    18px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-caption:    13px;
  --t-overline:   11px;
  --t-code:       14px;

  /* Line heights */
  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-base:      1.5;
  --lh-loose:     1.65;

  /* Tracking */
  --tr-tight:     -0.02em;
  --tr-snug:      -0.01em;
  --tr-base:      0;
  --tr-wide:      0.04em;
  --tr-overline:  0.12em;

  /* ============================================================
     SPACING — 4px base grid
     ============================================================ */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   32px;
  --s-8:   40px;
  --s-9:   48px;
  --s-10:  64px;
  --s-11:  80px;
  --s-12:  96px;
  --s-13:  128px;

  /* ============================================================
     RADII — squared by default. Industrial forge, not soft SaaS.
     ============================================================ */
  --r-0:   0px;
  --r-1:   2px;     /* default — barely-rounded, like a milled edge */
  --r-2:   4px;
  --r-3:   6px;
  --r-4:   10px;    /* cards */
  --r-pill: 999px;  /* status pills only */

  /* ============================================================
     SHADOWS — restrained. Stamped/embossed, not floaty.
     ============================================================ */
  --sh-stamp:   inset 0 -1px 0 0 rgba(0,0,0,0.08);
  --sh-line:    0 0 0 1px var(--line);
  --sh-card:    0 1px 0 0 rgba(0,0,0,0.04), 0 0 0 1px var(--line);
  --sh-raised:  0 4px 16px -8px rgba(26,28,31,0.18), 0 0 0 1px var(--line);
  --sh-deep:    0 24px 48px -24px rgba(26,28,31,0.28), 0 0 0 1px var(--line);
  --sh-ember:   0 0 0 1px var(--c-ember), 0 2px 12px -4px rgba(185,106,60,0.4);

  /* ============================================================
     MOTION — restrained. Industrial = precise, not springy.
     ============================================================ */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in:     cubic-bezier(0.6, 0.0, 0.8, 0.4);
  --ease-inout:  cubic-bezier(0.6, 0.0, 0.2, 1);
  --dur-1:       80ms;
  --dur-2:       160ms;
  --dur-3:       240ms;
  --dur-4:       400ms;
}

/* ============================================================
   DARK MODE — graphite is the home surface
   ============================================================ */
[data-theme="dark"], .theme-dark {
  --bg:               var(--c-graphite);
  --bg-raised:        var(--c-graphite-800);
  --bg-sunk:          #131517;
  --bg-inverse:       var(--c-parchment);

  --fg1:              var(--c-parchment);
  --fg2:              #B0B4B9;
  --fg3:              #7E8389;
  --fg-inverse:       var(--c-graphite);

  --line:             var(--c-graphite-700);
  --line-strong:      var(--c-graphite-600);

  --link:             var(--c-slate-soft);
  --link-hover:       var(--c-ember-soft);

  --sh-card:          0 0 0 1px var(--c-graphite-700);
  --sh-raised:        0 8px 24px -12px rgba(0,0,0,0.6), 0 0 0 1px var(--c-graphite-700);
}

/* ============================================================
   BASE TYPE — semantic element styling
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--fg1);
  font-weight: 600;
  margin: 0;
}

h1, .h1 {
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 700;
}

h2, .h2 {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 600;
}

h3, .h3 {
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 600;
}

h4, .h4 {
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  font-weight: 600;
}

.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 700;
}

p, .body {
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--fg1);
  text-wrap: pretty;
  margin: 0 0 var(--s-4) 0;
}

.body-lg  { font-size: var(--t-body-lg); line-height: var(--lh-loose); }
.body-sm  { font-size: var(--t-body-sm); }
.caption  { font-size: var(--t-caption); color: var(--fg2); }

.overline {
  font-size: var(--t-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-overline);
  font-weight: 600;
  color: var(--fg2);
}

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-2) var(--ease-out);
}
a:hover { color: var(--link-hover); }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--t-code);
  font-feature-settings: "ss02", "calt";
}

code {
  background: var(--bg-sunk);
  padding: 2px 6px;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  font-size: 0.9em;
}

pre {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: var(--s-5);
  border-radius: var(--r-2);
  overflow-x: auto;
  line-height: 1.55;
  border: 1px solid var(--code-line);
}
pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s-8) 0;
}

::selection { background: var(--c-ember); color: var(--c-parchment); }