/* ============================================================
   Vilow — Colors & Type
   Source: 2025_09_26_Vilow_CD_Stylesheet_1.pdf
   ============================================================ */

/* -- Webfonts ----------------------------------------------- */
/* Brand spec calls for "New Atten Round" (Medium Italic for
   headlines, Regular for body). New Atten Round is a paid
   typeface and was NOT supplied with the brand kit, so we use
   the brand-approved online alternative: Varela Round.
   Body fallback per the brand book is system Calibri.

   The font file is bundled locally at fonts/VarelaRound-Regular.ttf.
   Varela Round ships with only one weight (400). Italic is
   synthesized by the browser (font-style: italic) since the
   brand spec uses italic headlines and Varela Round has no
   native italic. New Atten Round Medium Italic is the canonical
   face once licensed.                                          */

@font-face {
  font-family: 'Varela Round';
  src: url('fonts/VarelaRound-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -- Brand colors (RGB / HEX from stylesheet) ------------- */
  --vilow-blueberry:   #7253f3;  /* Primary */
  --vilow-ice:         #00cbe5;
  --vilow-pink:        #ff6bf2;
  --vilow-orange:      #ff691d;
  --vilow-black:       #000000;
  --vilow-white:       #ffffff;

  /* -- Tinted neutrals (derived) ---------------------------- */
  --vilow-ink:         #0b0a1a;  /* near-black with violet bias */
  --vilow-ink-2:       #1a1730;
  --vilow-mist:        #f6f4ff;  /* off-white, faint violet */
  --vilow-fog:         #e8e4f7;
  --vilow-stone:       #8a86a8;
  --vilow-line:        rgba(11, 10, 26, 0.08);
  --vilow-line-strong: rgba(11, 10, 26, 0.14);

  /* -- Foreground / surface tokens -------------------------- */
  --fg-1: var(--vilow-ink);
  --fg-2: #423e5e;
  --fg-3: var(--vilow-stone);
  --fg-inverse: var(--vilow-white);
  --bg-1: var(--vilow-white);
  --bg-2: var(--vilow-mist);
  --bg-3: var(--vilow-fog);
  --bg-inverse: var(--vilow-ink);

  /* -- Brand gradients -------------------------------------- */
  /* Order: cyan → blueberry → pink → orange. Used at varied
     angles on hero surfaces, buttons, accents, and the
     keyvisual.                                                */
  --vilow-gradient: linear-gradient(
    115deg,
    #00cbe5 0%,
    #7253f3 38%,
    #ff6bf2 70%,
    #ff691d 100%
  );
  --vilow-gradient-soft: linear-gradient(
    115deg,
    #00cbe533 0%,
    #7253f333 38%,
    #ff6bf233 70%,
    #ff691d33 100%
  );
  --vilow-gradient-radial: radial-gradient(
    ellipse at 30% 30%,
    #00cbe5 0%,
    #7253f3 45%,
    #ff6bf2 75%,
    #ff691d 100%
  );

  /* -- Type --------------------------------------------------*/
  --font-display: 'Varela Round', 'New Atten Round', 'Nunito',
                  system-ui, sans-serif;
  --font-body:    'Varela Round', 'New Atten Round', 'Calibri',
                  system-ui, sans-serif;

  /* fluid display sizes, headlines are italic medium */
  --fs-display:   clamp(56px, 7vw, 112px);
  --fs-h1:        clamp(40px, 4.4vw, 64px);
  --fs-h2:        clamp(28px, 2.6vw, 40px);
  --fs-h3:        22px;
  --fs-eyebrow:   13px;
  --fs-body:      17px;
  --fs-small:     14px;
  --fs-micro:     12px;

  --lh-display:   0.96;
  --lh-heading:   1.06;
  --lh-body:      1.55;

  /* the brand uses Italic for emphasis on headlines */
  --display-style: italic;

  /* -- Radii (everything is rounded — no hard edges) -------- */
  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --r-4: 32px;
  --r-pill: 999px;

  /* -- Spacing scale (4px base) ----------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* -- Shadows ---------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(11,10,26,0.06),
              0 1px 3px rgba(11,10,26,0.04);
  --shadow-2: 0 6px 14px rgba(11,10,26,0.06),
              0 2px 6px rgba(11,10,26,0.04);
  --shadow-3: 0 18px 40px rgba(11,10,26,0.08),
              0 4px 12px rgba(11,10,26,0.05);
  --shadow-glow: 0 18px 60px rgba(114, 83, 243, 0.35);

  /* -- Motion ----------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* swift, decisive */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ============================================================
   Semantic typography
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg-1); }
body { font-size: var(--fs-body); line-height: var(--lh-body); }

.display,
.h0 {
  font-family: var(--font-display);
  font-style: var(--display-style);
  font-weight: 400;          /* Varela Round only has 400 */
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
}

h1, .h1 {
  font-family: var(--font-display);
  font-style: var(--display-style);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: -0.012em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-style: var(--display-style);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.008em;
}

h3, .h3 {
  font-family: var(--font-display);
  font-style: normal;        /* h3 drops the italic */
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

p, .body { font-size: var(--fs-body); line-height: var(--lh-body); }
.small   { font-size: var(--fs-small); }
.micro   { font-size: var(--fs-micro); }

.claim {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-body);
}

/* ============================================================
   Gradient text helper
   ============================================================ */
.text-gradient {
  background: var(--vilow-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}