/* =========================================================
   SoranoAI — Colors & Type Foundations
   Source: SoranoAI Brand Style Guide PDF
   ========================================================= */

/* ----- Webfont substitute -------------------------------- */
/* Brand spec calls for "Helvetica Neue LT 53 Extended".    */
/* That face is proprietary. We substitute Archivo (Google  */
/* Fonts) for its slightly wide proportions and grotesque   */
/* feel. ⚠ Flag for the brand owner: please ship licensed   */
/* Helvetica Neue 53 Ex woff2 to replace this fallback.     */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,300..900&family=Inter:wght@400..700&display=swap");

:root {
  /* ---------- Brand Colors (primary palette) ------------ */
  --sorano-aqua:      #3FDEDA;   /* MAIN — cyan/teal       */
  --sorano-electric:  #0231FE;   /* deep electric blue     */
  --sorano-azure:     #036EFD;   /* mid azure              */
  --sorano-magenta:   #DB52FB;   /* hot magenta            */
  --sorano-ink:       #231F20;   /* near-black, brand dark */

  /* ---------- Secondary / surface palette --------------- */
  --sorano-mist:      #F8F8F9;   /* Very Light Gray        */
  --sorano-charcoal:  #353436;   /* Dark Charcoal          */
  --sorano-lavender:  #D6D3FF;   /* Pale Lavender          */
  --sorano-sky:       #9CE8FC;   /* Soft Sky Blue          */

  /* ---------- Signature gradient ------------------------ */
  /* The logomark gradient: cyan → azure → magenta.        */
  --sorano-gradient: linear-gradient(
    105deg,
    var(--sorano-aqua)     0%,
    var(--sorano-azure)   45%,
    var(--sorano-electric) 60%,
    var(--sorano-magenta) 100%
  );
  --sorano-gradient-soft: linear-gradient(
    105deg,
    color-mix(in oklab, var(--sorano-aqua) 60%, white) 0%,
    color-mix(in oklab, var(--sorano-magenta) 60%, white) 100%
  );

  /* ---------- Semantic surface & foreground ------------- */
  --bg-1:        var(--sorano-mist);         /* page surface    */
  --bg-2:        #ffffff;                    /* card surface    */
  --bg-inverse:  var(--sorano-ink);          /* dark surface    */
  --bg-tint:     color-mix(in oklab, var(--sorano-aqua) 12%, white);
  --bg-tint-lavender: color-mix(in oklab, var(--sorano-lavender) 65%, white);

  --fg-1:        var(--sorano-ink);          /* primary text    */
  --fg-2:        var(--sorano-charcoal);     /* secondary text  */
  --fg-3:        color-mix(in oklab, var(--sorano-charcoal) 60%, white); /* tertiary */
  --fg-on-dark:  #ffffff;
  --fg-on-brand: #ffffff;
  --fg-link:     var(--sorano-electric);

  --border-1:    color-mix(in oklab, var(--sorano-ink) 12%, transparent);
  --border-2:    color-mix(in oklab, var(--sorano-ink) 22%, transparent);
  --divider:     color-mix(in oklab, var(--sorano-ink) 8%,  transparent);

  /* ---------- Accent / semantic action ------------------ */
  --accent:      var(--sorano-electric);
  --accent-hover: color-mix(in oklab, var(--sorano-electric) 88%, black);
  --accent-soft: color-mix(in oklab, var(--sorano-electric) 12%, white);
  --focus-ring:  color-mix(in oklab, var(--sorano-electric) 45%, transparent);

  /* ---------- Type families ----------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Brand wants the *wide* axis. Archivo's variable wdth   */
  /* axis goes 100→125; we anchor display copy at 115.      */
  --wdth-display: 115;
  --wdth-body:    100;

  /* ---------- Type scale (modular, 1.250 major-third) --- */
  --fs-12: 0.75rem;     /* 12 */
  --fs-14: 0.875rem;    /* 14 */
  --fs-16: 1rem;        /* 16 — body base */
  --fs-18: 1.125rem;    /* 18 */
  --fs-20: 1.25rem;     /* 20 */
  --fs-24: 1.5rem;      /* 24 */
  --fs-32: 2rem;        /* 32 */
  --fs-40: 2.5rem;      /* 40 */
  --fs-56: 3.5rem;      /* 56 */
  --fs-72: 4.5rem;      /* 72 */
  --fs-96: 6rem;        /* 96 — hero */

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

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

  /* ---------- Radii ------------------------------------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ---------- Shadows ----------------------------------- */
  --shadow-1: 0 1px 2px rgba(35,31,32,.06), 0 1px 1px rgba(35,31,32,.04);
  --shadow-2: 0 6px 16px rgba(35,31,32,.08), 0 2px 4px rgba(35,31,32,.04);
  --shadow-3: 0 20px 48px rgba(35,31,32,.12), 0 6px 12px rgba(35,31,32,.06);
  --shadow-glow: 0 12px 40px color-mix(in oklab, var(--sorano-azure) 35%, transparent);

  /* ---------- Motion ------------------------------------ */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in:  cubic-bezier(.4,0,.7,.2);
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* =========================================================
   Semantic type roles
   ========================================================= */
.s-hero,
.s-h1,
.s-h2,
.s-h3,
.s-h4,
.s-h5,
.s-display-eyebrow {
  font-family: var(--font-display);
  font-stretch: 115%;
  font-variation-settings: "wdth" 115;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.s-hero {
  font-size: clamp(3rem, 6vw + 1rem, var(--fs-96));
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.s-h1 {
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.s-h2 {
  font-size: var(--fs-56);
  line-height: var(--lh-snug);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.s-h3 {
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.s-h4 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.s-h5 {
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  font-weight: 600;
}

.s-display-eyebrow {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variation-settings: "wdth" 125;
  color: var(--fg-2);
}

.s-body-lg,
.s-body,
.s-body-sm,
.s-caption,
.s-mono {
  font-family: var(--font-body);
  color: var(--fg-1);
  font-variation-settings: "wdth" 100;
}

.s-body-lg  { font-size: var(--fs-20); line-height: var(--lh-base);  font-weight: 400; }
.s-body     { font-size: var(--fs-16); line-height: var(--lh-base);  font-weight: 400; }
.s-body-sm  { font-size: var(--fs-14); line-height: var(--lh-base);  font-weight: 400; color: var(--fg-2); }
.s-caption  { font-size: var(--fs-12); line-height: var(--lh-snug);  font-weight: 500; color: var(--fg-3); letter-spacing: 0.02em; }

.s-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  letter-spacing: 0;
}

/* =========================================================
   Body baseline
   ========================================================= */
html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}