/* ============================================
CARBON DESIGN SYSTEM TYPOGRAPHY
============================================ */

/* 1. BASE SETUP - Define root font size */
:root {
    /* Base font size: 16px = 1rem */
    font-size: 16px;
    
    /* Define all type scales as CSS variables */
    /* Using Carbon's type scale with rem units */
    
    /* Display styles - for hero sections */
    --carbon-display-04-size: 4.75rem;    /* 76px */
    --carbon-display-04-line-height: 5.25rem; /* 84px */
    --carbon-display-04-weight: 300;
    
    --carbon-display-03-size: 3.375rem;   /* 54px */
    --carbon-display-03-line-height: 4rem; /* 64px */
    --carbon-display-03-weight: 300;
    
    --carbon-display-02-size: 2.625rem;   /* 42px */
    --carbon-display-02-line-height: 3rem; /* 48px */
    --carbon-display-02-weight: 400;
    
    --carbon-display-01-size: 2rem;       /* 32px */
    --carbon-display-01-line-height: 2.5rem; /* 40px */
    --carbon-display-01-weight: 400;
    
    /* Productive headings - for section headers */
    --carbon-heading-07-size: 3.375rem;   /* 54px */
    --carbon-heading-07-line-height: 4rem; /* 64px */
    --carbon-heading-07-weight: 300;
    
    --carbon-heading-06-size: 2.625rem;   /* 42px */
    --carbon-heading-06-line-height: 3rem; /* 48px */
    --carbon-heading-06-weight: 300;
    
    --carbon-heading-05-size: 2rem;       /* 32px */
    --carbon-heading-05-line-height: 2.5rem; /* 40px */
    --carbon-heading-05-weight: 400;
    
    --carbon-heading-04-size: 1.75rem;    /* 28px */
    --carbon-heading-04-line-height: 2.25rem; /* 36px */
    --carbon-heading-04-weight: 400;
    
    --carbon-heading-03-size: 1.25rem;    /* 20px */
    --carbon-heading-03-line-height: 1.75rem; /* 28px */
    --carbon-heading-03-weight: 400;
    
    --carbon-heading-02-size: 1rem;       /* 16px */
    --carbon-heading-02-line-height: 1.5rem; /* 24px */
    --carbon-heading-02-weight: 600;
    
    --carbon-heading-01-size: 0.875rem;   /* 14px */
    --carbon-heading-01-line-height: 1.25rem; /* 20px */
    --carbon-heading-01-weight: 600;
    
    /* Body styles */
    --carbon-body-02-size: 1rem;          /* 16px */
    --carbon-body-02-line-height: 1.5rem; /* 24px */
    --carbon-body-02-weight: 400;
    
    --carbon-body-01-size: 0.875rem;      /* 14px */
    --carbon-body-01-line-height: 1.25rem; /* 20px */
    --carbon-body-01-weight: 400;
    
    /* Helper text */
    --carbon-helper-text-size: 0.75rem;   /* 12px */
    --carbon-helper-text-line-height: 1rem; /* 16px */
    --carbon-helper-text-weight: 400;
    
    /* Label */
    --carbon-label-size: 0.75rem;         /* 12px */
    --carbon-label-line-height: 1rem;     /* 16px */
    --carbon-label-weight: 400;
    
    /* Code */
    --carbon-code-02-size: 0.875rem;      /* 14px */
    --carbon-code-02-line-height: 1.25rem; /* 20px */
    --carbon-code-02-weight: 400;
    
    --carbon-code-01-size: 0.75rem;       /* 12px */
    --carbon-code-01-line-height: 1rem;   /* 16px */
    --carbon-code-01-weight: 400;
}

/* 2. GLOBAL DEFAULTS */
body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: var(--carbon-body-02-size);
    line-height: var(--carbon-body-02-line-height);
    font-weight: var(--carbon-body-02-weight);
    color: #161616; /* Carbon Gray 100 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 3. UTILITY CLASSES - Use these throughout your HTML */

/* Display styles */
.carbon-display-04 {
    font-size: var(--carbon-display-04-size);
    line-height: var(--carbon-display-04-line-height);
    font-weight: var(--carbon-display-04-weight);
    letter-spacing: 0;
}

.carbon-display-03 {
    font-size: var(--carbon-display-03-size);
    line-height: var(--carbon-display-03-line-height);
    font-weight: var(--carbon-display-03-weight);
    letter-spacing: 0;
}

.carbon-display-02 {
    font-size: var(--carbon-display-02-size);
    line-height: var(--carbon-display-02-line-height);
    font-weight: var(--carbon-display-02-weight);
    letter-spacing: 0;
}

.carbon-display-01 {
    font-size: var(--carbon-display-01-size);
    line-height: var(--carbon-display-01-line-height);
    font-weight: var(--carbon-display-01-weight);
    letter-spacing: 0;
}

/* Heading styles */
.carbon-heading-07 {
    font-size: var(--carbon-heading-07-size);
    line-height: var(--carbon-heading-07-line-height);
    font-weight: var(--carbon-heading-07-weight);
    letter-spacing: 0;
}

.carbon-heading-06 {
    font-size: var(--carbon-heading-06-size);
    line-height: var(--carbon-heading-06-line-height);
    font-weight: var(--carbon-heading-06-weight);
    letter-spacing: 0;
}

.carbon-heading-05 {
    font-size: var(--carbon-heading-05-size);
    line-height: var(--carbon-heading-05-line-height);
    font-weight: var(--carbon-heading-05-weight);
    letter-spacing: 0;
}

.carbon-heading-04 {
    font-size: var(--carbon-heading-04-size);
    line-height: var(--carbon-heading-04-line-height);
    font-weight: var(--carbon-heading-04-weight);
    letter-spacing: 0;
}

.carbon-heading-03 {
    font-size: var(--carbon-heading-03-size);
    line-height: var(--carbon-heading-03-line-height);
    font-weight: var(--carbon-heading-03-weight);
    letter-spacing: 0;
}

.carbon-heading-02 {
    font-size: var(--carbon-heading-02-size);
    line-height: var(--carbon-heading-02-line-height);
    font-weight: var(--carbon-heading-02-weight);
    letter-spacing: 0;
}

.carbon-heading-01 {
    font-size: var(--carbon-heading-01-size);
    line-height: var(--carbon-heading-01-line-height);
    font-weight: var(--carbon-heading-01-weight);
    letter-spacing: 0;
}

/* Body styles */
.carbon-body-02 {
    font-size: var(--carbon-body-02-size);
    line-height: var(--carbon-body-02-line-height);
    font-weight: var(--carbon-body-02-weight);
    letter-spacing: 0.16px;
}

.carbon-body-01 {
    font-size: var(--carbon-body-01-size);
    line-height: var(--carbon-body-01-line-height);
    font-weight: var(--carbon-body-01-weight);
    letter-spacing: 0.16px;
}

/* Helper text */
.carbon-helper-text {
    font-size: var(--carbon-helper-text-size);
    line-height: var(--carbon-helper-text-line-height);
    font-weight: var(--carbon-helper-text-weight);
    letter-spacing: 0.32px;
}

/* Label */
.carbon-label {
    font-size: var(--carbon-label-size);
    line-height: var(--carbon-label-line-height);
    font-weight: var(--carbon-label-weight);
    letter-spacing: 0.32px;
}

/* Code */
.carbon-code-02 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--carbon-code-02-size);
    line-height: var(--carbon-code-02-line-height);
    font-weight: var(--carbon-code-02-weight);
    letter-spacing: 0.32px;
}

.carbon-code-01 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: var(--carbon-code-01-size);
    line-height: var(--carbon-code-01-line-height);
    font-weight: var(--carbon-code-01-weight);
    letter-spacing: 0.32px;
}

/* 4. SEMANTIC HTML DEFAULTS */
h1 {
    font-size: var(--carbon-heading-06-size);
    line-height: var(--carbon-heading-06-line-height);
    font-weight: var(--carbon-heading-06-weight);
    margin: 0 0 1.5rem 0;
}

h2 {
    font-size: var(--carbon-heading-05-size);
    line-height: var(--carbon-heading-05-line-height);
    font-weight: var(--carbon-heading-05-weight);
    margin: 0 0 1.25rem 0;
}

h3 {
    font-size: var(--carbon-heading-04-size);
    line-height: var(--carbon-heading-04-line-height);
    font-weight: var(--carbon-heading-04-weight);
    margin: 0 0 1rem 0;
}

h4 {
    font-size: var(--carbon-heading-03-size);
    line-height: var(--carbon-heading-03-line-height);
    font-weight: var(--carbon-heading-03-weight);
    margin: 0 0 0.75rem 0;
}

h5 {
    font-size: var(--carbon-heading-02-size);
    line-height: var(--carbon-heading-02-line-height);
    font-weight: var(--carbon-heading-02-weight);
    margin: 0 0 0.5rem 0;
}

h6 {
    font-size: var(--carbon-heading-01-size);
    line-height: var(--carbon-heading-01-line-height);
    font-weight: var(--carbon-heading-01-weight);
    margin: 0 0 0.5rem 0;
}

p {
    font-size: var(--carbon-body-02-size);
    line-height: var(--carbon-body-02-line-height);
    font-weight: var(--carbon-body-02-weight);
    margin: 0 0 2rem 0;

    &.lead {
        font-size: var(--carbon-heading-03-size);
        line-height: var(--carbon-heading-03-line-height);
        font-weight: var(--carbon-heading-03-weight);
    }
}

/* 5. RESPONSIVE TYPOGRAPHY */
@media (max-width: 672px) {
    :root {
        /* Slightly reduce display sizes on mobile */
        --carbon-display-04-size: 3.375rem;
        --carbon-display-04-line-height: 4rem;
        
        --carbon-display-03-size: 2.625rem;
        --carbon-display-03-line-height: 3rem;
        
        --carbon-display-02-size: 2rem;
        --carbon-display-02-line-height: 2.5rem;
        
        --carbon-display-01-size: 1.75rem;
        --carbon-display-01-line-height: 2.25rem;
        
        --carbon-heading-07-size: 2.625rem;
        --carbon-heading-07-line-height: 3rem;
        
        --carbon-heading-06-size: 2rem;
        --carbon-heading-06-line-height: 2.5rem;
        
        --carbon-heading-05-size: 1.75rem;
        --carbon-heading-05-line-height: 2.25rem;
    }
}