/* SquareOps design system tokens — generated from the Claude Design project
   (design system 885b659c). Do not edit by hand; re-run the v4 import. */
/* ============================================================
   SquareOps Design System — Foundations
   Colors + Type (single source of truth)
   ============================================================
   Sourced from:
   - uploads/COLOR_PALETTE.md (brand-approved palette)
   - squareops-new-website (styles.css, shared-components.css, homepage-alt2.css)
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     COLOR — Brand
     The logo is built from two colors: a deep navy and a
     teal-green. Most surfaces use one of these as ink or
     background; the teal-green appears as accent.
     --------------------------------------------------------- */
  --so-teal:          #17c799;  /* primary accent — logo teal */
  --so-teal-light:    #6cddbe;  /* hover, light highlights    */
  --so-teal-soft:     #d8f3ea;  /* tinted backgrounds         */
  --so-navy:          #05334B;  /* logo navy, deep ink        */
  --so-navy-2:        #0a2f3f;  /* slightly warmer navy       */

  /* Production codebase uses a softer teal alongside the
     logo green. Kept as alternates for parity. */
  --so-teal-alt:      #38B597;
  --so-green-alt:     #00d084;

  /* ---------------------------------------------------------
     COLOR — Gradient (social posts + hero banners)
     Diagonal: dark top-left → bright bottom-right.
     --------------------------------------------------------- */
  --so-grad-1:        #0f4f3d;  /* dark corner   */
  --so-grad-2:        #1a7a5e;  /* mid           */
  --so-grad-3:        #2d9b73;  /* bright        */
  --so-grad-4:        #3aaa82;  /* highlight     */

  --so-gradient-brand:
      linear-gradient(135deg,
        var(--so-grad-1) 0%,
        var(--so-grad-2) 35%,
        var(--so-grad-3) 70%,
        var(--so-grad-4) 100%);

  --so-gradient-navy:
      linear-gradient(135deg, var(--so-navy) 0%, #1a1f36 100%);

  --so-gradient-accent:
      linear-gradient(90deg, var(--so-teal-alt) 0%, var(--so-navy) 100%);

  --so-gradient-soft:
      linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%); /* @kind color */

  /* ---------------------------------------------------------
     COLOR — Neutrals
     --------------------------------------------------------- */
  --so-white:         #ffffff;
  --so-cream:         #f8fafc;
  --so-bg:            #ffffff;
  --so-bg-soft:       #F9FAFB;
  --so-bg-muted:      #f1f5f4;
  --so-border:        #E5E7EB;
  --so-border-soft:   rgba(5, 51, 75, 0.10);
  --so-divider:       rgba(5, 51, 75, 0.08);

  /* ---------------------------------------------------------
     COLOR — Text
     Dark text on light surfaces. Use the "on-dark" tokens
     when sitting on navy/gradient.
     --------------------------------------------------------- */
  --so-fg:            #1A1F36;  /* primary body text         */
  --so-fg-2:          #6B7280;  /* secondary / muted         */
  --so-fg-3:          #9CA3AF;  /* placeholders / fine print */
  --so-fg-ink:        var(--so-navy); /* heavy ink for hero  */

  --so-on-dark-fg:    #ffffff;
  --so-on-dark-fg-2:  #d4ede4;  /* body text on green        */
  --so-on-dark-fg-3:  #a0c9b8;  /* muted text on green       */

  /* ---------------------------------------------------------
     COLOR — Semantic
     --------------------------------------------------------- */
  --so-success:       #00D084;
  --so-success-soft:  #ECFDF5;
  --so-warning:       #F59E0B;
  --so-warning-soft:  #FEF3C7;
  --so-danger:        #EF4444;
  --so-danger-soft:   #FEE2E2;
  --so-info:          #3B82F6;
  --so-info-soft:     #DBEAFE;

  /* AWS / cloud-vendor accents (used on partner badges) */
  --so-aws:           #FF9900;
  --so-azure:         #0078D4;
  --so-gcp:           #4285F4;

  /* ---------------------------------------------------------
     TYPE — Families
     - Inter:        UI + body (codebase default)
     - Space Grotesk: Display headings (codebase default)
     - Poppins:      Brand graphics / social posts only
     - JetBrains:    Code, CLI, terminal output
     --------------------------------------------------------- */
  --so-font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --so-font-display:  "Space Grotesk", var(--so-font-sans);
  --so-font-brand:    "Poppins", var(--so-font-sans); /* for marketing creative */
  --so-font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------------------------------------------------------
     TYPE — Scale (px, with line-heights and weights)
     --------------------------------------------------------- */
  --so-h1-size: 56px;  --so-h1-lh: 1.10 /* @kind font */; --so-h1-weight: 700; --so-h1-track: -0.02em;
  --so-h2-size: 38px;  --so-h2-lh: 1.18 /* @kind font */; --so-h2-weight: 700; --so-h2-track: -0.015em;
  --so-h3-size: 26px;  --so-h3-lh: 1.30 /* @kind font */; --so-h3-weight: 600; --so-h3-track: -0.01em;
  --so-h4-size: 20px;  --so-h4-lh: 1.35 /* @kind font */; --so-h4-weight: 600; --so-h4-track: -0.005em;
  --so-eyebrow-size: 13px; --so-eyebrow-track: 0.08em;

  --so-body-lg-size: 18px; --so-body-lg-lh: 1.7 /* @kind font */;
  --so-body-size:    16px; --so-body-lh:    1.6 /* @kind font */;
  --so-body-sm-size: 14px; --so-body-sm-lh: 1.6 /* @kind font */;
  --so-caption-size: 12px; --so-caption-lh: 1.5 /* @kind font */;

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

  /* ---------------------------------------------------------
     RADII
     Cards: 12–18px. Pills: 999px. Inputs: 8–12px.
     --------------------------------------------------------- */
  --so-radius-xs:  4px;
  --so-radius-sm:  8px;
  --so-radius-md:  12px;
  --so-radius-lg:  16px;
  --so-radius-xl:  18px;
  --so-radius-2xl: 24px;
  --so-radius-pill: 999px;

  /* ---------------------------------------------------------
     ELEVATION — soft, navy-tinted shadows
     --------------------------------------------------------- */
  --so-shadow-sm:  0 1px 2px 0 rgba(5,51,75,0.05);
  --so-shadow-md:  0 4px 6px -1px rgba(5,51,75,0.10), 0 2px 4px -2px rgba(5,51,75,0.06);
  --so-shadow-lg:  0 10px 15px -3px rgba(5,51,75,0.10), 0 4px 6px -4px rgba(5,51,75,0.06);
  --so-shadow-xl:  0 20px 25px -5px rgba(5,51,75,0.10), 0 8px 10px -6px rgba(5,51,75,0.04);
  --so-shadow-2xl: 0 24px 70px rgba(5,51,75,0.12);
  --so-shadow-glow: 0 14px 40px rgba(56,181,151,0.22);

  /* ---------------------------------------------------------
     MOTION — easing + durations
     --------------------------------------------------------- */
  --so-ease-out:   cubic-bezier(0.23, 1, 0.32, 1); /* @kind other */
  --so-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --so-dur-fast:   150ms; /* @kind other */
  --so-dur-base:   250ms; /* @kind other */
  --so-dur-slow:   400ms; /* @kind other */
  --so-dur-xslow:  600ms; /* @kind other */

  /* ---------------------------------------------------------
     LAYOUT
     --------------------------------------------------------- */
  --so-container:   1200px;
  --so-section-py:  100px;
  --so-section-py-sm: 60px;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   Apply to real text. These are the "use these" classes.
   ============================================================ */

.so-h1, h1.so {
  font-family: var(--so-font-display);
  font-size: var(--so-h1-size);
  line-height: var(--so-h1-lh);
  font-weight: var(--so-h1-weight);
  letter-spacing: var(--so-h1-track);
  color: var(--so-fg);
}

.so-h2, h2.so {
  font-family: var(--so-font-display);
  font-size: var(--so-h2-size);
  line-height: var(--so-h2-lh);
  font-weight: var(--so-h2-weight);
  letter-spacing: var(--so-h2-track);
  color: var(--so-fg);
}

.so-h3, h3.so {
  font-family: var(--so-font-display);
  font-size: var(--so-h3-size);
  line-height: var(--so-h3-lh);
  font-weight: var(--so-h3-weight);
  letter-spacing: var(--so-h3-track);
  color: var(--so-fg);
}

.so-h4, h4.so {
  font-family: var(--so-font-display);
  font-size: var(--so-h4-size);
  line-height: var(--so-h4-lh);
  font-weight: var(--so-h4-weight);
  color: var(--so-fg);
}

.so-eyebrow {
  font-family: var(--so-font-sans);
  font-size: var(--so-eyebrow-size);
  letter-spacing: var(--so-eyebrow-track);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--so-teal);
}

.so-body-lg {
  font-family: var(--so-font-sans);
  font-size: var(--so-body-lg-size);
  line-height: var(--so-body-lg-lh);
  color: var(--so-fg-2);
}

.so-body, p.so {
  font-family: var(--so-font-sans);
  font-size: var(--so-body-size);
  line-height: var(--so-body-lh);
  color: var(--so-fg);
}

.so-body-sm {
  font-family: var(--so-font-sans);
  font-size: var(--so-body-sm-size);
  line-height: var(--so-body-sm-lh);
  color: var(--so-fg-2);
}

.so-caption {
  font-family: var(--so-font-sans);
  font-size: var(--so-caption-size);
  line-height: var(--so-caption-lh);
  color: var(--so-fg-3);
}

.so-mono, code.so {
  font-family: var(--so-font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--so-navy);
}

/* Accent text shown on navy/gradient backgrounds */
.so-on-dark { color: var(--so-on-dark-fg); }
.so-on-dark .so-body-sm,
.so-on-dark p { color: var(--so-on-dark-fg-2); }
.so-on-dark .so-caption { color: var(--so-on-dark-fg-3); }

/* Brand text gradient — used on hero headlines */
.so-gradient-text {
  background: var(--so-gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Base reset from the design system UI kit (ui_kits/website/site.css), scoped
   to v4 pages so the rest of the site is untouched. */
body.v4-page *, body.v4-page *::before, body.v4-page *::after { box-sizing: border-box; }
body.v4-page { -webkit-font-smoothing: antialiased; line-height: 1.6; }
body.v4-page img { max-width: 100%; }