/* =========================================================
   Spring Days — Colors & Type
   A playful, spring-themed VPN brand. Light, airy, fresh.
   ========================================================= */

/* ---------- Fonts ----------
   Primary wordmark reads as a friendly humanist rounded sans.
   On web we use Nunito (Google Fonts) — warm, rounded, highly legible in
   Cyrillic + Latin. Fallback: system humanist sans.
   For long-form Cyrillic copy, Inter is the secondary workhorse.
*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand colors (raw) ---------- */
  --sd-green-50:  #ecf7ee;
  --sd-green-100: #d6eedc;
  --sd-green-300: #7ec68e;
  --sd-green-500: #30a050;   /* "Spring" — primary green */
  --sd-green-600: #209050;
  --sd-green-700: #157a3e;

  --sd-lime-400:  #a0d050;   /* accent lime (leaves) */
  --sd-lime-500:  #86c23d;

  --sd-sky-50:    #ecf5fe;
  --sd-sky-100:   #daeefe;   /* signature pale-sky background */
  --sd-sky-200:   #bfdff9;
  --sd-sky-300:   #80d0f0;
  --sd-sky-400:   #50c0e0;   /* bright primary sky */
  --sd-sky-500:   #2090b0;
  --sd-sky-600:   #0e8cb1;   /* "Days" — deep teal-blue */
  --sd-sky-700:   #107090;
  --sd-sky-800:   #0a526a;

  --sd-sun-400:   #f0d050;   /* sunflower yellow */
  --sd-sun-300:   #ffe27a;

  --sd-pink-300:  #f090a0;   /* cherry-blossom pink */
  --sd-pink-200:  #ffc5cf;

  /* ---------- Neutrals ---------- */
  --sd-white:     #ffffff;
  --sd-paper:     #fafdff;
  --sd-ink-50:    #f1f5f9;
  --sd-ink-100:   #e4ecf2;
  --sd-ink-200:   #cdd9e2;
  --sd-ink-300:   #a8b7c3;
  --sd-ink-400:   #7a8a97;
  --sd-ink-600:   #4a5864;
  --sd-ink-800:   #1f2a34;
  --sd-ink-900:   #0f1720;

  /* ---------- Semantic tokens ---------- */
  --bg:           var(--sd-sky-100);
  --bg-soft:      var(--sd-sky-50);
  --bg-paper:     var(--sd-paper);
  --surface:      var(--sd-white);
  --surface-2:    #f5fbff;

  --fg-1:         var(--sd-ink-900);  /* primary text */
  --fg-2:         var(--sd-ink-600);  /* secondary text */
  --fg-3:         var(--sd-ink-400);  /* tertiary / meta */
  --fg-on-brand:  var(--sd-white);

  --border:       rgba(14,140,177,0.14);
  --border-strong:rgba(14,140,177,0.28);
  --divider:      rgba(14,140,177,0.08);

  --brand:        var(--sd-sky-600);
  --brand-green:  var(--sd-green-500);
  --accent:       var(--sd-sky-400);

  --success:      var(--sd-green-500);
  --warning:      #e8a93a;
  --danger:       #dc5a5a;
  --info:         var(--sd-sky-600);

  /* ---------- Signature gradient (wordmark + CTAs) ---------- */
  --grad-wordmark: linear-gradient(90deg, #30a050 0%, #2bb07a 35%, #33a9c5 65%, #0e8cb1 100%);
  --grad-sky:      linear-gradient(180deg, #ecf5fe 0%, #daeefe 60%, #bfdff9 100%);
  --grad-cta:      linear-gradient(180deg, #3db3d6 0%, #0e8cb1 100%);
  --grad-cta-green:linear-gradient(180deg, #4fc076 0%, #209050 100%);

  /* ---------- Elevation / shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(14,82,106,0.06);
  --shadow-sm: 0 2px 8px rgba(14,82,106,0.08);
  --shadow-md: 0 8px 24px rgba(14,82,106,0.10);
  --shadow-lg: 0 20px 48px rgba(14,82,106,0.14);
  --shadow-glow: 0 10px 30px rgba(14,140,177,0.28);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Radii ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill:999px;

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

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-med:     240ms;
  --dur-slow:    420ms;

  /* ---------- Type families ---------- */
  --font-display: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Nunito', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* =========================================================
   Base type scale — mobile-first, scales up cleanly
   ========================================================= */
html, body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

.sd-h1, h1.sd {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sd-h2, h2.sd {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.sd-h3, h3.sd {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.sd-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sd-sky-600);
}

.sd-lede {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

.sd-body   { font-size: 16px; line-height: 1.6; color: var(--fg-1); }
.sd-small  { font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.sd-micro  { font-size: 12px; line-height: 1.4; color: var(--fg-3); letter-spacing: 0.02em; }
.sd-mono   { font-family: var(--font-mono); font-size: 13px; }

/* ---------- Signature wordmark gradient helper ---------- */
.sd-gradient-text {
  background: var(--grad-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}