/* styles-base.css - Base styles: font-face, CSS variables, reset */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Inter-400.woff2') format('woff2'), url('../fonts/Inter-400.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Inter-500.woff2') format('woff2'), url('../fonts/Inter-500.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Inter-600.woff2') format('woff2'), url('../fonts/Inter-600.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Inter-700.woff2') format('woff2'), url('../fonts/Inter-700.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/NotoSansArabic-400.woff2') format('woff2'), url('../fonts/NotoSansArabic-400.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/NotoSansArabic-500.woff2') format('woff2'), url('../fonts/NotoSansArabic-500.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/NotoSansArabic-600.woff2') format('woff2'), url('../fonts/NotoSansArabic-600.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/NotoSansArabic-700.woff2') format('woff2'), url('../fonts/NotoSansArabic-700.ttf') format('truetype');
}


:root {
    /* Dark Mode - Default */
    --color-primary: #a9c7ff;
    --color-primary-dark: #264777;
    --color-on-primary: #ffffff;
    --color-bg-primary: #111318;
    --color-bg-secondary: #1d2024;
    --color-bg-header: rgba(17, 19, 24, 0.8);
    --color-text-primary: #e2e2e9;
    --color-text-secondary: #c4c6cf;
    --color-text-muted: #8e9099;
    --color-accent-glow: rgba(169, 199, 255, 0.12);
    --color-border: rgba(142, 144, 153, 0.3);
    --color-card-bg: linear-gradient(135deg, #264777, #405f90);
    --color-phone-frame: #191c20;
    --color-phone-screen: #111318;
    --color-phone-shadow: rgba(0, 0, 0, 0.5);
    --color-hover-bg: rgba(255, 255, 255, 0.06);
    --color-active-bg: rgba(169, 199, 255, 0.15);
    --color-dropdown-bg: #1d2024;
    --color-surface-container: #1d2024;
    --color-surface-container-high: #282a2f;
    --color-surface-container-highest: #33353a;
    --color-success: #A5D6A7;
    --color-success-bg: rgba(27, 94, 46, 0.15);
    --color-error: #ffb4ab;
    --color-error-bg: rgba(255, 180, 171, 0.15);
    --color-tertiary: #dcbce1;
    --color-tertiary-bg: rgba(220, 188, 225, 0.15);
    --color-warning: #FFF59D;
    --color-warning-bg: rgba(141, 110, 0, 0.15);
    /* Legacy mappings */
    --bg-primary: var(--color-bg-primary);
    --bg-secondary: var(--color-bg-secondary);
    --bg-header: var(--color-bg-header);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --accent: var(--color-primary);
    --accent-light: var(--color-primary);
    --accent-glow: var(--color-accent-glow);
    --border: var(--color-border);
    --card-bg: var(--color-card-bg);
    --phone-frame: var(--color-phone-frame);
    --phone-screen: var(--color-phone-screen);
    --phone-shadow: var(--color-phone-shadow);
    --hover-bg: var(--color-hover-bg);
    --active-bg: var(--color-active-bg);
    --dropdown-bg: var(--color-dropdown-bg);
    --surface-container: var(--color-surface-container);
    --surface-container-high: var(--color-surface-container-high);
    --surface-container-highest: var(--color-surface-container-highest);
    --success: var(--color-success);
    --success-bg: var(--color-success-bg);
    --error: var(--color-error);
    --error-bg: var(--color-error-bg);
    --tertiary: var(--color-tertiary);
    --tertiary-bg: var(--color-tertiary-bg);
    --warning: var(--color-warning);
    --warning-bg: var(--color-warning-bg);

    /* Typography Hierarchy */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-arabic: 'Noto Sans Arabic', sans-serif;

    /* Headings - Kalın */
    --font-weight-heading: 700;
    --font-weight-subheading: 600;
    --font-weight-body: 400;
    --font-weight-medium: 500;

    /* Font Sizes (rem) */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;

    /* Spacing Scale (rem-based for responsiveness) */
    --space-2xs: 0.25rem;  /* 4px */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 0.75rem;   /* 12px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 2.5rem;   /* 40px */
    --space-3xl: 3rem;     /* 48px */

    /* Card-specific spacing */
    --card-padding-sm: var(--space-sm);
    --card-padding-md: var(--space-md);
    --card-padding-lg: var(--space-lg);
    --card-gap-sm: var(--space-sm);
    --card-gap-md: var(--space-md);
    --card-gap-lg: var(--space-lg);
    --card-radius-sm: 6px;
    --card-radius-md: 8px;
    --card-radius-lg: 14px;
}


html {
    box-sizing: border-box;
}

[data-theme="light"] {
    --color-primary: #405f90;
    --color-primary-dark: #264777;
    --color-on-primary: #ffffff;
    --color-bg-primary: #f9f9ff;
    --color-bg-secondary: #ededf4;
    --color-bg-header: rgba(249, 249, 255, 0.8);
    --color-text-primary: #191c20;
    --color-text-secondary: #44474e;
    --color-text-muted: #74777f;
    --color-accent-glow: rgba(64, 95, 144, 0.15);
    --color-border: rgba(116, 119, 127, 0.3);
    --color-card-bg: linear-gradient(135deg, #405f90, #264777);
    --color-phone-frame: #191c20;
    --color-phone-screen: #ffffff;
    --color-phone-shadow: rgba(0, 0, 0, 0.15);
    --color-hover-bg: rgba(0, 0, 0, 0.05);
    --color-active-bg: rgba(64, 95, 144, 0.1);
    --color-dropdown-bg: #ffffff;
    --color-surface-container: #ededf4;
    --color-surface-container-high: #e7e8ee;
    --color-surface-container-highest: #e2e2e9;
    --color-success: #074D24;
    --color-success-bg: rgba(196, 238, 208, 0.15);
    --color-error: #ba1a1a;
    --color-error-bg: rgba(186, 26, 26, 0.15);
    --color-tertiary: #6f5675;
    --color-tertiary-bg: rgba(111, 86, 117, 0.15);
    --color-warning: #563200;
    --color-warning-bg: rgba(255, 224, 130, 0.15);

    /* Inherit spacing variables from dark mode */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 3rem;
    --card-padding-sm: var(--space-sm);
    --card-padding-md: var(--space-md);
    --card-padding-lg: var(--space-lg);
    --card-gap-sm: var(--space-sm);
    --card-gap-md: var(--space-md);
    --card-gap-lg: var(--space-lg);
    --card-radius-sm: 6px;
    --card-radius-md: 8px;
    --card-radius-lg: 14px;
}

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

*, *::before, *::after {
    box-sizing: inherit;
    max-width: 100%;
}

.is-hidden {
    display: none !important;
}

html, body {
    overflow-x: clip;
}

html {
    scrollbar-width: none;
    overflow-y: auto;
    overflow-x: auto;
}

html::-webkit-scrollbar {
    display: none;
}

@media (max-width: 1024px) {
    html {
        overflow: auto !important;
        overflow-x: clip !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    html::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body {
        overflow-x: clip !important;
        overflow-y: auto !important;
        min-height: auto !important;
        display: block !important;
        max-width: 100vw !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    body::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    body.index-page {
        display: block !important;
        min-height: auto !important;
        max-width: 100vw !important;
    }
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    display: block;
    position: relative;
    font-weight: var(--font-weight-body);
    line-height: var(--leading-normal);
}

body.index-page {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-primary);
    z-index: -1;
    pointer-events: none;
}

.page-content {
    flex: 1;
    padding-top: 64px;
}

.terms-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 88px 24px 100px;
}


/* Typography Hierarchy */
/* Headings - Bold */
h1, .h1 {
    font-size: var(--text-5xl);
    font-weight: var(--font-weight-heading);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

h2, .h2 {
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-heading);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

h3, .h3 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-subheading);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
}

h4, .h4 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-subheading);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
}

h5, .h5 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

h6, .h6 {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-wide);
}

/* Body text - Regular/Thin */
p, .body-text, .text-body {
    font-size: var(--text-base);
    font-weight: var(--font-weight-body);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-normal);
}

small, .small, .text-small {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-body);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
}

.caption, .text-caption {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-body);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
}

/* Armenian/Arabic languages - Use Noto Sans Arabic */
html[lang="ar"],
html[lang="arm"] {
    font-family: var(--font-family-arabic);
}

/* RTL-specific typography adjustments */
html[dir="rtl"] {
    font-family: var(--font-family-arabic);
}