/* =========================================================
   Intelligent Context AI — Design Tokens
   colors_and_type.css
   ========================================================= */

/* ---------- Fonts ----------
   Primary: Inter Tight (wordmark feel: crisp geometric sans, works at heavy uppercase)
   Display alt: Space Grotesk (occasional accent — technical, rounded-stem)
   Mono: JetBrains Mono (engineering/data surfaces)
   Serif accent: Source Serif 4 (long-form whitepapers, quotes)
   NOTE: Google Fonts substitutions — original wordmark appears to be a proprietary or
   generic heavy geometric sans. Inter Tight Black is the nearest match. Flag to user
   if you need exact font files.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

:root {
  /* ---------- Color: Brand ---------- */
  --ica-slate-900: #1A262F;   /* deepest — headlines on light, backgrounds on dark */
  --ica-slate-800: #253642;
  --ica-slate-700: #2C3E4D;   /* rich dark — primary text, dark surfaces */
  --ica-slate-600: #3F5361;   /* CORE BRAND SLATE — wordmark color */
  --ica-slate-500: #56697A;   /* secondary text, icons */
  --ica-slate-400: #7A8A99;
  --ica-slate-300: #A6B2BC;
  --ica-slate-200: #C8D0D7;
  --ica-slate-100: #E3E8EC;
  --ica-slate-50:  #F1F4F6;

  --ica-copper-900: #6B4538;
  --ica-copper-800: #855543;
  --ica-copper-700: #96664F;
  --ica-copper-600: #A67862;  /* CORE BRAND COPPER — "Context AI" wordmark color */
  --ica-copper-500: #B88872;  /* hover / highlight */
  --ica-copper-400: #CCA091;
  --ica-copper-300: #DDB9A8;
  --ica-copper-200: #ECD2C4;
  --ica-copper-100: #F5E5DC;
  --ica-copper-50:  #FBF3ED;

  /* ---------- Color: Neutrals (warm) ---------- */
  --ica-bg:        #FAFAF7;   /* app background — warm off-white, NOT #fff */
  --ica-bg-raised: #FFFFFF;
  --ica-bg-sunk:   #F3F2EC;
  --ica-paper:     #FCFEFF;   /* logo background reference */
  --ica-ink:       #1A262F;

  /* ---------- Color: Semantic ---------- */
  --ica-success:   #4F7A5C;   /* desaturated green, keeps enterprise tone */
  --ica-warning:   #B5873A;
  --ica-danger:    #A8443A;
  --ica-info:      #4A6B8A;

  /* ---------- Semantic aliases ---------- */
  --fg-1: var(--ica-slate-900);  /* primary text */
  --fg-2: var(--ica-slate-700);  /* secondary */
  --fg-3: var(--ica-slate-500);  /* tertiary / meta */
  --fg-4: var(--ica-slate-400);  /* disabled / hint */
  --fg-on-dark: var(--ica-bg);
  --fg-accent: #C0552F; /* escort-orange — unified site accent (matches home) */

  --bg-1: var(--ica-bg);
  --bg-2: var(--ica-bg-raised);
  --bg-3: var(--ica-bg-sunk);
  --bg-dark: var(--ica-slate-900);

  --border-1: var(--ica-slate-100);
  --border-2: var(--ica-slate-200);
  --border-strong: var(--ica-slate-300);
  --border-accent: #C0552F; /* escort-orange — unified site accent (matches home) */

  /* ---------- Type: families ---------- */
  --font-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", var(--font-sans);
  --font-accent: "Space Grotesk", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Source Serif 4", ui-serif, Georgia, serif;

  /* ---------- Type: scale (modular, 1.25) ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-4xl:  52px;
  --fs-5xl:  68px;
  --fs-6xl:  88px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-wider:   0.08em;   /* uppercase eyebrows */
  --ls-widest:  0.14em;   /* wordmark "INTELLIGENT" treatment */

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

  /* ---------- Radii ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;    /* buttons, inputs — restrained; enterprise */
  --r-lg: 10px;
  --r-xl: 14px;   /* cards */
  --r-2xl: 20px;
  --r-full: 999px;

  /* ---------- Shadows (low-key, not glossy) ---------- */
  --shadow-xs: 0 1px 2px rgba(26, 38, 47, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 38, 47, 0.06), 0 1px 2px rgba(26, 38, 47, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 38, 47, 0.06), 0 2px 4px rgba(26, 38, 47, 0.04);
  --shadow-lg: 0 12px 28px rgba(26, 38, 47, 0.08), 0 4px 8px rgba(26, 38, 47, 0.04);
  --shadow-xl: 0 24px 56px rgba(26, 38, 47, 0.12), 0 8px 16px rgba(26, 38, 47, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(26, 38, 47, 0.04);
  --shadow-focus: 0 0 0 3px rgba(166, 120, 98, 0.28); /* copper focus ring */

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;

  /* ---------- Layout ---------- */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1100px;
  --container-xl:  1320px;
  --container-2xl: 1480px;
}

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

/* ---------- Semantic type classes ---------- */
.ica-eyebrow,
.ica-kicker {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--ica-copper-700);
}

.ica-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--ica-slate-600);
}

.ica-h1, h1.ica {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-4xl), 6vw, var(--fs-6xl));
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.ica-h2, h2.ica {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.ica-h3, h3.ica {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}

.ica-h4, h4.ica {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.ica-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.ica-body, p.ica {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.ica-small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

.ica-mono, code.ica, pre.ica {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

.ica-quote, blockquote.ica {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  border-left: 2px solid var(--ica-copper-600);
  padding-left: var(--sp-5);
}