/* Smart Analytica — Colors & Type tokens
 * Sourced from "SmartOps UI with Style Sheet" Figma brand guidelines.
 * Single font family across the brand: Inter (variable, opsz + wght).
 */

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-VariableFont_opsz_wght.woff2") format("woff2"),
       url("fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic-VariableFont_opsz_wght.woff2") format("woff2"),
       url("fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Brand primaries ─────────────────────────────────────────── */
  --sa-navy:        #032B50;   /* Primary brand color, deep navy   */
  --sa-blue:        #0D68E7;   /* Action blue - text accents AND filled buttons (per Figma, pixel-confirmed) */
  --sa-blue-deep:   #0D68E7;   /* Same blue (kept for compatibility) */
  --sa-orange:      #FD5C01;   /* Brand accent, energy, CTAs      */
  --sa-cyan:        #06E3FF;   /* Gradient start (cool)           */
  --sa-yellow:      #FFDC07;   /* Gradient start (warm)           */
  --sa-deep-blue:   #1212D6;   /* Gradient end (cool)             */

  /* ── Signature gradients ─────────────────────────────────────── */
  --sa-grad-cool:   linear-gradient(180deg, #06E3FF 0%, #1212D6 100%);
  --sa-grad-warm:   linear-gradient(180deg, #FFDC07 0%, #FD5C01 75%);
  --sa-grad-spark:  linear-gradient(135deg, #FD5C01 0%, #0D68E7 100%);
  /* "Bloom" — soft brand wash used behind hero content */
  --sa-bloom-blue:  radial-gradient(circle at 30% 30%, rgba(13,104,231,0.12), transparent 60%);
  --sa-bloom-orange:radial-gradient(circle at 70% 70%, rgba(253,92,1,0.10), transparent 60%);

  /* ── Primary scale (navy) ────────────────────────────────────── */
  --sa-primary-900: #032B50;
  --sa-primary-800: rgba(3,43,80,0.80);
  --sa-primary-700: rgba(3,43,80,0.70);
  --sa-primary-600: rgba(3,43,80,0.60);
  --sa-primary-500: rgba(3,43,80,0.50);
  --sa-primary-400: rgba(3,43,80,0.40);
  --sa-primary-300: rgba(3,43,80,0.30);
  --sa-primary-200: rgba(3,43,80,0.20);
  --sa-primary-100: rgba(3,43,80,0.10);
  --sa-primary-50:  rgba(3,43,80,0.05);

  /* ── Secondary scale (action blue) ───────────────────────────── */
  --sa-secondary-900: #0D68E7;
  --sa-secondary-700: rgba(13,104,231,0.70);
  --sa-secondary-500: rgba(13,104,231,0.50);
  --sa-secondary-300: rgba(13,104,231,0.30);
  --sa-secondary-100: rgba(13,104,231,0.10);
  --sa-secondary-50:  rgba(13,104,231,0.05);

  /* ── Accent scale (orange) ───────────────────────────────────── */
  --sa-accent-900: #FD5C01;
  --sa-accent-700: rgba(253,92,1,0.70);
  --sa-accent-500: rgba(253,92,1,0.50);
  --sa-accent-300: rgba(253,92,1,0.30);
  --sa-accent-100: rgba(253,92,1,0.10);
  --sa-accent-50:  rgba(253,92,1,0.05);

  /* ── Neutrals (grey) ─────────────────────────────────────────── */
  --sa-fg-1:        #131927;   /* Primary text                    */
  --sa-fg-2:        #6D717F;   /* Secondary text                  */
  --sa-fg-3:        #9EA2AE;   /* Tertiary text / placeholder     */
  --sa-fg-inverse:  #FAFAFA;
  --sa-bg-1:        #FFFFFF;   /* Surface                         */
  --sa-bg-2:        #F9FAFB;   /* Subtle surface / inputs         */
  --sa-bg-3:        #F3F4F6;   /* Selected / hover                */
  --sa-border:      #E5E7EA;   /* Default border                  */
  --sa-border-strong: #DAE8E4;
  --sa-divider:     rgba(0,0,0,0.10);

  /* ── Semantic ────────────────────────────────────────────────── */
  --sa-success:     #43B75D;
  --sa-success-bg:  rgba(67,183,93,0.12);
  --sa-danger:      #EE443F;
  --sa-danger-bg:   rgba(238,68,63,0.12);
  --sa-warning:     #FFAA00;
  --sa-warning-bg:  rgba(255,170,0,0.14);
  --sa-info:        #4E61F6;
  --sa-info-bg:     rgba(78,97,246,0.12);

  /* ── Soft sage (data ink for charts) ─────────────────────────── */
  --sa-sage-50:     #DAE8E4;
  --sa-sage-100:    #BDE3E2;
  --sa-sage-700:    #5E6966;
  --sa-sage-900:    #3A5759;

  /* ── Type system (Inter) ─────────────────────────────────────── */
  --sa-font-sans:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sa-font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display / Headline */
  --sa-display-1-size: 104px; --sa-display-1-line: 102px; --sa-display-1-weight: 700;
  --sa-display-2-size: 74px;  --sa-display-2-line: 74px;  --sa-display-2-weight: 700;
  --sa-h1-size: 64px;         --sa-h1-line: 76px;         --sa-h1-weight: 700;
  --sa-h2-size: 48px;         --sa-h2-line: 58px;         --sa-h2-weight: 700;
  --sa-h3-size: 38px;         --sa-h3-line: 46px;         --sa-h3-weight: 700;
  --sa-h4-size: 34px;         --sa-h4-line: 42px;         --sa-h4-weight: 700;
  --sa-h5-size: 28px;         --sa-h5-line: 36px;         --sa-h5-weight: 700;

  /* Subtitle */
  --sa-s1-size: 18px; --sa-s1-line: 28px; --sa-s1-weight: 600;
  --sa-s2-size: 16px; --sa-s2-line: 24px; --sa-s2-weight: 600;

  /* Body */
  --sa-b1-size: 16px; --sa-b1-line: 24px; --sa-b1-weight: 400;
  --sa-b2-size: 16px; --sa-b2-line: 24px; --sa-b2-weight: 500;
  --sa-b3-size: 14px; --sa-b3-line: 20px; --sa-b3-weight: 400;
  --sa-b4-size: 14px; --sa-b4-line: 20px; --sa-b4-weight: 500;

  /* Caption / Label */
  --sa-c1-size: 12px; --sa-c1-line: 16px; --sa-c1-weight: 400;
  --sa-c2-size: 12px; --sa-c2-line: 16px; --sa-c2-weight: 500;
  --sa-c3-size: 10px; --sa-c3-line: 14px; --sa-c3-weight: 500;
  --sa-label-size: 12px; --sa-label-line: 16px; --sa-label-weight: 500;

  /* Buttons */
  --sa-btn-giant-size: 16px;
  --sa-btn-lg-size:    16px;
  --sa-btn-md-size:    14px;
  --sa-btn-sm-size:    12px;
  --sa-btn-tiny-size:  12px;

  /* ── Radii ───────────────────────────────────────────────────── */
  --sa-radius-xs: 4px;
  --sa-radius-sm: 8px;
  --sa-radius-md: 12px;
  --sa-radius-lg: 16px;
  --sa-radius-xl: 24px;
  --sa-radius-pill: 999px;

  /* ── Spacing scale (4pt) ─────────────────────────────────────── */
  --sa-space-1:  4px;
  --sa-space-2:  8px;
  --sa-space-3:  12px;
  --sa-space-4:  16px;
  --sa-space-5:  20px;
  --sa-space-6:  24px;
  --sa-space-8:  32px;
  --sa-space-10: 40px;
  --sa-space-12: 48px;
  --sa-space-16: 64px;
  --sa-space-20: 80px;

  /* ── Shadow system ───────────────────────────────────────────── */
  --sa-shadow-100: 0 1px 2px -1px rgba(19,25,39,0.08), 0 1px 1px rgba(19,25,39,0.06);
  --sa-shadow-200: 0 4px 4px -2px rgba(19,25,39,0.08), 0 2px 4px -2px rgba(19,25,39,0.12);
  --sa-shadow-300: 0 6px 10px -4px rgba(19,25,39,0.08), 0 4px 8px -4px rgba(19,25,39,0.10);
  --sa-shadow-400: 0 10px 18px -4px rgba(19,25,39,0.08), 0 6px 12px -6px rgba(19,25,39,0.10);
  --sa-shadow-500: 0 10px 32px -4px rgba(19,25,39,0.10), 0 6px 14px -6px rgba(19,25,39,0.12);
  --sa-shadow-600: 0 20px 40px -8px rgba(19,25,39,0.16), 0 8px 20px -8px rgba(19,25,39,0.10);
  --sa-shadow-700: 0 28px 60px -10px rgba(19,25,39,0.20), 0 10px 24px -10px rgba(19,25,39,0.12);
  --sa-shadow-800: 0 36px 80px -12px rgba(19,25,39,0.24), 0 14px 30px -14px rgba(19,25,39,0.14);
  --sa-shadow-focus: 0 0 0 4px rgba(13,104,231,0.20);

  /* ── Motion ──────────────────────────────────────────────────── */
  --sa-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sa-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sa-dur-fast: 120ms;
  --sa-dur-base: 200ms;
  --sa-dur-slow: 320ms;
}

/* ── Semantic element styles ────────────────────────────────────── */
body {
  font-family: var(--sa-font-sans);
  color: var(--sa-fg-1);
  background: var(--sa-bg-1);
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--sa-h1-size); line-height: var(--sa-h1-line); font-weight: var(--sa-h1-weight); letter-spacing: -0.02em; color: var(--sa-navy); }
h2 { font-size: var(--sa-h2-size); line-height: var(--sa-h2-line); font-weight: var(--sa-h2-weight); letter-spacing: -0.02em; color: var(--sa-navy); }
h3 { font-size: var(--sa-h3-size); line-height: var(--sa-h3-line); font-weight: var(--sa-h3-weight); letter-spacing: -0.01em; color: var(--sa-navy); }
h4 { font-size: var(--sa-h4-size); line-height: var(--sa-h4-line); font-weight: var(--sa-h4-weight); color: var(--sa-fg-1); }
h5 { font-size: var(--sa-h5-size); line-height: var(--sa-h5-line); font-weight: var(--sa-h5-weight); color: var(--sa-fg-1); }
p  { font-size: var(--sa-b1-size); line-height: var(--sa-b1-line); color: var(--sa-fg-1); }
small { font-size: var(--sa-c1-size); line-height: var(--sa-c1-line); color: var(--sa-fg-2); }
code, pre { font-family: var(--sa-font-mono); font-size: 13px; }
a  { color: var(--sa-blue); text-decoration: none; }
/* Only genuine inline text links (inside prose paragraphs / list items) underline
   on hover. Block-level / card-wrapping anchors highlight their own CTA instead,
   so hovering a clickable card no longer underlines every line of text inside it. */
p a:hover, li a:hover { text-decoration: underline; }