/* ============================================================
   HUDCO WEBSITE TYPOGRAPHY
   DBIM TYPOGRAPHY SYSTEM
   Noto Sans / Responsive Scale
============================================================ */


/* ============================================================
   TYPOGRAPHY VARIABLES
============================================================ */

:root {
    /* --------------------------------------------------------
       FONT FAMILY
       DBIM Primary Typeface
    -------------------------------------------------------- */

    --font-family-primary: "Noto Sans", "Noto Sans Devanagari", Arial, sans-serif;
    /* --------------------------------------------------------
       FONT WEIGHTS
    -------------------------------------------------------- */

    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    /* --------------------------------------------------------
       DESKTOP TYPE SCALE
       DBIM
    -------------------------------------------------------- */

    --fs-desktop-h1: 36px;
    --fs-desktop-h2: 24px;
    --fs-desktop-h3: 20px;
    --fs-desktop-p1: 16px;
    --fs-desktop-p2: 14px;
    --fs-desktop-small: 12px;
    /* --------------------------------------------------------
       MOBILE TYPE SCALE
       DBIM
    -------------------------------------------------------- */

    --fs-mobile-h1: 24px;
    --fs-mobile-h2: 20px;
    --fs-mobile-h3: 16px;
    --fs-mobile-p1: 14px;
    --fs-mobile-p2: 12px;
    --fs-mobile-small: 10px;
    /* --------------------------------------------------------
       LINE HEIGHTS
       DBIM recommends 1.2 – 1.5
    -------------------------------------------------------- */

    --lh-heading-1: 1.2;
    --lh-heading-2: 1.25;
    --lh-heading-3: 1.3;
    --lh-body: 1.5;
    --lh-compact: 1.4;
    /* --------------------------------------------------------
       TEXT COLOUR
       Uses approved functional palette
    -------------------------------------------------------- */

    --text-color: var(--text-primary);
}


/* ============================================================
   BASE TYPOGRAPHY
============================================================ */

html {
    font-family: var(--font-family-primary);
}


body {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-family-primary);
    /*
       Paragraph 1 becomes the normal readable
       content size on desktop.
    */
    font-size: var(--fs-desktop-p1);
    font-weight: var(--font-regular);
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   HEADINGS
============================================================ */

h1,
.heading-1 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-desktop-h1);
    font-weight: var(--font-bold);
    line-height: var(--lh-heading-1);
}


h2,
.heading-2 {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-desktop-h2);
    font-weight: var(--font-bold);
    line-height: var(--lh-heading-2);
}


h3,
.heading-3,
.subtitle {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-desktop-h3);
    font-weight: var(--font-bold);
    line-height: var(--lh-heading-3);
}


/* ============================================================
   PARAGRAPH 1
   PRIMARY / NORMAL PAGE CONTENT
============================================================ */

p,
.paragraph-1,
.text-large {
    font-size: var(--fs-desktop-p1);
    font-weight: var(--font-regular);
    line-height: var(--lh-body);
}


/*
   Utility classes should not impose margins.
   Native <p> receives normal paragraph spacing separately.
*/

.paragraph-1,
.text-large {
    margin: 0;
}


p {
    margin-top: 0;
    margin-bottom: 1rem;
}


/* ============================================================
   PARAGRAPH 2
   SECONDARY / COMPACT CONTENT
============================================================ */

.paragraph-2,
.text-medium {
    margin: 0;
    font-size: var(--fs-desktop-p2);
    font-weight: var(--font-regular);
    line-height: var(--lh-body);
}


/* ============================================================
   SMALL TEXT
   LABELS / CAPTIONS / META INFORMATION
============================================================ */

.small-text-1,
.text-small {
    margin: 0;
    font-size: var(--fs-desktop-small);
    font-weight: var(--font-regular);
    line-height: var(--lh-compact);
}


/* ============================================================
   FONT WEIGHT UTILITIES
============================================================ */

.font-regular {
    font-weight: var(--font-regular);
}


.font-medium {
    font-weight: var(--font-medium);
}


.font-semibold {
    font-weight: var(--font-semibold);
}


.font-bold {
    font-weight: var(--font-bold);
}


/* ============================================================
   CONTENT USAGE UTILITIES
============================================================ */

/*
   Recommended for:
   - page descriptions
   - section descriptions
   - standard list text
   - important card content
   - tender / disclosure details
   - contact information
*/

.content-text,
.section-description,
.page-description,
.detail-value {
    font-size: var(--fs-desktop-p1);
    font-weight: var(--font-regular);
    line-height: var(--lh-body);
}


/*
   Recommended for:
   - supporting text
   - secondary descriptions
   - table body text where space is limited
   - metadata
   - helper content
*/

.secondary-text,
.meta-text,
.helper-text,
.card-meta {
    font-size: var(--fs-desktop-p2);
    font-weight: var(--font-regular);
    line-height: var(--lh-body);
}


/*
   Recommended for:
   - small labels
   - eyebrow text
   - captions
   - compact metadata
*/

.eyebrow,
.small-label,
.caption {
    font-size: var(--fs-desktop-small);
    font-weight: var(--font-semibold);
    line-height: var(--lh-compact);
}


/* ============================================================
   LISTS
============================================================ */

ul,
ol {
    font-size: inherit;
}


li {
    line-height: var(--lh-body);
}


/* ============================================================
   LINKS
============================================================ */

a {
    font-family: inherit;
}


/* ============================================================
   FORM ELEMENTS
============================================================ */

button,
input,
select,
textarea {
    font-family: var(--font-family-primary);
    font-size: inherit;
}


/* ============================================================
   TABLET
   768px – 1023px
============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {

    h1,
    .heading-1 {
        font-size: 32px;
    }


    h2,
    .heading-2 {
        font-size: 22px;
    }


    h3,
    .heading-3,
    .subtitle {
        font-size: 18px;
    }


    /*
       Keep important content comfortably readable.
    */

    body,
    p,
    .paragraph-1,
    .text-large,
    .content-text,
    .section-description,
    .page-description,
    .detail-value {
        font-size: 15px;
    }


    .paragraph-2,
    .text-medium,
    .secondary-text,
    .meta-text,
    .helper-text,
    .card-meta {
        font-size: 13px;
    }


    .small-text-1,
    .text-small,
    .eyebrow,
    .small-label,
    .caption {
        font-size: 11px;
    }
}


/* ============================================================
   MOBILE
   <= 767px
============================================================ */

@media (max-width: 767px) {

    body {
        font-size: var(--fs-mobile-p1);
    }


    h1,
    .heading-1 {
        font-size: var(--fs-mobile-h1);
        line-height: var(--lh-heading-1);
    }


    h2,
    .heading-2 {
        font-size: var(--fs-mobile-h2);
        line-height: var(--lh-heading-2);
    }


    h3,
    .heading-3,
    .subtitle {
        font-size: var(--fs-mobile-h3);
        line-height: var(--lh-heading-3);
    }


    p,
    .paragraph-1,
    .text-large,
    .content-text,
    .section-description,
    .page-description,
    .detail-value {
        font-size: var(--fs-mobile-p1);
        line-height: var(--lh-body);
    }


    .paragraph-2,
    .text-medium,
    .secondary-text,
    .meta-text,
    .helper-text,
    .card-meta {
        font-size: var(--fs-mobile-p2);
        line-height: var(--lh-body);
    }


    .small-text-1,
    .text-small,
    .eyebrow,
    .small-label,
    .caption {
        font-size: var(--fs-mobile-small);
        line-height: var(--lh-compact);
    }
}