/* ============================================================
   Hi-Relax Design System — Tokens
   Source of truth: site/css/styles.css from hirelax.ru codebase
   ============================================================ */

/* ── Web font: Inter ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    /* ===== Brand colors ===== */
    --hr-yellow:          #FFD700;  /* primary */
    --hr-yellow-glow:     #FFED4E;  /* gradient end */
    --hr-yellow-bright:   #FFEA00;  /* hover accent */
    --hr-yellow-bright-2: #FFF44E;  /* bright gradient end */

    /* Yellow tints for surfaces (use sparingly) */
    --hr-yellow-04:   rgba(255, 215, 0, 0.04);
    --hr-yellow-08:   rgba(255, 215, 0, 0.08);
    --hr-yellow-12:   rgba(255, 215, 0, 0.12);
    --hr-yellow-15:   rgba(255, 215, 0, 0.15);
    --hr-yellow-30:   rgba(255, 215, 0, 0.30);
    --hr-yellow-40:   rgba(255, 215, 0, 0.40);

    /* ===== Neutrals ===== */
    --hr-black:       #0a0a0a;   /* page bg */
    --hr-black-2:     #1a1a1a;   /* alt section bg */
    --hr-black-3:     #1c1c1c;   /* deep input bg (resume tool) */
    --hr-gray-button: #2a2a2a;
    --hr-gray-button-hover: #3a3a3a;
    --hr-light-gray:  #f8f9fa;   /* used in printed CP / resume only */
    --hr-white:       #ffffff;

    /* ===== Semantic foreground ===== */
    --hr-fg-1:        #ffffff;                   /* primary text on dark */
    --hr-fg-2:        rgba(255, 255, 255, 0.7);  /* secondary text */
    --hr-fg-3:        rgba(255, 255, 255, 0.35); /* muted / placeholder */
    --hr-fg-4:        rgba(255, 255, 255, 0.18); /* footer copy, watermark */

    /* On printed surfaces (light) */
    --hr-fg-dark-1:   #111;
    --hr-fg-dark-2:   #444;
    --hr-fg-dark-3:   #666;
    --hr-fg-dark-4:   #aaa;
    --hr-gold-dark:   #C8960C;   /* dark accent for printed gold elements */
    --hr-gold-text:   #8A6E0C;   /* gold-on-cream text */
    --hr-cream:       #FFFBEB;   /* cream highlight bg in resumes */

    /* ===== Surfaces (dark) ===== */
    --hr-bg-primary:    var(--hr-black);
    --hr-bg-secondary:  var(--hr-black-2);
    --hr-bg-glass:      rgba(255, 255, 255, 0.08); /* nav, inputs */
    --hr-card-bg:       rgba(255, 255, 255, 0.05); /* cards */
    --hr-border:        rgba(255, 255, 255, 0.10);
    --hr-border-2:      rgba(255, 255, 255, 0.14);

    /* ===== Gradients ===== */
    --hr-grad-yellow:        linear-gradient(135deg, #FFD700 0%, #FFED4E 100%);
    --hr-grad-yellow-bright: linear-gradient(135deg, #FFEA00 0%, #FFF44E 100%);
    --hr-grad-title:         linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);

    /* ===== Typography ===== */
    --hr-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Type scale (desktop) */
    --hr-fs-display:   64px;  /* hero h1 */
    --hr-fs-counter:   48px;  /* big numbers, results-counter goes 64px */
    --hr-fs-h1:        48px;  /* section h2 */
    --hr-fs-h2:        36px;
    --hr-fs-h3:        24px;
    --hr-fs-h4:        20px;
    --hr-fs-lead:      20px;  /* hero subtitle */
    --hr-fs-body:      16px;
    --hr-fs-sm:        14px;
    --hr-fs-xs:        12px;
    --hr-fs-2xs:       10px;  /* uppercase labels (with tracking) */

    /* Weights */
    --hr-fw-regular: 400;
    --hr-fw-medium:  500;
    --hr-fw-semi:    600;
    --hr-fw-bold:    700;
    --hr-fw-black:   800;

    /* Line heights */
    --hr-lh-tight:   1.1;
    --hr-lh-snug:    1.3;
    --hr-lh-normal:  1.6;
    --hr-lh-relaxed: 1.7;

    /* ===== Radii ===== */
    --hr-r-xs:   7px;
    --hr-r-sm:   9px;
    --hr-r-md:   12px;
    --hr-r-lg:   16px;
    --hr-r-xl:   20px;
    --hr-r-2xl:  24px;
    --hr-r-pill: 50px;
    --hr-r-full: 9999px;

    /* ===== Spacing scale (8pt-ish) ===== */
    --hr-s-1:  4px;
    --hr-s-2:  8px;
    --hr-s-3:  12px;
    --hr-s-4:  16px;
    --hr-s-5:  20px;
    --hr-s-6:  24px;
    --hr-s-7:  32px;
    --hr-s-8:  40px;
    --hr-s-9:  60px;
    --hr-s-10: 80px;
    --hr-s-11: 120px;  /* section vertical padding */

    /* ===== Shadows (always warm/yellow on dark) ===== */
    --hr-shadow-soft:       0 8px 32px rgba(0, 0, 0, 0.10);
    --hr-shadow-bold:       0 20px 60px rgba(255, 215, 0, 0.15);
    --hr-shadow-cta-hover:  0 12px 40px rgba(255, 215, 0, 0.30);
    --hr-shadow-card-hover: 0 25px 60px rgba(255, 215, 0, 0.20);
    --hr-focus-ring:        0 0 0 3px rgba(255, 215, 0, 0.10);

    /* ===== Easings & durations ===== */
    --hr-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --hr-dur-micro:   150ms;
    --hr-dur-fast:    200ms;
    --hr-dur-base:    300ms;
    --hr-dur-slow:    400ms;

    /* ===== Layout ===== */
    --hr-container:   1400px;
    --hr-container-x: 24px;
}

/* ============================================================
   Semantic classes — use these in pages, not raw vars
   ============================================================ */

/* Reset essentials matching the brand baseline */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--hr-bg-primary);
    color: var(--hr-fg-1);
    font-family: var(--hr-font-sans);
    font-weight: var(--hr-fw-regular);
    line-height: var(--hr-lh-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

/* ── Display & headings ────────────────────────────────────── */
.hr-display {
    font-family: var(--hr-font-sans);
    font-size: var(--hr-fs-display);
    font-weight: var(--hr-fw-black);
    line-height: var(--hr-lh-tight);
    background: var(--hr-grad-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}
.hr-display .accent {
    background: var(--hr-grad-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hr-h1 {
    font-size: var(--hr-fs-h1);
    font-weight: var(--hr-fw-bold);
    line-height: var(--hr-lh-tight);
    background: var(--hr-grad-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 var(--hr-s-4);
}

.hr-h2 { font-size: var(--hr-fs-h2); font-weight: var(--hr-fw-bold); margin: 0 0 var(--hr-s-3); line-height: var(--hr-lh-snug); }
.hr-h3 { font-size: var(--hr-fs-h3); font-weight: var(--hr-fw-bold); margin: 0 0 var(--hr-s-3); line-height: var(--hr-lh-snug); }
.hr-h4 { font-size: var(--hr-fs-h4); font-weight: var(--hr-fw-bold); margin: 0 0 var(--hr-s-2); line-height: var(--hr-lh-snug); }

.hr-lead { font-size: var(--hr-fs-lead); color: var(--hr-fg-2); line-height: var(--hr-lh-normal); }
.hr-body { font-size: var(--hr-fs-body); color: var(--hr-fg-1); line-height: var(--hr-lh-relaxed); }
.hr-muted { color: var(--hr-fg-2); }

/* ── Numbers (always gradient) ─────────────────────────────── */
.hr-stat-number,
.hr-price,
.hr-counter {
    font-weight: var(--hr-fw-black);
    background: var(--hr-grad-yellow);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.hr-stat-number { font-size: 40px; }
.hr-price       { font-size: 48px; }
.hr-counter     { font-size: 64px; }

/* ── Labels (uppercase tracking) ───────────────────────────── */
.hr-label {
    font-size: var(--hr-fs-sm);
    font-weight: var(--hr-fw-semi);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hr-fg-1);
    opacity: 0.8;
}
.hr-label-sm {
    font-size: var(--hr-fs-2xs);
    font-weight: var(--hr-fw-bold);
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--hr-fg-3);
}

/* ── Surfaces ──────────────────────────────────────────────── */
.hr-card {
    background: var(--hr-card-bg);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-r-xl);
    padding: var(--hr-s-7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all var(--hr-dur-slow) var(--hr-ease);
}
.hr-card:hover {
    transform: translateY(-8px);
    border-color: var(--hr-yellow-30);
    box-shadow: var(--hr-shadow-card-hover);
}

.hr-glass {
    background: var(--hr-bg-glass);
    border: 1px solid var(--hr-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ── Buttons / CTA ─────────────────────────────────────────── */
.hr-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--hr-grad-yellow);
    color: var(--hr-black);
    padding: 16px 32px;
    border-radius: var(--hr-r-pill);
    font-family: var(--hr-font-sans);
    font-weight: var(--hr-fw-semi);
    font-size: var(--hr-fs-body);
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: var(--hr-shadow-bold);
    transition: all var(--hr-dur-base) ease;
}
.hr-cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--hr-shadow-cta-hover);
}

.hr-cta-sm {
    padding: 12px 28px;
    font-size: var(--hr-fs-sm);
}

.hr-cta-ghost {
    background: var(--hr-bg-glass);
    color: var(--hr-fg-1);
    border: 1px solid var(--hr-border);
    padding: 12px 28px;
    border-radius: var(--hr-r-pill);
    font-family: var(--hr-font-sans);
    font-weight: var(--hr-fw-semi);
    cursor: pointer;
    transition: all var(--hr-dur-base) ease;
}
.hr-cta-ghost:hover {
    border-color: var(--hr-yellow-30);
    color: var(--hr-yellow-bright);
}

/* ── Form controls ─────────────────────────────────────────── */
.hr-input,
.hr-select,
.hr-textarea {
    width: 100%;
    background: var(--hr-bg-glass);
    border: 1px solid var(--hr-border);
    border-radius: var(--hr-r-md);
    color: var(--hr-fg-1);
    font-family: var(--hr-font-sans);
    font-size: var(--hr-fs-body);
    padding: 16px;
    transition: all var(--hr-dur-base) ease;
    outline: none;
}
.hr-input:focus,
.hr-select:focus,
.hr-textarea:focus {
    border-color: var(--hr-yellow);
    background: var(--hr-card-bg);
    box-shadow: var(--hr-focus-ring);
}

/* ── Icon tile (filled yellow square) ──────────────────────── */
.hr-icon-tile {
    width: 60px;
    height: 60px;
    border-radius: var(--hr-r-lg);
    background: var(--hr-grad-yellow);
    color: var(--hr-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}
.hr-icon-tile-sm { width: 40px; height: 40px; border-radius: var(--hr-r-md); font-size: 18px; }
.hr-icon-tile-lg { width: 80px; height: 80px; border-radius: 50%; font-size: 36px; }

/* ── Container ─────────────────────────────────────────────── */
.hr-container {
    width: 100%;
    max-width: var(--hr-container);
    margin: 0 auto;
    padding: 0 var(--hr-container-x);
}