/*
 * EnergoSystems Design Tokens v1.0.0
 * Витягнуто з Claude Design 2026-05-08
 * https://claude.ai/design/p/019de18e-ca8b-7ce5-9d76-4cfbb74b07f4
 *
 * Структура:
 *   1. Brand colors (sky, deep-blue, utility-bar)
 *   2. Product colors (SMART-баланс, ТЕПЛОmeter, ВОДОmeter)
 *   3. Neutrals (gray scale + white)
 *   4. Status colors (green/orange/red + bg)
 *   5. Semantic tokens (fg, bg, border)
 *   6. Container widths
 *   7. Animation
 *   8. Typography (font families, sizes, weights, line-height, tracking)
 *   9. Radius
 *   10. Shadows
 *   11. Spacing scale
 */

:root {
    /* ============================================
     * 1. Brand colors
     * ============================================ */
    --es-sky: #2EB7F0;
    --es-sky-600: #1FA3DA;
    --es-sky-100: #DFF1FB;
    --es-sky-50: #EFF7FB;
    --es-blue: #2F80ED;
    --es-deep-blue: #1E3A5F;
    --es-deep-blue-700: #16304E;
    --es-deep-blue-900: #0E1F36;
    --es-utility-bar: #2A3FBE;
    --es-energy-blue: var(--es-sky);

    /* ============================================
     * 2. Product accent colors
     * SMART-баланс™ (sb-*), ТЕПЛОmeter™ (tm-*), ВОДОmeter™ (vm-*)
     * ============================================ */
    --sb-orange: #FF6B1F;
    --sb-orange-dark: #E14B0A;
    --sb-yellow: #FFB800;
    --sb-yellow-light: #FFD24A;
    --sb-blue: #1F4FE0;
    --sb-roof: #2B2B2B;

    --tm-red: #D7372C;
    --tm-red-dark: #A82920;
    --tm-graphite: #2B2B2B;
    --tm-silver: #C9CDD2;

    --vm-blue: #0E7CC2;
    --vm-blue-dark: #0A5E94;
    --vm-cyan: #2EB7F0;
    --vm-graphite: #2B2B2B;

    /* ============================================
     * 3. Neutrals
     * ============================================ */
    --es-gray-50: #F5F7FA;
    --es-gray-100: #EAEEF3;
    --es-gray-200: #D9DFE6;
    --es-gray-300: #BCC4CD;
    --es-gray-400: #9AA5B1;
    --es-gray-600: #5A6470;
    --es-gray-800: #2F2F2F;
    --es-gray-900: #1A1A1A;
    --es-white: #FFFFFF;

    /* ============================================
     * 4. Status colors
     * ============================================ */
    --es-green: #27AE60;
    --es-green-bg: #E8F6EE;
    --es-orange: #F2994A;
    --es-orange-bg: #FDEFE0;
    --es-red: #C0392B;
    --es-red-bg: #F8E4E1;

    /* ============================================
     * 5. Semantic tokens
     * ============================================ */
    --fg-1: var(--es-gray-900);
    --fg-2: var(--es-gray-800);
    --fg-3: var(--es-gray-600);
    --fg-4: var(--es-gray-400);
    --fg-on-blue: var(--es-white);

    --bg-1: var(--es-white);
    --bg-2: var(--es-gray-50);
    --bg-3: var(--es-gray-100);
    --bg-deep: var(--es-deep-blue);
    --bg-watercolor: var(--es-sky-50);

    --border-1: var(--es-gray-200);
    --border-2: var(--es-gray-300);
    --border-strong: var(--es-gray-400);
    --bw-1: 1px;
    --bw-2: 2px;

    --focus-ring: 0 0 0 3px rgba(47, 128, 237, 0.30);

    /* ============================================
     * 6. Container widths
     * ============================================ */
    --container-md: 1200px;
    --container-lg: 1440px;

    /* ============================================
     * 7. Animation
     * ============================================ */
    --dur: 180ms;
    --dur-fast: 120ms;
    --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);

    /* ============================================
     * 8. Typography
     * ============================================ */
    --font-heading: 'Montserrat', 'Inter', 'Roboto', sans-serif;
    --font-sans: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* Font sizes */
    --fs-display: 56px;
    --fs-h1: 44px;
    --fs-h2: 32px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-body-lg: 18px;
    --fs-body: 16px;
    --fs-body-sm: 14px;
    --fs-caption: 12px;
    --fs-overline: 11px;

    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Line heights */
    --lh-display: 1.2;
    --lh-h1: 1.2;
    --lh-h2: 1.2;
    --lh-h3: 1.2;
    --lh-h4: 1.2;
    --lh-body-lg: 1.5;
    --lh-body: 1.5;
    --lh-body-sm: 1.4;
    --lh-caption: 1.4;
    --lh-overline: 1.3;

    /* Tracking */
    --tracking-display: -0.01em;
    --tracking-h1: -0.01em;
    --tracking-h2: -0.01em;
    --tracking-h3: -0.01em;
    --tracking-h4: -0.01em;
    --tracking-overline: 0.08em;
    --tracking-button: 0.02em;

    /* ============================================
     * 9. Radius
     * ============================================ */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 8px;
    --r-xl: 12px;
    --r-pill: 999px;

    /* ============================================
     * 10. Shadows
     * ============================================ */
    --shadow-sm: 0 1px 2px rgba(15, 31, 54, 0.06);
    --shadow-md: 0 2px 6px rgba(15, 31, 54, 0.08), 0 1px 2px rgba(15, 31, 54, 0.04);
    --shadow-lg: 0 8px 24px rgba(15, 31, 54, 0.10), 0 2px 6px rgba(15, 31, 54, 0.05);

    /* ============================================
     * 11. Spacing scale (4 → 96px)
     * ============================================ */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;
    --sp-9: 96px;
}

/* Mobile font-size adjustments */
@media (max-width: 640px) {
    :root {
        --fs-display: 36px;
        --fs-h1: 32px;
        --fs-h2: 24px;
        --fs-h3: 20px;
        --fs-h4: 18px;
        --fs-body-lg: 16px;
        --fs-body: 15px;
        --fs-body-sm: 14px;
    }
}

/* ============================================
 * Typography utility classes
 * ============================================ */
.t-display {
    font: var(--fw-bold) var(--fs-display)/var(--lh-display) var(--font-heading);
    letter-spacing: var(--tracking-display);
    color: var(--fg-1);
}
.t-h1 {
    font: var(--fw-semibold) var(--fs-h1)/var(--lh-h1) var(--font-heading);
    letter-spacing: var(--tracking-h1);
    color: var(--fg-1);
}
.t-h2 {
    font: var(--fw-semibold) var(--fs-h2)/var(--lh-h2) var(--font-heading);
    letter-spacing: var(--tracking-h2);
    color: var(--fg-1);
}
.t-h3 {
    font: var(--fw-medium) var(--fs-h3)/var(--lh-h3) var(--font-heading);
    letter-spacing: var(--tracking-h3);
    color: var(--fg-1);
}
.t-h4 {
    font: var(--fw-medium) var(--fs-h4)/var(--lh-h4) var(--font-heading);
    letter-spacing: var(--tracking-h4);
    color: var(--fg-1);
}
.t-body-lg {
    font: var(--fw-regular) var(--fs-body-lg)/var(--lh-body-lg) var(--font-sans);
    color: var(--fg-2);
}
.t-body {
    font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
    color: var(--fg-2);
}
.t-body-sm {
    font: var(--fw-regular) var(--fs-body-sm)/var(--lh-body-sm) var(--font-sans);
    color: var(--fg-2);
}
.t-caption {
    font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-sans);
    color: var(--fg-3);
}
.t-overline {
    font: var(--fw-semibold) var(--fs-overline)/var(--lh-overline) var(--font-sans);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--fg-3);
}
.t-mono {
    font-family: var(--font-mono);
    font-size: var(--fs-body-sm);
    color: var(--fg-2);
}

/* ============================================
 * Button utility classes
 * ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    font: var(--fw-semibold) var(--fs-body)/1 var(--font-sans);
    letter-spacing: var(--tracking-button);
    border-radius: var(--r-md);
    border: var(--bw-1) solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--dur) var(--ease-out);
}
.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.btn-primary {
    background: var(--es-blue);
    color: var(--fg-on-blue);
}
.btn-primary:hover {
    background: var(--es-deep-blue);
}
.btn-accent {
    background: var(--sb-orange);
    color: var(--fg-on-blue);
}
.btn-accent:hover {
    background: var(--sb-orange-dark);
}
.btn-outline {
    background: transparent;
    color: var(--es-deep-blue);
    border-color: var(--border-2);
}
.btn-outline:hover {
    background: var(--es-sky-50);
    border-color: var(--es-sky-600);
}

/* ============================================
 * Card utility class
 * ============================================ */
.card {
    background: var(--bg-1);
    border: var(--bw-1) solid var(--border-1);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-2);
}

/* Container utility */
.container {
    max-width: var(--container-md);
    margin: 0 auto;
    padding: 0 var(--sp-4);
}
.container-lg {
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: 0 var(--sp-4);
}