/* ============================================================
   HELIX PRO — Colors & Typography Tokens
   Бренд: производитель винтовых свай и монтаж фундаментов.
   Промышленная эстетика: высокий контраст, плотная типографика,
   красный акцент на тёмных и нейтральных поверхностях.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/Rubik-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============== COLORS ============== */

  /* Brand red — двухтоновый, как в логотипе */
  --color-primary:        #E3421F;  /* Helix Red — основной CTA, бренд */
  --color-primary-hover:  #FF5630;  /* hover, чуть светлее */
  --color-primary-active: #C7351A;  /* нажатие */
  --color-primary-deep:   #A62617;  /* теневая грань логотипа, акценты */
  --color-primary-pale:   #FEE8E2;  /* фон бейджей/уведомлений */

  /* Ink — тёмные поверхности */
  --color-ink:            #0A0A0A;  /* фон фирменный, как в лого */
  --color-ink-soft:       #161616;  /* секции, второй уровень */
  --color-ink-2:          #232323;  /* карточки на чёрном */
  --color-ink-3:          #2E2E2E;  /* бордеры/разделители на чёрном */

  /* Canvas — светлые поверхности */
  --color-canvas:         #FFFFFF;
  --color-canvas-soft:    #F5F5F4;  /* секция, серая бумага */
  --color-canvas-2:       #EDEDEC;  /* карточки/инпуты на светлом */

  /* Text */
  --color-fg-1:           #0A0A0A;  /* основной текст на светлом */
  --color-fg-2:           #4A4A4A;  /* вторичный */
  --color-fg-3:           #7A7A7A;  /* подписи, мута */
  --color-fg-on-dark-1:   #FFFFFF;
  --color-fg-on-dark-2:   #B5B5B5;
  --color-fg-on-dark-3:   #808080;
  --color-fg-on-primary:  #FFFFFF;

  /* Borders */
  --color-border-1:       #E3E3E2;  /* основная линия на светлом */
  --color-border-2:       #D0D0CE;  /* инпуты, чуть тёмнее */
  --color-border-strong:  #0A0A0A;  /* акцентный outline */

  /* Semantic */
  --color-success:        #2E8B3D;
  --color-success-pale:   #E5F4E7;
  --color-warning:        #E89A1F;
  --color-warning-pale:   #FBEFD8;
  --color-danger:         #C7351A;  /* совпадает с primary-active */
  --color-danger-pale:    #FEE8E2;
  --color-info:           #2563EB;
  --color-info-pale:      #E3EDFE;

  /* ============== TYPOGRAPHY — BASE ============== */
  --font-family-sans: "Rubik", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-family-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale (px) */
  --fs-display-xl:  96px;
  --fs-display-lg:  72px;
  --fs-display-md:  56px;
  --fs-display-sm:  40px;
  --fs-h1:          36px;
  --fs-h2:          28px;
  --fs-h3:          22px;
  --fs-h4:          18px;
  --fs-body-lg:     18px;
  --fs-body:        16px;
  --fs-body-sm:     14px;
  --fs-caption:     12px;
  --fs-eyebrow:     12px;  /* uppercase, tracked */

  /* Line heights */
  --lh-tight:       1.05;
  --lh-display:     1.08;
  --lh-heading:     1.20;
  --lh-body:        1.55;
  --lh-cozy:        1.35;

  /* Letter spacing */
  --ls-display:     -0.02em;
  --ls-heading:     -0.01em;
  --ls-body:        0;
  --ls-eyebrow:     0.16em;

  /* ============== SPACING (4px base) ============== */
  --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;
  --sp-32:  128px;

  /* ============== RADII ============== */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* ============== SHADOWS / ELEVATION ============== */
  --shadow-1: 0 1px 2px rgba(10,10,10,0.06), 0 1px 1px rgba(10,10,10,0.04);
  --shadow-2: 0 4px 12px rgba(10,10,10,0.08), 0 2px 4px rgba(10,10,10,0.04);
  --shadow-3: 0 12px 32px rgba(10,10,10,0.12), 0 4px 8px rgba(10,10,10,0.06);
  --shadow-red: 0 8px 24px rgba(227,66,31,0.28);

  /* ============== MOTION ============== */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============== TYPOGRAPHY — SEMANTIC ============== */

html, body {
  font-family: var(--font-family-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg-1);
  background: var(--color-canvas);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display-xl, h1.display {
  font-size: var(--fs-display-xl);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.display-lg {
  font-size: var(--fs-display-lg);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.display-md {
  font-size: var(--fs-display-md);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
.display-sm {
  font-size: var(--fs-display-sm);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-heading);
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--lh-heading);
}

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-cozy); color: var(--color-fg-3); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

code, .mono {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
}