/* ============================================
   GLOBAL FONT STANDARDIZATION SYSTEM
   ============================================ */

:root {
    /* Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;

    /* Base Font Size - 16px = 1rem */
    --font-base: 16px;

    /* Font Sizes - Desktop */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-md: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */
    --font-size-4xl: 2.25rem;    /* 36px */
    --font-size-5xl: 3rem;       /* 48px */
    --font-size-6xl: 3.75rem;    /* 60px */
    --font-size-7xl: 4.5rem;     /* 72px */

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-snug: 1.4;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    --line-height-loose: 2;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.04em;
    --letter-spacing-widest: 0.08em;
}

/* Tablet Breakpoint (768px - 1024px) */
@media (max-width: 1024px) {
    :root {
        --font-size-xs: 0.75rem;    /* 12px */
        --font-size-sm: 0.813rem;   /* 13px */
        --font-size-md: 0.938rem;   /* 15px */
        --font-size-lg: 1.063rem;   /* 17px */
        --font-size-xl: 1.188rem;   /* 19px */
        --font-size-2xl: 1.375rem;  /* 22px */
        --font-size-3xl: 1.625rem;  /* 26px */
        --font-size-4xl: 2rem;      /* 32px */
        --font-size-5xl: 2.5rem;    /* 40px */
        --font-size-6xl: 3rem;      /* 48px */
        --font-size-7xl: 3.5rem;    /* 56px */
    }
}

/* Mobile Breakpoint (< 768px) */
@media (max-width: 767px) {
    :root {
        --font-size-xs: 0.688rem;   /* 11px */
        --font-size-sm: 0.75rem;    /* 12px */
        --font-size-md: 0.875rem;   /* 14px */
        --font-size-lg: 1rem;       /* 16px */
        --font-size-xl: 1.125rem;   /* 18px */
        --font-size-2xl: 1.25rem;   /* 20px */
        --font-size-3xl: 1.5rem;    /* 24px */
        --font-size-4xl: 1.75rem;   /* 28px */
        --font-size-5xl: 2rem;      /* 32px */
        --font-size-6xl: 2.5rem;    /* 40px */
        --font-size-7xl: 3rem;      /* 48px */
    }
}

/* Typography Classes */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
.text-6xl { font-size: var(--font-size-6xl); }
.text-7xl { font-size: var(--font-size-7xl); }

/* Global Typography Reset */
* {
    font-family: var(--font-primary);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

/* Default Heading Sizes */
h1 { font-size: var(--font-size-5xl); }
h2 { font-size: var(--font-size-4xl); }
h3 { font-size: var(--font-size-3xl); }
h4 { font-size: var(--font-size-2xl); }
h5 { font-size: var(--font-size-xl); }
h6 { font-size: var(--font-size-lg); }

/* Body Text */
p {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-normal);
}

/* Responsive Font Utilities */
@media (max-width: 1024px) {
    h1 { font-size: var(--font-size-4xl); }
    h2 { font-size: var(--font-size-3xl); }
    h3 { font-size: var(--font-size-2xl); }
}

@media (max-width: 767px) {
    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
    h3 { font-size: var(--font-size-xl); }
}

/* Global utilities */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

html, body {
    overflow-x: hidden !important;
}

section[id] {
    scroll-margin-top: 70px;
}

img {
    max-width: 100% !important;
    height: auto !important;
}

table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}