/* =====================================================
   SOLIDENERGY — v4 Process Cyan · Design tokens
   Industrial engineering · premium B2B.
   Visual language from main_design macros + UI-kit.
   Fonts kept: IBM Plex Sans + IBM Plex Mono.
   ===================================================== */

:root {
  /* ===== Colors / Light neutrals ===== */
  --color-white: #FFFFFF;
  --color-mist: #FAF7FA;            /* secondary background (BG-2) */
  --color-tint: #E5EFF6;            /* cyan tint */
  --color-line: #DDE3EA;            /* hairline border on light */
  --color-line-strong: #C4CDD8;
  --color-slate-dim: #8895A4;
  --color-slate-muted: #4A5868;     /* muted text */
  --color-slate: #2D3947;
  --color-text: #0F1F2E;            /* main text */
  --color-navy: #0A1A2A;            /* dark sections / chrome */
  --color-navy-deep: #06121F;

  /* ===== Colors / Brand ===== */
  --color-cyan: #2E7AA8;            /* Process Cyan · Primary */
  --color-cyan-hover: #1F5A7E;
  --color-cyan-deep: #14425C;
  --color-cyan-soft: #5A9BC4;       /* accents on dark */

  /* ===== Operational signals ===== */
  --color-success: #2D8B66;
  --color-warning: #C97A3A;
  --color-error: #B4383A;
  --color-warm-stream: #C97A3A;

  /* ===== Colors / On-dark surfaces ===== */
  --color-on-dark-border: rgba(255, 255, 255, 0.12);
  --color-on-dark-border-strong: rgba(255, 255, 255, 0.20);
  --color-on-dark-fill: rgba(255, 255, 255, 0.04);

  /* ===== Colors / Semantic ===== */
  --color-bg: var(--color-white);
  --color-bg-secondary: var(--color-mist);
  --color-bg-card: var(--color-white);
  --color-bg-dark: var(--color-navy);
  --color-bg-very-dark: var(--color-navy-deep);

  --color-text-primary: var(--color-text);
  --color-text-muted: var(--color-slate-muted);
  --color-text-dim: var(--color-slate-dim);
  --color-text-on-dark: var(--color-white);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.68);

  --color-border: var(--color-line);
  --color-border-strong: var(--color-line-strong);
  --color-border-emphasis: var(--color-cyan);

  --color-accent: var(--color-cyan);
  --color-accent-hover: var(--color-cyan-hover);
  --color-accent-tint: var(--color-tint);
  --color-focus: var(--color-cyan);
  --color-link: var(--color-cyan);

  /* ===== Typography — IBM Plex Sans (text) + IBM Plex Mono (meta) ===== */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Sizes — big headings fluid via clamp (mobile → tablet → desktop) */
  --fs-display: clamp(34px, 5vw, 60px);    /* Hero H1 (60 / 46 / 34) */
  --fs-h1:      clamp(32px, 4.4vw, 52px);  /* page H1 (52 / 42 / 32) */
  --fs-h2:      clamp(27px, 3.2vw, 38px);  /* Section H2 (38 / 32 / 27) */
  --fs-h3:      clamp(22px, 1.9vw, 26px);  /* sub-heading (26 / 23 / 22) */
  --fs-h4:      19px;                       /* card title (18–20) */
  --fs-h5:      15px;
  --fs-stat:    clamp(34px, 4vw, 46px);    /* stat number — SANS 700 */
  --fs-lead-l:  21px;                       /* hero subtitle */
  --fs-lead:    18px;                       /* section intro */
  --fs-body:    16px;                       /* body / card body */
  --fs-body-s:  14px;                       /* small text */
  --fs-caption: 12px;                       /* meta / labels — MONO uppercase */
  --fs-micro:   11px;                       /* tiny technical caption */
  --fs-nav:     14px;                       /* header menu */
  --fs-btn:     14.5px;                     /* buttons (14–15 / 600) */
  --fs-label:   13px;                       /* form labels */

  --lh-display: 1.1;
  --lh-h1: 1.1;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-body: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-display: -0.02em;
  --ls-h1: -0.02em;
  --ls-h2: -0.015em;
  --ls-caption: 0.08em;
  --ls-eyebrow: 0.10em;

  /* ===== Spacing — base 8 ===== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Section rhythm */
  --section-pad: 96px;
  --section-pad-tablet: 72px;
  --section-pad-mobile: 56px;

  /* ===== Radii — soft, premium ===== */
  --radius-0: 0;
  --radius-xs: 4px;        /* small elements / chips */
  --radius-sm: 6px;        /* buttons / inputs */
  --radius-md: 8px;        /* cards */
  --radius-lg: 12px;       /* large CTA / feature blocks */
  --radius-xl: 16px;       /* hero / big CTA */
  --radius-pill: 999px;

  /* ===== Borders ===== */
  --border-1: 1px solid var(--color-border);
  --border-1-strong: 1px solid var(--color-border-strong);
  --border-1-emphasis: 1px solid var(--color-cyan);
  --border-2-focus: 2px solid var(--color-cyan);

  /* ===== Shadows — thin borders first, soft shadow only on hover ===== */
  --shadow-0: none;
  --shadow-sm: 0 1px 2px rgba(10, 26, 42, 0.04);
  --shadow-md: 0 6px 20px rgba(10, 26, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(10, 26, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(46, 122, 168, 0.22);

  /* ===== Motion ===== */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 140ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ===== Layout ===== */
  --container-max: 1200px;
  --container-pad-desktop: 32px;
  --container-pad-tablet: 24px;
  --container-pad-mobile: 20px;

  --z-sticky: 100;
  --z-banner: 1000;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Framework-токены — потребляются ../../ui/_core/se-ui.css */
:root{
  --gradient-section-dark: linear-gradient(135deg, #102a3f 0%, #0a1a2a 55%, #06121f 100%);
  --color-surface-dark:    #0F2740;
}