/* ============================================================
   STUDIO DESIGN SYSTEM — Foundations
   Colors + Typography tokens, extracted from the brand reference
   ("Пример фирменного стиля" — Fourmula landing).
   Reference type was SF Pro Display; brand font is Manrope
   (uploaded by the client, self-hosted below).
   ============================================================ */

/* ----------  FONT FACES  (Manrope, self-hosted)  ---------- */
@font-face {
  font-family: "Manrope";
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Manrope-Thin.woff") format("woff");
}
@font-face {
  font-family: "Manrope";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Manrope-Light.woff") format("woff");
}
@font-face {
  font-family: "Manrope";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Manrope-Regular.woff") format("woff");
}
@font-face {
  font-family: "Manrope";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Manrope-Medium.woff") format("woff");
}
@font-face {
  font-family: "Manrope";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Manrope-Semibold.woff") format("woff");
}
@font-face {
  font-family: "Manrope";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Manrope-Bold.woff") format("woff");
}
@font-face {
  font-family: "Manrope";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Manrope-ExtraBold.woff") format("woff");
}

:root {
  /* ----------  CORE PALETTE  ---------- */
  --ink:        #020108;   /* near-black — primary text, fills, the brand's "black" */
  --ink-90:     rgba(2, 1, 8, 0.90);
  --ink-60:     rgba(2, 1, 8, 0.60);   /* secondary text */
  --ink-40:     rgba(2, 1, 8, 0.40);   /* tertiary / muted text, placeholders */
  --ink-12:     rgba(2, 1, 8, 0.12);
  --black:      #000000;
  --white:      #ffffff;
  --white-50:   rgba(255, 255, 255, 0.50);  /* muted text on dark / gradient */
  --white-20:   rgba(255, 255, 255, 0.20);  /* hairlines on dark */

  /* ----------  NEUTRALS  ---------- */
  --surface:    #ffffff;   /* default page background */
  --surface-2:  #f7f7f7;   /* subtle panel / inset background */
  --surface-3:  #efefef;
  --line:       #d7d7d6;   /* the signature 1px grid hairline */
  --line-soft:  #e7e7e6;

  /* ----------  BRAND ORANGE  ---------- */
  --orange:        #fd7b03;  /* primary accent */
  --orange-bright: #fc7303;
  --orange-deep:   #f94a00;  /* pressed / deep accent, gradient stop */
  --orange-tint:   #fff1e4;  /* faint orange wash */

  /* ----------  EXTENDED SPECTRUM (step-gradient stops)  ---------- */
  --spectrum-red:    #9a0101;
  --spectrum-orange: #fd7b03;
  --spectrum-blue:   #48a3d1;
  --spectrum-indigo: #3a54ff;
  --spectrum-violet: #7a67c5;

  /* The hero "four steps" gradient — orange → blue → violet → orange */
  --gradient-steps: linear-gradient(180deg, #f94a00 0%, #fd7b03 22%, #48a3d1 50%, #7a67c5 72%, #f94a00 100%); /* @kind color */
  --gradient-warm:  linear-gradient(135deg, #fd7b03 0%, #f94a00 100%); /* @kind color */

  /* ----------  SEMANTIC ROLES  ---------- */
  --text:        var(--ink);
  --text-muted:  var(--ink-60);
  --text-subtle: var(--ink-40);
  --accent:      var(--orange);
  --accent-press:var(--orange-deep);
  --border:      var(--line);

  /* ----------  TYPE FAMILIES  ---------- */
  --font-display: "Manrope", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans:    "Manrope", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Manrope", ui-monospace, "SFMono-Regular", "Menlo", monospace;

  /* ----------  TYPE SCALE  (px reference / fluid)  ----------
     The reference deck is built at 1920w; display ran ~133px.
     These fluid clamps keep the same proportion across viewports. */
  --fs-display:  clamp(56px, 7vw, 133px);   /* @kind font */ /* hero headline */
  --fs-h1:       clamp(40px, 5vw, 84px);    /* @kind font */
  --fs-h2:       clamp(32px, 3.4vw, 58px);  /* @kind font */
  --fs-h3:       clamp(24px, 2vw, 36px);    /* @kind font */
  --fs-title:    clamp(20px, 1.6vw, 27px);  /* @kind font */ /* card / feature titles */
  --fs-lead:     clamp(18px, 1.3vw, 22px);  /* @kind font */ /* lead paragraph */
  --fs-body:     19px;                       /* @kind font */ /* default body */
  --fs-label:    20px;                       /* @kind font */ /* rail / section labels */
  --fs-small:    15.6px;                     /* @kind font */ /* meta, captions */
  --fs-micro:    13px;                       /* @kind font */

  --lh-display:  0.99;  /* @kind font */
  --lh-tight:    1.05;  /* @kind font */
  --lh-snug:     1.18;  /* @kind font */
  --lh-body:     1.5;   /* @kind font */

  /* Optical letter-spacing — the reference tightens large type hard */
  --ls-display:  -0.03em;   /* @kind font */
  --ls-h:        -0.022em;  /* @kind font */
  --ls-title:    -0.012em;  /* @kind font */
  --ls-body:     -0.006em;  /* @kind font */
  --ls-label:    0;         /* @kind font */

  /* ----------  RADII  ---------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ----------  SPACING  (8px base, 35.577px = the rail gutter)  ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-gutter: 36px;   /* the canonical section padding (35.577px) */
  --sp-8:  48px;
  --sp-10: 64px;
  --sp-12: 96px;
  --sp-section: 178px; /* the big vertical section rhythm (177.885px) */

  /* ----------  ELEVATION  ---------- */
  --shadow-sm: 0 1px 2px rgba(2, 1, 8, 0.05);
  --shadow-md: 0 8px 24px rgba(2, 1, 8, 0.08);
  --shadow-lg: 0 24px 60px rgba(2, 1, 8, 0.12);
  --shadow-card: 0 10px 40px rgba(2, 1, 8, 0.10);

  /* ----------  MOTION  ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:   140ms;   /* @kind other */
  --dur-mid:    260ms;   /* @kind other */
  --dur-slow:   500ms;   /* @kind other */
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */
.ds-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text);
  text-wrap: balance;
}
.ds-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h);
  color: var(--text);
  text-wrap: balance;
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h);
  color: var(--text);
  text-wrap: balance;
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  color: var(--text);
}
.ds-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-title);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-title);
  color: var(--text);
}
.ds-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-muted);
}
.ds-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text);
}
.ds-small {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.5;
  letter-spacing: var(--ls-body);
  color: var(--text-muted);
}
/* Rail / eyebrow label — uppercase optional, sits in the left grid column */
.ds-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1.5;
  letter-spacing: var(--ls-label);
  color: var(--text);
}
.ds-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-micro);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.ds-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: 0;
  color: var(--text);
}