/* ============================================================
   Stratus Cloud Solutions — Webfonts
   NOTE: Brand font binaries were not provided. These are Google
   Fonts placeholders chosen to match the intended voice:
   - Bricolage Grotesque — display (confident, characterful)
   - Hanken Grotesk     — body (warm, highly readable)
   - Spline Sans Mono   — data/eyebrows/code
   Replace with licensed binaries + @font-face when available.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Spline+Sans+Mono:wght@400;500;600&display=swap");
/* ============================================================
   Stratus Cloud Solutions — Color tokens
   System: "Above the clouds" — deep ink-navy + sky azure on
   cool cloud-tinted paper; three product accents; semantic set.
   ============================================================ */
:root {
  /* ---------- Ink (brand navy — text, inverse surfaces) ---------- */
  --ink-950: #0a1422;
  --ink-900: #102036;
  --ink-800: #16304f;
  --ink-700: #1f4068;
  --ink-600: #2a5384;

  /* ---------- Sky (primary azure) ---------- */
  --sky-50: #eef5fd;
  --sky-100: #dceafb;
  --sky-200: #bbd6f7;
  --sky-300: #8fbcf1;
  --sky-400: #5c9ce8;
  --sky-500: #3680db;
  --sky-600: #2368c4;
  --sky-700: #1b53a0;
  --sky-800: #173f78;
  --sky-900: #132f59;

  /* ---------- Cloud (cool neutrals) ---------- */
  --cloud-0: #ffffff;
  --cloud-25: #fafcfe;
  --cloud-50: #f4f7fb;
  --cloud-100: #e9eef5;
  --cloud-200: #d9e1eb;
  --cloud-300: #c0ccda;
  --cloud-400: #9aa9bc;
  --cloud-500: #74859c;
  --cloud-600: #57687f;
  --cloud-700: #415163;

  /* ---------- Product accents ---------- */
  /* Data Cleanser — teal (clean, precise) */
  --dc-100: #ddf4f1;
  --dc-300: #7dd6cc;
  --dc-500: #149e92;
  --dc-600: #0e7f75;
  --dc-700: #0b6359;
  /* Impact Learn — violet (knowledge, depth) */
  --il-100: #ece8fa;
  --il-300: #b4a6ec;
  --il-500: #6e59d9;
  --il-600: #5946bb;
  --il-700: #483896;
  /* Help Tips — amber (warm, human) */
  --ht-100: #fcefdc;
  --ht-300: #f6c57e;
  --ht-500: #e98f1b;
  --ht-600: #c57212;
  --ht-700: #9a5a0e;

  /* ---------- Semantic / feedback ---------- */
  --success-100: #dcf2e6;
  --success-600: #1e8e5a;
  --success-700: #176f47;
  --warning-100: #fbeed6;
  --warning-600: #c97a06;
  --warning-700: #9d5f05;
  --danger-100: #fae3e3;
  --danger-600: #c53b3b;
  --danger-700: #9e2f2f;
  --info-100: var(--sky-100);
  --info-600: var(--sky-600);

  /* ---------- Hairlines / lines ---------- */
  --line-hairline: rgba(16, 32, 54, 0.1);
  --line-soft: rgba(16, 32, 54, 0.06);
  --line-strong: rgba(16, 32, 54, 0.18);
  --line-inverse: rgba(244, 247, 251, 0.16);

  /* ---------- Semantic aliases ---------- */
  --surface-page: var(--cloud-50);
  --surface-card: var(--cloud-0);
  --surface-sunken: var(--cloud-100);
  --surface-raised: var(--cloud-25);
  --surface-inverse: var(--ink-900);
  --surface-inverse-deep: var(--ink-950);

  --text-display: var(--ink-900);
  --text-body: var(--ink-800);
  --text-muted: var(--cloud-600);
  --text-faint: var(--cloud-500);
  --text-inverse: var(--cloud-25);
  --text-inverse-muted: rgba(244, 247, 251, 0.64);
  --text-link: var(--sky-700);

  --accent-primary: var(--sky-600);
  --accent-primary-hover: var(--sky-700);
  --accent-primary-active: var(--sky-800);
  --accent-primary-tint: var(--sky-50);

  --focus-ring: 0 0 0 2px var(--cloud-0), 0 0 0 4px var(--sky-500);
  --focus-ring-inverse: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--sky-400);
}
/* ============================================================
   Stratus Cloud Solutions — Typography tokens
   Display: Bricolage Grotesque · Body: Hanken Grotesk
   Mono (data, eyebrows, code): Spline Sans Mono
   ============================================================ */
:root {
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;

  /* ---------- Size scale (marketing-web, 16px base) ---------- */
  --text-xs: 0.8125rem; /* 13px — fine print, table meta     */
  --text-sm: 0.9063rem; /* 14.5px — captions, UI labels      */
  --text-base: 1rem; /* 16px — dense body                 */
  --text-md: 1.0938rem; /* 17.5px — default marketing body   */
  --text-lg: 1.25rem; /* 20px — lede, card titles          */
  --text-xl: 1.4375rem; /* 23px — subsection heads           */
  --text-2xl: 1.75rem; /* 28px — H3                         */
  --text-3xl: 2.25rem; /* 36px — H2                         */
  --text-4xl: 2.875rem; /* 46px — page titles                */
  --text-5xl: 3.75rem; /* 60px — hero                       */
  --text-6xl: 4.75rem; /* 76px — oversized hero (home only) */

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

  /* ---------- Line heights ---------- */
  --leading-display: 1.04; /* hero / H1                        */
  --leading-heading: 1.15; /* H2–H4                            */
  --leading-body: 1.6;
  --leading-tight: 1.4; /* UI strings, captions             */

  /* ---------- Tracking ---------- */
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.13em; /* uppercase mono eyebrows       */
}
/* ============================================================
   Stratus Cloud Solutions — Spacing, radii, depth, layout
   Depth metaphor: "altitude" — four elevation stops, ink-tinted.
   ============================================================ */
:root {
  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.5rem; /* 24px */
  --space-6: 2rem; /* 32px */
  --space-7: 2.5rem; /* 40px */
  --space-8: 3rem; /* 48px */
  --space-9: 4rem; /* 64px */
  --space-10: 5rem; /* 80px */
  --space-11: 6.5rem; /* 104px — section padding            */
  --space-12: 8rem; /* 128px — hero padding               */

  /* ---------- Radii ---------- */
  --radius-xs: 4px; /* checkboxes, tiny chips             */
  --radius-sm: 6px; /* inputs, small buttons              */
  --radius-md: 10px; /* buttons, tags                      */
  --radius-lg: 14px; /* cards                              */
  --radius-xl: 20px; /* feature panels, screenshots        */
  --radius-2xl: 28px; /* hero frames, section insets        */
  --radius-pill: 999px;

  /* ---------- Altitude (shadows, ink-tinted) ---------- */
  --shadow-ground: 0 1px 2px rgba(16, 32, 54, 0.06);
  --shadow-raised: 0 1px 2px rgba(16, 32, 54, 0.05), 0 4px 12px -2px rgba(16, 32, 54, 0.08);
  --shadow-floating: 0 2px 4px rgba(16, 32, 54, 0.05), 0 12px 32px -8px rgba(16, 32, 54, 0.14);
  --shadow-overlay: 0 4px 8px rgba(16, 32, 54, 0.06), 0 24px 64px -12px rgba(16, 32, 54, 0.22);
  /* Accent glow for primary CTAs on hover */
  --shadow-cta: 0 4px 16px -4px rgba(35, 104, 196, 0.45);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-wide: 1320px;
  --container-pad: 32px;
  --nav-height: 72px;
}
/* ============================================================
   Stratus Cloud Solutions — Motion tokens
   The site is motion-ready scaffolding: every transition and
   future entrance/scroll animation draws from these tokens.
   Rules:
   - Animate ONLY compositor-friendly properties:
     transform, opacity, clip-path (filter sparingly).
   - Entrances "rise through altitude": translateY(var(--rise))
     + fade, eased with --ease-out-soft.
   - Help Tips surfaces may use --ease-lift (gentle overshoot);
     corporate + Data Cleanser stay on --ease-out-soft.
   - Mark animatable elements with data-animate="<name>" so the
     future animation layer can target them without refactoring.
   - Always respect prefers-reduced-motion.
   ============================================================ */
:root {
  /* ---------- Durations ---------- */
  --dur-1: 120ms; /* @kind other */ /* micro: press, toggle, icon nudge        */
  --dur-2: 200ms; /* @kind other */ /* hover, focus, color/elevation change    */
  --dur-3: 320ms; /* @kind other */ /* state: tabs, accordion, dialog          */
  --dur-4: 560ms; /* @kind other */ /* entrance / scroll-reveal                */
  --dur-5: 900ms; /* @kind other */ /* hero choreography, large diagrams       */

  /* ---------- Easings ---------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ /* default; decisive arrive */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ /* moves within view        */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ /* leave quickly            */
  --ease-lift: cubic-bezier(
    0.34,
    1.3,
    0.64,
    1
  ); /* @kind other */ /* gentle overshoot — Help Tips warmth, micro-delight */

  /* ---------- Choreography ---------- */
  --stagger-1: 60ms; /* @kind other */ /* list items, card grids              */
  --stagger-2: 90ms; /* @kind other */ /* larger blocks, hero elements        */
  --rise: 16px; /* @kind other */ /* standard entrance translateY        */
  --rise-lg: 28px; /* @kind other */ /* hero / large panel entrance         */

  /* ---------- Canonical transitions ---------- */
  /* Explicit property list (not `all`) so the compositor only tracks what we
     actually animate on hover — avoids style-recalc weight on layout props. */
  --transition-hover:
    background-color var(--dur-2) var(--ease-out-soft), border-color var(--dur-2) var(--ease-out-soft),
    color var(--dur-2) var(--ease-out-soft), box-shadow var(--dur-2) var(--ease-out-soft),
    transform var(--dur-2) var(--ease-out-soft), opacity var(--dur-2) var(--ease-out-soft);
  --transition-press: transform var(--dur-1) var(--ease-out-soft);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms; /* @kind other */
    --dur-2: 1ms; /* @kind other */
    --dur-3: 1ms; /* @kind other */
    --dur-4: 1ms; /* @kind other */
    --dur-5: 1ms; /* @kind other */
    --rise: 0px; /* @kind other */
    --rise-lg: 0px; /* @kind other */
  }
}
/* ============================================================
   Stratus Cloud Solutions — Base layer
   Minimal element defaults so every surface inherits the brand.
   ============================================================ */
body {
  font-family: var(--font-body);
  color: var(--text-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--sky-200);
  color: var(--ink-900);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}