/* ============================================================
   ideaSquared -Foundations
   Colors and typography tokens.
   Import this once at the top of any artifact:
     <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* ---------- Webfonts ----------
   We standardise on Inter Tight (display + UI) and Fraunces (editorial accents).
   Both are loaded from Google Fonts; if you have licensed alternatives,
   swap the @font-face below.
*/
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* ----------------------------------------------------------
     CORE PALETTE -Brand
     The mark sits on a navy field. Navy + ink-white is the
     spine of the brand; a single warm accent provides energy.
     ---------------------------------------------------------- */

  /* Navy -the primary brand surface */
  --i2-navy-950: #04121f;   /* deepest, near-black navy (logo bg darker) */
  --i2-navy-900: #08182a;   /* monogram background, hero surfaces */
  --i2-navy-800: #0f2238;   /* raised navy, cards on dark */
  --i2-navy-700: #1a324d;   /* hover state on dark surfaces */
  --i2-navy-600: #284765;   /* borders / dividers on dark */

  /* Ink -light surfaces */
  --i2-ink-50:  #f7f6f2;    /* paper -primary light surface, slight warmth */
  --i2-ink-100: #efece4;    /* warm sand -secondary surface */
  --i2-ink-200: #e2ddd1;    /* hairline / subtle divider */
  --i2-ink-300: #c8c1b0;    /* muted line */
  --i2-ink-400: #8c8674;    /* tertiary text on light */
  --i2-ink-500: #5b574c;    /* secondary text on light */
  --i2-ink-700: #2c2a25;    /* primary body on light */
  --i2-ink-900: #14130f;    /* near-black for headlines on light */

  /* Signal -warm accent (used sparingly: CTAs, focus, highlights) */
  --i2-signal-50:  #fef4e6;
  --i2-signal-200: #fbd9a3;
  --i2-signal-400: #f4a93b;
  --i2-signal-500: #e8911a;  /* primary signal */
  --i2-signal-600: #c4750c;
  --i2-signal-800: #7a4805;

  /* Circuit -a cooler accent, used to nod to the mark's tech motif */
  --i2-circuit-300: #7fd4c5;
  --i2-circuit-500: #2fa692;
  --i2-circuit-700: #146557;

  /* Equity -used in venture/equity contexts; a confident plum */
  --i2-equity-400: #b48bd6;
  --i2-equity-600: #7c4fa4;

  /* Semantic */
  --i2-success: #2fa692;
  --i2-warning: #e8911a;
  --i2-danger:  #c2453a;
  --i2-info:    #4a8dc2;

  /* ----------------------------------------------------------
     SEMANTIC TOKENS -light theme (default)
     Use these in components, not the raw palette.
     ---------------------------------------------------------- */

  --bg:           var(--i2-ink-50);
  --bg-raised:    #ffffff;
  --bg-sunken:    var(--i2-ink-100);
  --bg-inverse:   var(--i2-navy-900);

  --fg:           var(--i2-ink-900);   /* headlines, primary */
  --fg-body:      var(--i2-ink-700);   /* body copy */
  --fg-muted:     var(--i2-ink-500);   /* secondary */
  --fg-subtle:    var(--i2-ink-400);   /* tertiary, captions */
  --fg-inverse:   var(--i2-ink-50);

  --line:         var(--i2-ink-200);
  --line-strong:  var(--i2-ink-300);

  --accent:       var(--i2-signal-500);
  --accent-fg:    var(--i2-navy-900);  /* text on signal */
  --accent-soft:  var(--i2-signal-50);

  --link:         var(--i2-navy-900);
  --link-hover:   var(--i2-signal-600);

  --focus-ring:   var(--i2-signal-500);

  /* ----------------------------------------------------------
     TYPE FAMILIES
     ---------------------------------------------------------- */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ----------------------------------------------------------
     TYPE SCALE -modular, gentle ratio (1.2x)
     Use rem/px appropriately at the component level.
     ---------------------------------------------------------- */
  --t-display-1: clamp(56px, 8vw, 112px);  /* hero, single-purpose */
  --t-display-2: clamp(44px, 6vw, 80px);   /* section heroes */
  --t-h1: 56px;
  --t-h2: 40px;
  --t-h3: 28px;
  --t-h4: 22px;
  --t-h5: 18px;
  --t-body-lg: 19px;
  --t-body:    16px;
  --t-body-sm: 14px;
  --t-caption: 12px;
  --t-eyebrow: 12px;

  /* ----------------------------------------------------------
     SPACING -4px base, named scale
     ---------------------------------------------------------- */
  --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 -restrained. Cards are soft, buttons capsule, chips pill.
     ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS -soft, naturalistic. Avoid harsh drop shadows.
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(8, 24, 42, 0.04);
  --shadow-sm: 0 2px 6px rgba(8, 24, 42, 0.06), 0 1px 2px rgba(8, 24, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(8, 24, 42, 0.08), 0 2px 6px rgba(8, 24, 42, 0.04);
  --shadow-lg: 0 20px 48px rgba(8, 24, 42, 0.12), 0 4px 12px rgba(8, 24, 42, 0.06);
  --shadow-glow-signal: 0 0 0 6px rgba(232, 145, 26, 0.18);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 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: 220ms;
  --dur-slow: 380ms;
}

/* ============================================================
   Dark surface -opt-in by adding `.on-dark` to a section
   ============================================================ */
.on-dark {
  --bg: var(--i2-navy-900);
  --bg-raised: var(--i2-navy-800);
  --bg-sunken: var(--i2-navy-950);
  --bg-inverse: var(--i2-ink-50);
  --fg: var(--i2-ink-50);
  --fg-body: #d8d3c5;
  --fg-muted: #9aa1ab;
  --fg-subtle: #6c7480;
  --fg-inverse: var(--i2-ink-900);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --link: var(--i2-ink-50);
  --link-hover: var(--i2-signal-400);
  background: var(--bg);
  color: var(--fg-body);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES -wired to the tokens above.
   Apply by using semantic tags inside a container that has
   `.i2-prose` (for long-form) or by just relying on global tags.
   ============================================================ */

.i2-root,
body.i2 {
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.i2-display-1,
h1.i2-hero {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-display-1);
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--fg);
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.i2-display-2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-display-2);
  letter-spacing: -0.022em;
  line-height: 1;
  color: var(--fg);
  font-variation-settings: "opsz" 144;
}

.i2-h1, h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h1);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg);
  font-variation-settings: "opsz" 96;
}

.i2-h2, h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h2);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
}

.i2-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h3);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--fg);
}

.i2-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--fg);
}

.i2-h5, h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h5);
  line-height: 1.35;
  color: var(--fg);
}

.i2-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.55;
  color: var(--fg-body);
  text-wrap: pretty;
}

.i2-body, p {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-body);
  text-wrap: pretty;
}

.i2-small, small {
  font-size: var(--t-body-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

.i2-caption {
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--fg-muted);
}

/* Eyebrow -short uppercase label that precedes a heading. */
.i2-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.i2-eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

/* Editorial pull-quote */
.i2-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-wrap: balance;
}

code, .i2-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
}

a, .i2-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .i2-link:hover { color: var(--link-hover); }

/* Numerals look great with tabular figures in metrics */
.i2-numerals {
  font-feature-settings: "tnum" 1, "lnum" 1;
}