/* ========================================
   TR_PUBLIC - Global Styles
   Design System Variables & Base Styles
   ======================================== */

:root {
    /* ===== COLORS ===== */

    /* Corporate Colors */
    --c-exness-main: #FFD100;       /* Main accent color (golden) */
    --c-exness-light: #FFE34D;      /* Light accent */
    --c-exness-dark: #CA9717;       /* Dark accent */
    --c-exness-link: #0066CC;       /* Link color */

    /* Text Colors */
    --c-text-primary: #1A1A1A;      /* Primary text */
    --c-text-secondary: #666666;    /* Secondary text */
    --c-text-main: #000000;         /* Main text */

    /* Background Colors */
    --c-background-default: #FFFFFF;
    --c-background-paper: #F5F5F5;
    --c-background-secondary: #F3F3F3;
    --c-background-elevationL: #E0E0E0;

    /* Common Colors */
    --c-common-white: #FFFFFF;
    --c-common-black: #000000;
    --c-neutral-dark: #2C2C2C;

    /* Semantic Colors */
    --c-success-main: #10B981;      /* Success */
    --c-error-light: #EF4444;       /* Error */
    --c-warning-alert-background: #FFF3CD; /* Warning */
    --c-info-light: #0EA5E9;        /* Info */

    /* Border Color */
    --c-border: #E0E0E0;

    /* ===== FONTS ===== */

    /* Heading fonts (for large text, headings) */
    --f-country-heading-family: -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        'Noto Sans', sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    /* Simple fonts (for body text, UI elements) */
    --f-country-simple-family: -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        'Noto Sans', sans-serif;

    /* ===== TYPOGRAPHY ===== */

    /* H1 - Main page headings */
    --t-headings-h1-font-size: 32px;
    --t-headings-h1-line-height: 36px;
    --t-headings-h1-font-weight: 500;
    --t-headings-h1-letter-spacing: -0.3px;

    /* H2 - Section headings */
    --t-headings-h2-font-size: 24px;
    --t-headings-h2-line-height: 28px;
    --t-headings-h2-font-weight: 500;
    --t-headings-h2-letter-spacing: -0.25px;

    /* H3 - Subheadings */
    --t-headings-h3-font-size: 20px;
    --t-headings-h3-line-height: 24px;
    --t-headings-h3-font-weight: 500;
    --t-headings-h3-letter-spacing: -0.2px;

    /* H4 - Small headings */
    --t-headings-h4-font-size: 16px;
    --t-headings-h4-line-height: 24px;
    --t-headings-h4-font-weight: 600;
    --t-headings-h4-letter-spacing: -0.15px;

    /* ===== DIMENSIONS ===== */

    /* Container padding */
    --d-containner-padding: 40px;      /* Desktop */
    --d-containner-padding-s: 24px;    /* Tablet */
    --d-containner-padding-xs: 16px;   /* Mobile */

    /* Vertical padding */
    --d-padding--small-vertical: 14px;
    --d-padding--medium-vertical: 18px;
    --d-padding--large-vertical: 20px;

    /* Horizontal padding */
    --d-padding--small-horizontal: 24px;
    --d-padding--large-horizontal: 24px;

    /* Header and menu */
    --d-header-height: 56px;
    --d-menu-width: 100px;
}

/* ===== BASE STYLES ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--f-country-simple-family);
    background-color: var(--c-background-default);
    color: var(--c-text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== TYPOGRAPHY ===== */

h1 {
    font-family: var(--f-country-heading-family);
    font-size: var(--t-headings-h1-font-size);
    line-height: var(--t-headings-h1-line-height);
    font-weight: var(--t-headings-h1-font-weight);
    letter-spacing: var(--t-headings-h1-letter-spacing);
    color: var(--c-text-main);
}

h2 {
    font-family: var(--f-country-heading-family);
    font-size: var(--t-headings-h2-font-size);
    line-height: var(--t-headings-h2-line-height);
    font-weight: var(--t-headings-h2-font-weight);
    letter-spacing: var(--t-headings-h2-letter-spacing);
    color: var(--c-text-main);
}

h3 {
    font-family: var(--f-country-heading-family);
    font-size: var(--t-headings-h3-font-size);
    line-height: var(--t-headings-h3-line-height);
    font-weight: var(--t-headings-h3-font-weight);
    letter-spacing: var(--t-headings-h3-letter-spacing);
    color: var(--c-text-main);
}

h4 {
    font-family: var(--f-country-simple-family);
    font-size: var(--t-headings-h4-font-size);
    line-height: var(--t-headings-h4-line-height);
    font-weight: var(--t-headings-h4-font-weight);
    letter-spacing: var(--t-headings-h4-letter-spacing);
    color: var(--c-text-main);
}

p {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

/* ===== LINKS ===== */

a {
    color: var(--c-exness-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--c-exness-dark);
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */

@media (max-width: 991px) {
    h1 {
        font-size: 24px;
        line-height: 28px;
    }

    h2 {
        font-size: 20px;
        line-height: 24px;
    }
}

@media (max-width: 575px) {
    h1 {
        font-size: 18px;
        line-height: 22px;
    }

    h2 {
        font-size: 16px;
        line-height: 20px;
    }

    h3 {
        font-size: 14px;
        line-height: 18px;
    }
}

/* ===== UTILITIES ===== */

.container {
    padding-left: var(--d-containner-padding);
    padding-right: var(--d-containner-padding);
    margin: 0 auto;
    max-width: 1200px;
}

@media (max-width: 767px) {
    .container {
        padding-left: var(--d-containner-padding-s);
        padding-right: var(--d-containner-padding-s);
    }
}

@media (max-width: 575px) {
    .container {
        padding-left: var(--d-containner-padding-xs);
        padding-right: var(--d-containner-padding-xs);
    }
}