/* ========================================
   ДИЗАЙН-СИСТЕМА NIKA APPLIANCE REPAIR
   v1.0 - 2025-01-13

   MUST BE LOADED FIRST!
   ======================================== */

:root {
    /* ============ ЦВЕТА ============ */

    /* Primary Brand Colors */
    --primary-blue: #2196F3;
    --primary-blue-dark: #1976D2;
    --primary-blue-darker: #1565C0;
    --primary-blue-light: #42A5F5;

    /* Secondary Colors */
    --primary-yellow: #FFD600;
    --bright-green: #28a745;
    --success-green: #4CAF50;

    /* Neutral Grays - UNIFIED */
    --gray-900: #212529;    /* Heading text - самый темный */
    --gray-700: #495057;    /* Body text - основной текст */
    --gray-500: #6c757d;    /* Muted text - второстепенный */
    --gray-300: #dee2e6;    /* Borders & dividers */
    --gray-100: #f8f9fa;    /* Light backgrounds */
    --white: #ffffff;

    /* Semantic Color Names */
    --text-primary: var(--gray-900);
    --text-body: var(--gray-700);
    --text-muted: var(--gray-500);
    --text-on-blue: var(--white);
    --text-link: var(--primary-blue);

    /* Background Colors */
    --bg-white: var(--white);
    --bg-light: var(--gray-100);
    --bg-blue: var(--primary-blue);
    --bg-blue-gradient: linear-gradient(135deg, #1976D2 0%, #2196F3 50%, #1565C0 100%);

    /* ============ ТИПОГРАФИЯ ============ */

    /* Font Families */
    --font-heading: 'Fredoka', cursive, -apple-system, system-ui;
    --font-body: 'Rubik', sans-serif, -apple-system, system-ui;

    /* Font Sizes - Mobile First */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ============ SPACING ============ */

    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* Semantic Spacing */
    --section-padding: 3rem;
    --card-padding: 1.5rem;
    --button-padding: 0.75rem 1.5rem;

    /* ============ BORDERS ============ */

    --border-radius-sm: 0.25rem;   /* 4px */
    --border-radius-md: 0.5rem;    /* 8px */
    --border-radius-lg: 0.75rem;   /* 12px */
    --border-radius-xl: 1rem;      /* 16px */

    /* ============ SHADOWS ============ */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
}

/* ============================================
   UTILITY CLASSES - TAILWIND-LIKE
   ============================================ */

/* TEXT COLORS */
.text-primary { color: var(--text-primary) !important; }
.text-body { color: var(--text-body) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-white { color: var(--white) !important; }
.text-blue { color: var(--primary-blue) !important; }
.text-green { color: var(--bright-green) !important; }

/* FONT FAMILIES */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

/* FONT SIZES */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

/* FONT WEIGHTS */
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* MARGINS */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

.mb-0 { margin-bottom: var(--space-0); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* PADDING */
.p-0 { padding: var(--space-0); }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* TEXT ALIGNMENT */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* DISPLAY */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

/* ============================================
   COMPONENT CLASSES
   ============================================ */

/* Table Styles */
.table-header-cell {
    padding: var(--space-4);
    text-align: left;
    font-weight: var(--font-semibold);
    color: var(--white) !important;
}

.table-body-cell {
    padding: var(--space-4);
    color: var(--text-body);
}

.table-body-cell-primary {
    padding: var(--space-4);
    font-weight: var(--font-semibold);
    color: var(--primary-blue);
}

/* Service Coverage Table */
.coverage-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.table-caption {
    caption-side: bottom;
    padding: var(--space-2);
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-sm);
    font-style: italic;
}

.table-header-row {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
}

.table-row {
    border-bottom: 1px solid var(--gray-300);
    transition: background-color 0.2s ease;
}

.table-row:hover {
    background-color: rgba(33, 150, 243, 0.05);
}

.table-row-alt {
    background-color: var(--gray-100);
}

.table-row-alt:hover {
    background-color: rgba(33, 150, 243, 0.08);
}

/* Metric Cards */
.metric-card {
    text-align: center;
    padding: var(--space-6);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-xl);
    backdrop-filter: blur(10px);
}

.metric-value {
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    color: var(--white) !important;
    margin-bottom: var(--space-2);
}

.metric-label {
    font-size: var(--text-lg);
    color: var(--white) !important;
    opacity: 0.95;
}

/* Guarantee Cards */
.guarantee-card {
    padding: var(--space-4);
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius-md);
}

.guarantee-title {
    font-weight: var(--font-semibold);
    color: var(--white) !important;
    margin-bottom: var(--space-1);
}

.guarantee-text {
    font-size: var(--text-sm);
    color: var(--white) !important;
    opacity: 0.9;
}

/* Section on Blue Background */
.section-blue h2,
.section-blue h3,
.section-blue h4,
.section-blue p,
.section-blue div,
.section-blue span {
    color: var(--white) !important;
}

/* ============================================
   FORCED CONTRAST FIXES
   ============================================ */

/* Force white text ONLY on sections with blue gradient background */
section.trust-metrics-section,
section.areas-section-premium {
    color: var(--white) !important;
}

section.trust-metrics-section h2,
section.trust-metrics-section h3,
section.trust-metrics-section div,
section.areas-section-premium h2,
section.areas-section-premium h3,
section.areas-section-premium div {
    color: var(--white) !important;
}

/* Exceptions for white background elements (buttons, cards on white) */
section[style*="background: white"] *,
div[style*="background: white"] *,
table[style*="background: white"] * {
    color: inherit !important;
}

/* Table headers on blue gradient - force white */
table thead tr[style*="background: linear-gradient"] th,
table thead tr[style*="#2196F3"] th,
table thead tr[style*="#1976D2"] th {
    color: var(--white) !important;
}

/* Table body cells - use their own colors */
table tbody td {
    color: inherit !important;
}

/* Footer brands on blue background */
footer .footer-brands h4,
footer .footer-brands p {
    color: var(--white) !important;
}

/* ============================================
   LINK STYLES - Proper styling for different link types
   ============================================ */

/* Phone links - NO underline, NO background, inherit color from parent */
a[href^="tel:"] {
    color: inherit !important;
    text-decoration: none !important;
    background: none !important;
    background-color: transparent !important;
    cursor: pointer;
}

a[href^="tel:"]:visited {
    color: inherit !important;
    background: none !important;
    background-color: transparent !important;
}

a[href^="tel:"]:hover {
    opacity: 0.8;
}

a[href^="tel:"]:active,
a[href^="tel:"]:focus {
    background: none !important;
    background-color: transparent !important;
}

/* Text links in content - Blue with NO underline, NO background (phone links should be clickable text) */
.ai-summary-box a[href^="tel:"] {
    color: var(--primary-blue) !important;
    text-decoration: none !important;
    background: none !important;
    background-color: transparent !important;
}

.ai-summary-box a[href^="tel:"]:visited {
    color: var(--primary-blue) !important;
    text-decoration: none !important;
    background: none !important;
    background-color: transparent !important;
}

.ai-summary-box a[href^="tel:"]:active,
.ai-summary-box a[href^="tel:"]:focus {
    background: none !important;
    background-color: transparent !important;
}

/* Button-style links - NO underline, force white text for buttons */
/* PRIMARY = Booking (Green), SECONDARY = Call (Purple) */
/* Note: .call-btn and .book-btn removed from header */
.cta-primary,
a.cta-primary,
.countdown-cta,
a.countdown-cta,
.submit-btn,
button.submit-btn,
.brands-cta-btn,
a.brands-cta-btn {
    text-decoration: none !important;
    color: white !important;
}

.cta-secondary,
a.cta-secondary,
.call-btn-large,
a.call-btn-large {
    text-decoration: none !important;
    color: white !important;
}

.cta-primary:visited,
a.cta-primary:visited,
.countdown-cta:visited,
a.countdown-cta:visited,
.submit-btn:visited,
button.submit-btn:visited,
.brands-cta-btn:visited,
a.brands-cta-btn:visited {
    color: white !important;
    text-decoration: none !important;
}

.cta-secondary:visited,
a.cta-secondary:visited,
.call-btn-large:visited,
a.call-btn-large:visited {
    color: white !important;
    text-decoration: none !important;
}