/* ========================================
   AL HOMES - TYPOGRAPHY CSS v1.0
   ========================================
   TWO FONT SYSTEM (Figma Specs):
   
   1. SOFIA PRO / SOFIA SANS - Headers/Titles ONLY
      - H1, H2, H3, H4, H5, H6
      - Weight: 400
      - Color: #2A2A2A
   
   2. AFACAD FLUX - Everything Else
      - Navigation (18px, 400)
      - Body text (16-24px, 300)
      - Buttons
      - Descriptions
      - Dropdown text
======================================== */

/* ========================================
   CSS VARIABLES - TYPOGRAPHY
======================================== */
:root {
    /* Font Families */
    --font-heading: 'Sofia Pro', 'Sofia Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Afacad Flux', -apple-system, BlinkMacSystemFont, sans-serif;
    
    /* Colors */
    --color-dark-text: #2A2A2A;
    --color-light-text: #666666;
    --color-white: #FFFFFF;
    --color-brown: #5A4F42;
    --color-brown-light: #766C61;
    
    /* Font Weights */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
}

/* ========================================
   BASE TYPOGRAPHY - AFACAD FLUX
======================================== */
body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-light);
    font-style: normal;
    line-height: normal;
    color: var(--color-dark-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   HEADINGS - SOFIA PRO / SOFIA SANS
======================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    font-style: normal;
    line-height: normal;
    color: var(--color-dark-text);
    margin: 0 0 0.5em 0;
}

h1, .h1 { font-size: 56px; }
h2, .h2 { font-size: 48px; }
h3, .h3 { font-size: 36px; }
h4, .h4 { font-size: 28px; }
h5, .h5 { font-size: 24px; }
h6, .h6 { font-size: 20px; }

/* ========================================
   PARAGRAPHS - AFACAD FLUX
======================================== */
p {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: var(--weight-light);
    font-style: normal;
    line-height: 1.6;
    color: var(--color-dark-text);
    margin: 0 0 1em 0;
}

/* Default text from Figma: 24px, 300 weight */
.text-default,
.text-large,
.lead {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: var(--weight-light);
    line-height: normal;
}

.text-small { font-size: 14px; }
.text-xs { font-size: 12px; }

/* ========================================
   HERO SECTION
======================================== */
.hero-title {
    font-family: var(--font-heading);
    font-size: 56px;
    font-weight: var(--weight-regular);
    color: var(--color-white);
    line-height: 1.1;
}

.hero-subtitle,
.hero-description {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: var(--weight-light);
    color: var(--color-white);
    line-height: normal;
}

/* ========================================
   BUTTONS - AFACAD FLUX
======================================== */
button,
.button,
.btn,
input[type="submit"],
input[type="button"] {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
}

/* ========================================
   FORMS - AFACAD FLUX
======================================== */
input,
textarea,
select,
label {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--weight-light);
}

/* ========================================
   UTILITY CLASSES
======================================== */
.font-heading { font-family: var(--font-heading) !important; }
.font-body { font-family: var(--font-body) !important; }
.font-light { font-weight: var(--weight-light) !important; }
.font-regular { font-weight: var(--weight-regular) !important; }
.font-medium { font-weight: var(--weight-medium) !important; }
.font-semibold { font-weight: var(--weight-semibold) !important; }
.font-bold { font-weight: var(--weight-bold) !important; }
.text-dark { color: var(--color-dark-text) !important; }
.text-white { color: var(--color-white) !important; }
.text-light { color: var(--color-light-text) !important; }

/* ========================================
   RESPONSIVE TYPOGRAPHY
======================================== */
@media (max-width: 1024px) {
    h1, .h1 { font-size: 48px; }
    h2, .h2 { font-size: 40px; }
    h3, .h3 { font-size: 32px; }
    .hero-title { font-size: 48px; }
    .hero-subtitle, .text-large, .lead { font-size: 20px; }
}

@media (max-width: 768px) {
    h1, .h1 { font-size: 36px; }
    h2, .h2 { font-size: 32px; }
    h3, .h3 { font-size: 28px; }
    h4, .h4 { font-size: 24px; }
    p { font-size: 16px; }
    .text-large, .lead, .text-default { font-size: 18px; }
    .hero-title { font-size: 36px; }
    .hero-subtitle { font-size: 18px; }
}

@media (max-width: 480px) {
    h1, .h1 { font-size: 32px; }
    h2, .h2 { font-size: 28px; }
    h3, .h3 { font-size: 24px; }
    .hero-title { font-size: 32px; }
}

/* ========================================
   END - TYPOGRAPHY CSS v1.0
======================================== */