/* =========================================================
   SSAI SOFTWARE — Design System tokens
   Colors, Typography, Spacing, Radii, Shadows.
   Source of truth: Figma "SSAI Software design templete.fig"
   ========================================================= */

/* -----------------------  FONTS  ------------------------- */
/* Be Vietnam Pro — headings. Roboto — body. Comico is a
   hand-drawn/script. The closest free Google Font match is
   "Caveat" (handwritten) — flagged as a substitution.       */

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Caveat:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap");

:root {
  /* -----------------  COLOR — RAW PALETTE  ---------------- */
  --ssai-cyan:           #13C1FD;   /* primary brand cyan      */
  --ssai-cyan-deep:      #0665D1;   /* deeper cyan accent      */
  --ssai-lime:           #B4FF5C;   /* lime green accent       */
  --ssai-ink:            #0A0909;   /* near-black brand black  */
  --ssai-black:          #000000;
  --ssai-white:          #FFFFFF;
  --ssai-cream:          #F5F3F3;   /* warm off-white surface  */
  --ssai-stone-200:      #E2E1E1;
  --ssai-stone-300:      #D9D9D9;
  --ssai-stone-400:      #F2F2F2;
  --ssai-graphite:       #4D4E50;   /* secondary text          */
  --ssai-charcoal:       #2F2F2F;
  --ssai-red:            #D6293E;   /* X/error                 */

  /* gradient swatches used by the logo */
  --ssai-logo-blue-start: #0E58CF;
  --ssai-logo-blue-end:   #13C1FD;

  /* -----------------  COLOR — SEMANTIC  ------------------- */
  --bg:                  var(--ssai-white);
  --bg-cream:            var(--ssai-cream);
  --bg-cyan:             var(--ssai-cyan);
  --bg-dark:             var(--ssai-ink);
  --fg:                  var(--ssai-ink);
  --fg-on-dark:          var(--ssai-white);
  --fg-on-cyan:          var(--ssai-ink);
  --fg-muted:            var(--ssai-graphite);
  --accent:              var(--ssai-cyan);
  --accent-secondary:    var(--ssai-lime);
  --border:              rgba(10,9,9,0.12);
  --border-strong:       var(--ssai-ink);
  --danger:              var(--ssai-red);

  /* -----------------  TYPOGRAPHY — RAW  ------------------- */
  --font-display:        "Be Vietnam Pro", system-ui, sans-serif;
  --font-body:           "Roboto", system-ui, sans-serif;
  --font-script:         "Caveat", "Comico", cursive;   /* substituted */
  --font-meta:           "Poppins", system-ui, sans-serif;

  /* sizes scaled from the Figma type ramp                     */
  --fs-eyebrow:          16px;
  --fs-body-sm:          14px;
  --fs-body:             16px;
  --fs-body-lg:          18px;
  --fs-h6:               24px;
  --fs-h5:               30px;
  --fs-h4:               36px;
  --fs-h3:               48px;
  --fs-h2:               64px;
  --fs-h1:               76px;

  --lh-tight:            1.0;
  --lh-snug:             1.1;
  --lh-display:          1.05;
  --lh-body:             1.3;
  --lh-prose:            1.5;

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

  /* -----------------  RADII  ------------------------------ */
  --radius-xs:           3px;   /* small CTAs                  */
  --radius-sm:           5px;   /* cards, inputs               */
  --radius-md:           10px;
  --radius-lg:           20px;  /* feature blocks              */
  --radius-pill:         999px;

  /* -----------------  SHADOWS / ELEVATION  ---------------- */
  --shadow-sm:           0 1px 2px rgba(10,9,9,0.06);
  --shadow-md:           0 6px 18px rgba(10,9,9,0.08);
  --shadow-lg:           0 18px 40px rgba(10,9,9,0.12);
  --shadow-card-dark:    0 12px 36px rgba(10,9,9,0.25);

  /* -----------------  MOTION  ----------------------------- */
  --ease-out:            cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:         cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:            160ms;
  --dur-base:            260ms;
  --dur-slow:            500ms;
}

/* -----------------  SEMANTIC TYPE STYLES  ----------------- */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ssai-h1, .ssai-h2, .ssai-h3, .ssai-h4, .ssai-h5, .ssai-h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
.ssai-h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; }
.ssai-h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.02em; }
.ssai-h3 { font-size: var(--fs-h3); line-height: 1.15; }
.ssai-h4 { font-size: var(--fs-h4); }
.ssai-h5 { font-size: var(--fs-h5); }
.ssai-h6 { font-size: var(--fs-h6); }

.ssai-eyebrow {
  font-family: var(--font-script);
  font-size: 22px;            /* Caveat is smaller-x-height than Comico, bump */
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg);
  text-transform: uppercase;
  line-height: 1;
}

.ssai-body  { font-family: var(--font-body); font-size: var(--fs-body);    line-height: var(--lh-prose); color: var(--fg); }
.ssai-lead  { font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-prose); color: var(--fg); }
.ssai-small { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: var(--lh-body);  color: var(--fg-muted); }
.ssai-meta  { font-family: var(--font-meta); font-size: var(--fs-body-lg); line-height: 1;              color: var(--fg-on-dark); }