/* ==========================================================================
   Stack Influence — Design Tokens
   Brand + typography + semantic vars. Import this file once per page.
   ========================================================================== */

/* Fonts -------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Instrument+Serif:ital@0;1&family=Roboto:wght@300;400;500&display=swap');
/* Material Symbols — Outlined only. Used for editorial + UI glyphs. */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');

:root {
  /* ------------------------------------------------------------------------
     COLOR — Primary palette
     ---------------------------------------------------------------------- */
  --si-grape:             #8551F5;   /* saturated CTA — use sparingly */
  --si-grape-ink:         #814CF6;   /* gradient-start of brand glyphs */
  --si-light-grape:       #C3A4FF;   /* secondary accent */
  --si-lighter-grape:     #F0ECFB;   /* pale background / section fill */
  --si-dark-grape:        #341C68;   /* primary ink — headings / CTAs-on-light */
  --si-darker-grape:      #221334;   /* deepest plum */

  --si-rose:              #FFABB9;   /* pink accent */
  --si-light-rose:        #FBE1E6;   /* pale pink background */
  --si-lighter-rose:      #FBE1E6;   /* alias — same token in the book */
  --si-dark-rose:         #6B1E60;   /* secondary ink */

  /* Neutral surface colors */
  --si-white:             #FFFFFF;
  --si-chalk:             #F9F8F4;   /* primary off-white surface */
  --si-text-primary:      #141A21;   /* body copy */
  --si-text-secondary:    #637381;   /* captions, meta */
  --si-hairline:          rgba(145, 158, 171, 0.20); /* the only border color */

  /* ------------------------------------------------------------------------
     COLOR — Semantic
     ---------------------------------------------------------------------- */
  --si-fg-1:              var(--si-text-primary);
  --si-fg-2:              var(--si-text-secondary);
  --si-fg-brand:          var(--si-dark-grape);
  --si-fg-brand-alt:      var(--si-dark-rose);
  --si-fg-on-dark:        var(--si-white);

  --si-bg:                var(--si-white);
  --si-bg-alt:            var(--si-chalk);
  --si-bg-brand-soft:     var(--si-lighter-grape);
  --si-bg-rose-soft:      var(--si-light-rose);
  --si-bg-dark:           var(--si-text-primary);

  --si-border:            var(--si-hairline);
  --si-border-strong:     var(--si-dark-grape);

  --si-cta:               var(--si-grape);
  --si-cta-ink:           var(--si-white);
  --si-cta-hover:         #7240DE;   /* 8% darken */

  /* ------------------------------------------------------------------------
     GRADIENTS (backgrounds only, always vertical)
     ---------------------------------------------------------------------- */
  --si-grad-grape:        linear-gradient(180deg, var(--si-lighter-grape) 0%, #FFFFFF 100%);
  --si-grad-rose:         linear-gradient(180deg, var(--si-lighter-rose)  0%, #FFFFFF 100%);
  --si-grad-dual:         linear-gradient(180deg, var(--si-lighter-rose)  0%, var(--si-lighter-grape) 100%);
  /* Protection gradient for text over 3D scenes */
  --si-grad-protect:      linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.65) 100%);

  /* ------------------------------------------------------------------------
     TYPOGRAPHY — Families
     ---------------------------------------------------------------------- */
  --si-font-sans:         'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --si-font-serif:        'Instrument Serif', ui-serif, Georgia, serif;
  --si-font-body-alt:     'Roboto', var(--si-font-sans);
  --si-font-mono:         ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ------------------------------------------------------------------------
     TYPE SCALE (in-use sizes from the brand book + marketing site)
     ---------------------------------------------------------------------- */
  --si-size-display:      101.5625px; /* cover hero */
  --si-size-h1:           84px;
  --si-size-h2:           64px;
  --si-size-h3:           38px;
  --si-size-h4:           32px;
  --si-size-h5:           24px;
  --si-size-h6:           18px;
  --si-size-body-lg:      22px;
  --si-size-body:         18px;
  --si-size-body-sm:      16px;
  --si-size-caption:      14px;
  --si-size-overline:     14px;

  /* Line heights */
  --si-lh-tight:          0.95;   /* display */
  --si-lh-heading:        1.05;
  --si-lh-body:           1.45;
  --si-lh-loose:          1.6;

  /* Letter spacing */
  --si-tracking-tight:    -0.01em;  /* -1%, headline default */
  --si-tracking-tighter:  -0.02em;
  --si-tracking-overline: 0.125em;  /* ~2px at 16px */
  --si-tracking-overline-lg: 0.3em; /* for 20px overlines in brand docs */

  /* Weights */
  --si-weight-regular:    400;
  --si-weight-medium:     500;
  --si-weight-semibold:   600;
  --si-weight-bold:       700;

  /* ------------------------------------------------------------------------
     SPACING (8px grid)
     ---------------------------------------------------------------------- */
  --si-space-1:   4px;
  --si-space-2:   8px;
  --si-space-3:   12px;
  --si-space-4:   16px;
  --si-space-5:   24px;
  --si-space-6:   32px;
  --si-space-7:   48px;
  --si-space-8:   64px;
  --si-space-9:   96px;
  --si-space-10:  128px;
  --si-space-11:  160px;

  /* ------------------------------------------------------------------------
     RADII
     ---------------------------------------------------------------------- */
  --si-radius-xs:   2px;    /* buttons, pills */
  --si-radius-sm:   6px;    /* small chips, icon tiles */
  --si-radius-md:   10px;   /* cards, boxouts — default */
  --si-radius-lg:   20px;   /* rare — special hero blocks */
  --si-radius-pill: 9999px; /* avatars, round badges */
  --si-radius-logo: 50px;   /* the logomark container only */

  /* ------------------------------------------------------------------------
     SHADOWS (used sparingly)
     ---------------------------------------------------------------------- */
  --si-shadow-xs:  0 1px 2px 0 rgba(20, 26, 33, 0.04);
  --si-shadow-sm:  0 2px 8px 0 rgba(20, 26, 33, 0.06);
  --si-shadow-md:  0 4px 4px 0 rgba(0, 0, 0, 0.10);  /* brand-book spec */
  --si-shadow-lg:  0 12px 32px -8px rgba(52, 28, 104, 0.18);

  /* ------------------------------------------------------------------------
     MOTION
     ---------------------------------------------------------------------- */
  --si-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --si-ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --si-dur-quick:     160ms;
  --si-dur-base:      220ms;
  --si-dur-slow:      400ms;

  /* ------------------------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------------------- */
  --si-container:     1440px;
  --si-gutter:        48px;
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================== */

html, body {
  color: var(--si-fg-1);
  background: var(--si-bg);
  font-family: var(--si-font-sans);
  font-size: var(--si-size-body);
  line-height: var(--si-lh-body);
  font-weight: var(--si-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--si-font-sans);
  font-weight: var(--si-weight-medium);
  letter-spacing: var(--si-tracking-tight);
  line-height: var(--si-lh-heading);
  color: var(--si-fg-brand);
  text-wrap: balance;
  margin: 0 0 var(--si-space-4);
}
h1 { font-size: var(--si-size-h1); line-height: var(--si-lh-tight); }
h2 { font-size: var(--si-size-h2); }
h3 { font-size: var(--si-size-h3); }
h4 { font-size: var(--si-size-h4); }
h5 { font-size: var(--si-size-h5); }
h6 { font-size: var(--si-size-h6); }

/* The signature Stack Influence highlight word — use <em> or .si-highlight
   inside an otherwise-sans headline. Mid/end-of-line only. */
.si-highlight,
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-family: var(--si-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;   /* ~+2px */
  letter-spacing: 0;
}

p {
  font-size: var(--si-size-body);
  line-height: var(--si-lh-body);
  color: var(--si-fg-1);
  max-width: 65ch;
  text-wrap: pretty;
  margin: 0 0 var(--si-space-5);
}

.si-lead {
  font-size: var(--si-size-body-lg);
  line-height: 1.4;
  letter-spacing: var(--si-tracking-tighter);
}

.si-overline {
  font-size: var(--si-size-overline);
  font-weight: var(--si-weight-medium);
  letter-spacing: var(--si-tracking-overline);
  text-transform: uppercase;
  color: var(--si-fg-brand);
  line-height: 1.2;
}
.si-overline--lg {
  font-size: 20px;
  letter-spacing: var(--si-tracking-overline-lg);
}

a {
  color: var(--si-fg-brand);
  text-decoration: none;
  transition: opacity var(--si-dur-base) var(--si-ease-out);
}
a:hover { opacity: 0.75; }

code, pre {
  font-family: var(--si-font-mono);
  font-size: 0.92em;
  background: var(--si-bg-alt);
  border-radius: var(--si-radius-sm);
  padding: 0.15em 0.4em;
}
pre { padding: var(--si-space-4); overflow-x: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--si-border);
  margin: var(--si-space-7) 0;
}

/* Utility: the Material icon glyph */
.si-icon {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 24px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

/* Button baseline ---------------------------------------------------------- */
.si-btn {
  font-family: var(--si-font-sans);
  font-size: var(--si-size-body-sm);
  font-weight: var(--si-weight-medium);
  letter-spacing: 0;
  line-height: 1;
  border-radius: var(--si-radius-xs);
  padding: 12px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--si-dur-base) var(--si-ease-out),
              transform var(--si-dur-quick) var(--si-ease-out),
              opacity var(--si-dur-base) var(--si-ease-out);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.si-btn:active { transform: translateY(1px); }
.si-btn--primary   { background: var(--si-cta); color: var(--si-cta-ink); }
.si-btn--primary:hover   { background: var(--si-cta-hover); }
.si-btn--secondary { background: transparent; color: var(--si-fg-brand); border-color: var(--si-fg-brand); }
.si-btn--secondary:hover { background: rgba(52,28,104,0.06); }
.si-btn--ghost     { background: transparent; color: var(--si-fg-brand); }
.si-btn--ghost:hover     { opacity: 0.7; }