/* ============================================================================
   АкваКлима — Colors & Type
   Climate-tech ceiling cassettes with built-in capillary heating & cooling.
   The visual system is anchored in the two-arrow logo:
     – warm arrow (orange→red) signals heating / rising warm air
     – cool arrow (cyan→blue) signals cooling / descending cool air
   The rest of the palette stays neutral and architectural: white ceilings,
   soft stone backgrounds, deep ink for text. Air, lightness, clarity.
   ============================================================================ */

/* ---------- Fonts -------------------------------------------------------- */
/* Display: Unbounded — geometric, slightly squarish, Cyrillic-complete.
   Closest free-Google match to the squared geometric mark in the logo.
   Body:    Onest — utilitarian humanist sans with strong Cyrillic.
   Mono:    JetBrains Mono — for specs, dimensions, codes. */
/* Шрифты подключаются в <head> страницы тегом <link> вместе с preconnect.
   Здесь был @import — из-за него браузер узнавал о шрифтах только после
   загрузки и разбора этого файла, то есть на один круг позже, и текст
   дольше оставался невидимым. Начертания 300 и 800 убраны: на сайте
   они не используются, а каждое — отдельный файл. */

:root {
  /* ====== BRAND CORE ====== */
  /* Two-arrow gradients — never use a single flat color where a gradient
     applies. Solid fallbacks below are sampled from the logo mid-tones. */
  --aq-heat-1: #FF8A3D;   /* light orange — arrow head */
  --aq-heat-2: #FF6B35;   /* mid orange */
  --aq-heat-3: #E62528;   /* deep red — arrow shadow */
  --aq-heat:   #FF6B35;   /* solid */

  --aq-cool-1: #30CDFF;   /* light cyan — arrow head */
  --aq-cool-2: #00A8F0;   /* mid blue */
  --aq-cool-3: #0078D4;   /* deep blue — arrow shadow */
  --aq-cool:   #00A8F0;   /* solid */

  /* Signature gradient — combined heat + cool, used for hero accents only */
  --aq-grad-heat:  linear-gradient(135deg, var(--aq-heat-1) 0%, var(--aq-heat-3) 100%);
  --aq-grad-cool:  linear-gradient(135deg, var(--aq-cool-1) 0%, var(--aq-cool-3) 100%);
  --aq-grad-duo:   linear-gradient(90deg,  var(--aq-cool-2) 0%, var(--aq-cool-1) 35%, var(--aq-heat-1) 65%, var(--aq-heat-3) 100%);
  --aq-grad-sky:   linear-gradient(180deg, #EAF6FF 0%, #FFFFFF 100%);
  --aq-grad-ceiling: linear-gradient(180deg, #FFFFFF 0%, #F4F7FB 100%);

  /* ====== NEUTRALS — architectural / ceiling tones ====== */
  --aq-ink:        #0B1220;  /* primary text, near-black with a cool bias */
  --aq-ink-2:      #2C3340;  /* secondary text */
  --aq-ink-3:      #5B6373;  /* tertiary / meta */
  --aq-ink-4:      #8A92A3;  /* placeholder, disabled */

  --aq-paper:      #FFFFFF;  /* primary surface — the tile face */
  --aq-paper-2:    #F7F9FC;  /* off-white surface */
  --aq-paper-3:    #EEF2F8;  /* hairline rows, table bands */
  --aq-stone:      #F4EFE7;  /* warm cream — used for industry / case-study sections (LG-style) */
  --aq-stone-2:    #ECE5D8;

  --aq-line:       #E4E9F0;  /* default border */
  --aq-line-2:     #D2D9E3;  /* hover border */
  --aq-line-3:     #BFC7D4;  /* divider strong */

  /* ====== DARK SURFACE (engineering / specs sections) ====== */
  --aq-deep:       #0A1426;  /* deep ink-navy */
  --aq-deep-2:     #11203A;
  --aq-deep-3:     #1A2C4A;

  /* ====== SEMANTIC ====== */
  --aq-success:    #1E9E6A;  /* eco / energy-efficient indicators */
  --aq-warning:    #E89414;
  --aq-danger:     #D6332B;
  --aq-info:       var(--aq-cool-2);

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

  /* ====== SHADOWS — soft, ceiling-light shadows ====== */
  --aq-shadow-1:  0 1px 2px rgba(11, 18, 32, 0.04), 0 1px 1px rgba(11, 18, 32, 0.03);
  --aq-shadow-2:  0 4px 12px rgba(11, 18, 32, 0.06), 0 1px 2px rgba(11, 18, 32, 0.04);
  --aq-shadow-3:  0 12px 32px rgba(11, 18, 32, 0.10), 0 2px 6px rgba(11, 18, 32, 0.04);
  --aq-shadow-4:  0 24px 64px rgba(11, 18, 32, 0.16), 0 8px 16px rgba(11, 18, 32, 0.05);
  --aq-shadow-tile: 0 30px 60px -20px rgba(0, 120, 212, 0.25), 0 2px 6px rgba(11, 18, 32, 0.05);
  --aq-shadow-focus: 0 0 0 3px rgba(0, 168, 240, 0.25);

  /* ====== SPACING ====== */
  --aq-space-1:  4px;
  --aq-space-2:  8px;
  --aq-space-3:  12px;
  --aq-space-4:  16px;
  --aq-space-5:  24px;
  --aq-space-6:  32px;
  --aq-space-7:  48px;
  --aq-space-8:  64px;
  --aq-space-9:  96px;
  --aq-space-10: 128px;

  /* ====== TYPOGRAPHY ====== */
  --aq-font-display: 'Unbounded', 'Helvetica Neue', Arial, sans-serif;
  --aq-font-body:    'Onest', 'Helvetica Neue', Arial, sans-serif;
  --aq-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Body sizes */
  --aq-text-xs:   12px;
  --aq-text-sm:   14px;
  --aq-text-base: 16px;
  --aq-text-md:   18px;
  --aq-text-lg:   20px;
  --aq-text-xl:   24px;
  --aq-text-2xl:  32px;
  --aq-text-3xl:  44px;
  --aq-text-4xl:  64px;
  --aq-text-5xl:  88px;
  --aq-text-6xl:  120px;

  /* Letter spacing (display geometric font wants slight negative tracking) */
  --aq-tracking-tight: -0.02em;
  --aq-tracking-snug:  -0.01em;
  --aq-tracking-normal: 0;
  --aq-tracking-wide:  0.04em;
  --aq-tracking-eyebrow: 0.18em; /* uppercase eyebrows / section labels */
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES — drop a class on any element to opt in.
   ============================================================================ */

.aq-display-hero {
  font-family: var(--aq-font-display);
  font-weight: 600;
  font-size: clamp(56px, 8vw, var(--aq-text-6xl));
  line-height: 0.98;
  letter-spacing: var(--aq-tracking-tight);
  color: var(--aq-ink);
}

.aq-h1 {
  font-family: var(--aq-font-display);
  font-weight: 600;
  font-size: clamp(40px, 5.5vw, var(--aq-text-4xl));
  line-height: 1.04;
  letter-spacing: var(--aq-tracking-tight);
  color: var(--aq-ink);
}

.aq-h2 {
  font-family: var(--aq-font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, var(--aq-text-3xl));
  line-height: 1.08;
  letter-spacing: var(--aq-tracking-snug);
  color: var(--aq-ink);
}

.aq-h3 {
  font-family: var(--aq-font-display);
  font-weight: 500;
  font-size: var(--aq-text-2xl);
  line-height: 1.15;
  letter-spacing: var(--aq-tracking-snug);
  color: var(--aq-ink);
}

.aq-h4 {
  font-family: var(--aq-font-body);
  font-weight: 600;
  font-size: var(--aq-text-xl);
  line-height: 1.2;
  letter-spacing: var(--aq-tracking-snug);
  color: var(--aq-ink);
}

.aq-eyebrow {
  font-family: var(--aq-font-body);
  font-weight: 600;
  font-size: var(--aq-text-xs);
  line-height: 1;
  letter-spacing: var(--aq-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--aq-cool-3);
}

.aq-lead {
  font-family: var(--aq-font-body);
  font-weight: 400;
  font-size: var(--aq-text-lg);
  line-height: 1.5;
  color: var(--aq-ink-2);
}

.aq-body {
  font-family: var(--aq-font-body);
  font-weight: 400;
  font-size: var(--aq-text-base);
  line-height: 1.55;
  color: var(--aq-ink-2);
}

.aq-meta {
  font-family: var(--aq-font-body);
  font-weight: 400;
  font-size: var(--aq-text-sm);
  line-height: 1.45;
  color: var(--aq-ink-3);
}

.aq-mono {
  font-family: var(--aq-font-mono);
  font-weight: 400;
  font-size: var(--aq-text-sm);
  letter-spacing: 0;
  color: var(--aq-ink-2);
}

/* Gradient text — heat or cool */
.aq-grad-text-cool {
  background: var(--aq-grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.aq-grad-text-heat {
  background: var(--aq-grad-heat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================================
   BASELINE RESET (optional — opt-in by adding .aq-root to <body>)
   ============================================================================ */
.aq-root {
  font-family: var(--aq-font-body);
  font-size: var(--aq-text-base);
  color: var(--aq-ink);
  background: var(--aq-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.aq-root *, .aq-root *::before, .aq-root *::after { box-sizing: border-box; }