@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');
@import url('design-system.css');
@import url('glass.css');

/* 1. Global Reset & Base Typography */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    /* Base for rem */
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-main);
    background-color: var(--bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 2. Heading Hierarchy */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    color: var(--secondary);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    margin-bottom: 1.5rem;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 700;
}

h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
}

h4 {
    font-size: var(--fs-h4);
    font-weight: 600;
}

/* 3. Text Components */
p {
    margin-bottom: 1.25rem;
}

small,
.text-small {
    font-size: var(--fs-small);
    line-height: 1.5;
}

.font-medium {
    font-weight: 500;
}

.font-bold {
    font-weight: 600;
}

.font-black {
    font-weight: 700;
}

.text-muted {
    color: var(--text-muted);
}

.text-balance {
    text-wrap: balance;
}

/* 4. UI Components Typography */
.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: var(--ls-ui);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-full);
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    border: none;
}

.nav-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: var(--ls-ui);
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.2s ease;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* 5. Utility Spacing */
.section-title {
    margin-bottom: 3rem;
    text-align: center;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media (max-width: 640px) {
    .container {
        padding: 0 1.25rem;
    }
}
/* Task 4 & Task 2: Anchor and Title overrides */
article a { color: var(--primary, #0ea5e9); text-decoration: none; transition: none; }
article a:hover { text-decoration: underline; color: var(--primary, #0ea5e9); transform: none; }
article h1:hover, article h2:hover, article h3:hover, article h4:hover, article h5:hover, article h6:hover, article .title:hover, article .article-title:hover, article .post-title:hover, article .heading:hover { color: inherit !important; transform: none !important; text-decoration: none !important; transition: none !important; scale: 1 !important; }