/* ============================================================
   tokens.css — Emercom design tokens + base reset

   Foundation file shared by both layers (legacy production CSS +
   canonical ui-kit). Defines:
     - Brand colors (primary, accent, system tones)
     - Layout offsets (nav height, page-top spacing)
     - Gradients
     - Typography stack + size scale + line heights
     - Icon sizes + icon-box sizes
     - Spacing scale
     - Border radius scale
     - Shadow scale (incl. primary-tinted hover shadows)
     - Transitions
     - Base CSS reset (* + html + body baseline)

   Brand-DNA neutral file — neither "legacy" nor "canonical." Both
   sides reference the same tokens, so the visual identity stays in
   sync as the site migrates from legacy to canonical components.
   ============================================================ */

:root {
    /* Colors - Dark Theme with Emerald Accent (matching Emercom app) */
    --color-bg: #0f1419;
    --color-bg-elevated: #192734;
    --color-bg-card: #192734;
    --color-bg-card-hover: #1e2d3d;
    --color-border: #38444d;
    --color-border-light: #2f3b47;

    --color-text: #e1e8ed;
    --color-text-secondary: #a5b7c5;
    --color-text-muted: #7a8a99;

    --color-primary: #5196CE;
    --color-primary-light: #6BA8D9;
    --color-primary-dark: #3D7AAF;
    --color-primary-glow: rgba(var(--color-primary-rgb), 0.4);

    --color-accent: #F88C21;
    --color-accent-light: #FAA44D;
    --color-accent-dark: #D97610;

    --color-success: #4CAF87;
    --color-warning: #E2B039;
    --color-error: #D32F2F;
    --color-info: #64B5F6;
    --color-maintenance: #ffb94d;
    --color-ipv6: #9b59b6;

    /* RGB triplets — for use with rgba(var(--color-x-rgb), alpha) when alpha varies */
    --color-bg-rgb: 15, 20, 25;
    --color-primary-rgb: 81, 150, 206;
    --color-accent-rgb: 248, 140, 33;
    --color-success-rgb: 76, 175, 135;
    --color-warning-rgb: 226, 176, 57;
    --color-error-rgb: 211, 47, 47;
    --color-info-rgb: 100, 181, 246;
    --color-maintenance-rgb: 255, 185, 77;
    --color-ipv6-rgb: 155, 89, 182;

    /* Layout — top offset to clear fixed nav (~64px) plus breathing room */
    --layout-nav-height: 4rem;        /* 64px */
    --layout-page-top: 5rem;          /* 80px — for content pages (grid/list) */
    --layout-hero-top: 7.5rem;        /* 120px — for hero-led landing pages */
    --layout-page-top-mobile: 4rem;   /* 64px */
    --layout-hero-top-mobile: 6rem;   /* 96px */

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #5196CE 0%, #6BA8D9 50%, #8BBDE5 100%);
    --gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    --gradient-text: linear-gradient(135deg, #5196CE 0%, #6BA8D9 50%, #8BBDE5 100%);

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Type scale — discrete sizes used across the site */
    --font-xs: 0.75rem;     /* 12px — micro labels, badges */
    --font-sm: 0.8125rem;   /* 13px — captions, footnotes */
    --font-md: 0.875rem;    /* 14px — small body, card meta */
    --font-base: 1rem;      /* 16px — body */
    --font-lg: 1.125rem;    /* 18px — emphasized body, card titles */
    --font-xl: 1.25rem;     /* 20px — small headings, plan names */
    --font-2xl: 1.5rem;     /* 24px — sub-section headings */
    --font-3xl: 1.75rem;    /* 28px — section sub-titles */
    --font-4xl: 2rem;       /* 32px — large numbers */
    --font-5xl: 3rem;       /* 48px — display prices */
    --font-section: clamp(2rem, 4vw, 3rem);          /* h2 — fluid */
    --font-hero: clamp(2.5rem, 6vw, 4.5rem);         /* h1 — fluid */

    /* Line heights — semantic, not numeric */
    --line-tight: 1.15;     /* headlines */
    --line-snug: 1.3;       /* sub-headlines */
    --line-normal: 1.5;     /* UI text */
    --line-relaxed: 1.7;    /* body paragraphs */

    /* Icon sizes — for inline SVG via width/height */
    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 22px;
    --icon-xl: 28px;
    --icon-2xl: 32px;

    /* Icon container boxes (the rounded-square holding an icon) */
    --icon-box-sm: 36px;
    --icon-box-md: 44px;
    --icon-box-lg: 56px;

    /* Section vertical rhythm — single source of truth for page sections */
    --section-padding-y: var(--space-3xl);          /* desktop top/bottom */
    --section-padding-y-tight: var(--space-2xl);    /* compact sections */
    --section-padding-y-loose: var(--space-4xl);    /* hero / final CTA */

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px var(--color-primary-glow);

    /* Hover-elevated card shadows (tinted by primary) */
    --shadow-card-hover-sm: 0 4px 24px rgba(var(--color-primary-rgb), 0.08);
    --shadow-card-hover-md: 0 8px 32px rgba(var(--color-primary-rgb), 0.12);
    --shadow-card-hover-lg: 0 12px 48px rgba(var(--color-primary-rgb), 0.18);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   Base reset
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: linear-gradient(170deg,
        #121a22 0%,
        #121a21 5%,
        #111920 10%,
        #11181f 16%,
        #10171e 22%,
        #0f161c 28%,
        #0f151a 35%,
        #0f1419 45%,
        #0f1419 55%,
        #0f1520 65%,
        #0f1722 72%,
        #101923 80%,
        #101b25 88%,
        #11202b 100%) fixed;
    overflow-x: hidden;
}