/**
 * SADO Font System
 * Responsive font sizes (rem/em) and fixed pixel sizes
 *
 * Usage:
 * - sado-fs-{size} : Responsive (rem based)
 * - sado-fs-{size}-px : Fixed pixel size
 */

:root {
    /* Base font size */
    --sado-font-base: 16px;

    /* Font weights */
    --sado-fw-light: 300;
    --sado-fw-normal: 400;
    --sado-fw-medium: 500;
    --sado-fw-semibold: 600;
    --sado-fw-bold: 700;
    --sado-fw-extrabold: 800;
}

/* ========================================
   Font Weights
   ======================================== */
.sado-fw-light { font-weight: var(--sado-fw-light) !important; }
.sado-fw-normal { font-weight: var(--sado-fw-normal) !important; }
.sado-fw-medium { font-weight: var(--sado-fw-medium) !important; }
.sado-fw-semibold { font-weight: var(--sado-fw-semibold) !important; }
.sado-fw-bold { font-weight: var(--sado-fw-bold) !important; }
.sado-fw-extrabold { font-weight: var(--sado-fw-extrabold) !important; }

/* ========================================
   Responsive Font Sizes (rem based)
   Scales with root font size
   ======================================== */
.sado-fs-10 { font-size: 0.625rem !important; }   /* 10px */
.sado-fs-11 { font-size: 0.6875rem !important; }  /* 11px */
.sado-fs-12 { font-size: 0.75rem !important; }    /* 12px */
.sado-fs-13 { font-size: 0.8125rem !important; }  /* 13px */
.sado-fs-14 { font-size: 0.875rem !important; }   /* 14px */
.sado-fs-15 { font-size: 0.9375rem !important; }  /* 15px */
.sado-fs-16 { font-size: 1rem !important; }       /* 16px */
.sado-fs-17 { font-size: 1.0625rem !important; }  /* 17px */
.sado-fs-18 { font-size: 1.125rem !important; }   /* 18px */
.sado-fs-19 { font-size: 1.1875rem !important; }  /* 19px */
.sado-fs-20 { font-size: 1.25rem !important; }    /* 20px */
.sado-fs-21 { font-size: 1.3125rem !important; }  /* 21px */
.sado-fs-22 { font-size: 1.375rem !important; }   /* 22px */
.sado-fs-23 { font-size: 1.4375rem !important; }  /* 23px */
.sado-fs-24 { font-size: 1.5rem !important; }     /* 24px */
.sado-fs-25 { font-size: 1.5625rem !important; }  /* 25px */
.sado-fs-26 { font-size: 1.625rem !important; }   /* 26px */
.sado-fs-27 { font-size: 1.6875rem !important; }  /* 27px */
.sado-fs-28 { font-size: 1.75rem !important; }    /* 28px */
.sado-fs-29 { font-size: 1.8125rem !important; }  /* 29px */
.sado-fs-30 { font-size: 1.875rem !important; }   /* 30px */
.sado-fs-32 { font-size: 2rem !important; }       /* 32px */
.sado-fs-34 { font-size: 2.125rem !important; }   /* 34px */
.sado-fs-36 { font-size: 2.25rem !important; }    /* 36px */
.sado-fs-38 { font-size: 2.375rem !important; }   /* 38px */
.sado-fs-40 { font-size: 2.5rem !important; }     /* 40px */
.sado-fs-42 { font-size: 2.625rem !important; }   /* 42px */
.sado-fs-44 { font-size: 2.75rem !important; }    /* 44px */
.sado-fs-46 { font-size: 2.875rem !important; }   /* 46px */
.sado-fs-48 { font-size: 3rem !important; }       /* 48px */
.sado-fs-50 { font-size: 3.125rem !important; }   /* 50px */
.sado-fs-52 { font-size: 3.25rem !important; }    /* 52px */
.sado-fs-54 { font-size: 3.375rem !important; }   /* 54px */
.sado-fs-56 { font-size: 3.5rem !important; }     /* 56px */
.sado-fs-58 { font-size: 3.625rem !important; }   /* 58px */
.sado-fs-60 { font-size: 3.75rem !important; }    /* 60px */
.sado-fs-64 { font-size: 4rem !important; }       /* 64px */
.sado-fs-68 { font-size: 4.25rem !important; }    /* 68px */
.sado-fs-72 { font-size: 4.5rem !important; }     /* 72px */
.sado-fs-76 { font-size: 4.75rem !important; }    /* 76px */
.sado-fs-80 { font-size: 5rem !important; }       /* 80px */
.sado-fs-84 { font-size: 5.25rem !important; }    /* 84px */
.sado-fs-88 { font-size: 5.5rem !important; }     /* 88px */
.sado-fs-92 { font-size: 5.75rem !important; }    /* 92px */
.sado-fs-96 { font-size: 6rem !important; }       /* 96px */
.sado-fs-100 { font-size: 6.25rem !important; }   /* 100px */

/* ========================================
   Fixed Pixel Font Sizes (14px - 100px)
   Does NOT scale with root font size
   ======================================== */
.sado-fs-14-px { font-size: 14px !important; }
.sado-fs-15-px { font-size: 15px !important; }
.sado-fs-16-px { font-size: 16px !important; }
.sado-fs-17-px { font-size: 17px !important; }
.sado-fs-18-px { font-size: 18px !important; }
.sado-fs-19-px { font-size: 19px !important; }
.sado-fs-20-px { font-size: 20px !important; }
.sado-fs-21-px { font-size: 21px !important; }
.sado-fs-22-px { font-size: 22px !important; }
.sado-fs-23-px { font-size: 23px !important; }
.sado-fs-24-px { font-size: 24px !important; }
.sado-fs-25-px { font-size: 25px !important; }
.sado-fs-26-px { font-size: 26px !important; }
.sado-fs-27-px { font-size: 27px !important; }
.sado-fs-28-px { font-size: 28px !important; }
.sado-fs-29-px { font-size: 29px !important; }
.sado-fs-30-px { font-size: 30px !important; }
.sado-fs-31-px { font-size: 31px !important; }
.sado-fs-32-px { font-size: 32px !important; }
.sado-fs-33-px { font-size: 33px !important; }
.sado-fs-34-px { font-size: 34px !important; }
.sado-fs-35-px { font-size: 35px !important; }
.sado-fs-36-px { font-size: 36px !important; }
.sado-fs-37-px { font-size: 37px !important; }
.sado-fs-38-px { font-size: 38px !important; }
.sado-fs-39-px { font-size: 39px !important; }
.sado-fs-40-px { font-size: 40px !important; }
.sado-fs-42-px { font-size: 42px !important; }
.sado-fs-44-px { font-size: 44px !important; }
.sado-fs-46-px { font-size: 46px !important; }
.sado-fs-48-px { font-size: 48px !important; }
.sado-fs-50-px { font-size: 50px !important; }
.sado-fs-52-px { font-size: 52px !important; }
.sado-fs-54-px { font-size: 54px !important; }
.sado-fs-56-px { font-size: 56px !important; }
.sado-fs-58-px { font-size: 58px !important; }
.sado-fs-60-px { font-size: 60px !important; }
.sado-fs-62-px { font-size: 62px !important; }
.sado-fs-64-px { font-size: 64px !important; }
.sado-fs-66-px { font-size: 66px !important; }
.sado-fs-68-px { font-size: 68px !important; }
.sado-fs-70-px { font-size: 70px !important; }
.sado-fs-72-px { font-size: 72px !important; }
.sado-fs-74-px { font-size: 74px !important; }
.sado-fs-76-px { font-size: 76px !important; }
.sado-fs-78-px { font-size: 78px !important; }
.sado-fs-80-px { font-size: 80px !important; }
.sado-fs-82-px { font-size: 82px !important; }
.sado-fs-84-px { font-size: 84px !important; }
.sado-fs-86-px { font-size: 86px !important; }
.sado-fs-88-px { font-size: 88px !important; }
.sado-fs-90-px { font-size: 90px !important; }
.sado-fs-92-px { font-size: 92px !important; }
.sado-fs-94-px { font-size: 94px !important; }
.sado-fs-96-px { font-size: 96px !important; }
.sado-fs-98-px { font-size: 98px !important; }
.sado-fs-100-px { font-size: 100px !important; }

/* ========================================
   Line Heights
   ======================================== */
.sado-lh-1 { line-height: 1 !important; }
.sado-lh-sm { line-height: 1.25 !important; }
.sado-lh-base { line-height: 1.5 !important; }
.sado-lh-lg { line-height: 1.75 !important; }
.sado-lh-xl { line-height: 2 !important; }

/* ========================================
   Letter Spacing
   ======================================== */
.sado-ls-tighter { letter-spacing: -0.05em !important; }
.sado-ls-tight { letter-spacing: -0.025em !important; }
.sado-ls-normal { letter-spacing: 0 !important; }
.sado-ls-wide { letter-spacing: 0.025em !important; }
.sado-ls-wider { letter-spacing: 0.05em !important; }
.sado-ls-widest { letter-spacing: 0.1em !important; }

/* ========================================
   Text Transform
   ======================================== */
.sado-uppercase { text-transform: uppercase !important; }
.sado-lowercase { text-transform: lowercase !important; }
.sado-capitalize { text-transform: capitalize !important; }
.sado-normal-case { text-transform: none !important; }

/* ========================================
   Text Decoration
   ======================================== */
.sado-underline { text-decoration: underline !important; }
.sado-line-through { text-decoration: line-through !important; }
.sado-no-underline { text-decoration: none !important; }

/* ========================================
   Text Alignment
   ======================================== */
.sado-text-left { text-align: left !important; }
.sado-text-center { text-align: center !important; }
.sado-text-right { text-align: right !important; }
.sado-text-justify { text-align: justify !important; }

/* ========================================
   Heading Styles
   ======================================== */
.sado-h1 {
    font-size: 2.5rem;
    font-weight: var(--sado-fw-bold);
    line-height: 1.2;
}
.sado-h2 {
    font-size: 2rem;
    font-weight: var(--sado-fw-bold);
    line-height: 1.25;
}
.sado-h3 {
    font-size: 1.75rem;
    font-weight: var(--sado-fw-semibold);
    line-height: 1.3;
}
.sado-h4 {
    font-size: 1.5rem;
    font-weight: var(--sado-fw-semibold);
    line-height: 1.35;
}
.sado-h5 {
    font-size: 1.25rem;
    font-weight: var(--sado-fw-medium);
    line-height: 1.4;
}
.sado-h6 {
    font-size: 1rem;
    font-weight: var(--sado-fw-medium);
    line-height: 1.5;
}

/* ========================================
   Display Headings
   ======================================== */
.sado-display-1 { font-size: 5rem; font-weight: var(--sado-fw-light); line-height: 1.1; }
.sado-display-2 { font-size: 4.5rem; font-weight: var(--sado-fw-light); line-height: 1.1; }
.sado-display-3 { font-size: 4rem; font-weight: var(--sado-fw-light); line-height: 1.1; }
.sado-display-4 { font-size: 3.5rem; font-weight: var(--sado-fw-light); line-height: 1.1; }
.sado-display-5 { font-size: 3rem; font-weight: var(--sado-fw-light); line-height: 1.1; }
.sado-display-6 { font-size: 2.5rem; font-weight: var(--sado-fw-light); line-height: 1.1; }

/* ========================================
   Paragraph & Lead
   ======================================== */
.sado-lead {
    font-size: 1.25rem;
    font-weight: var(--sado-fw-light);
    line-height: 1.6;
}
.sado-small {
    font-size: 0.875rem;
}
.sado-tiny {
    font-size: 0.75rem;
}