/*
======================================================================

CTM PATH™ Guided Journey v1.0

File
css/foundation/typography.css

Purpose
Premium Typography System

Responsibility
• Tamil-first typography
• English supporting typography
• Hero hierarchy
• Emotional storytelling rhythm
• Screen captions
• Buttons and labels

======================================================================
*/


/*==================================================
Typography Variables
==================================================*/

:root{


    --font-tamil:

        "Noto Sans Tamil",
        sans-serif;



    --font-display:

        "Playfair Display",
        serif;



    --font-ui:

        "Inter",
        sans-serif;



    --line-tight:

        1.25;



    --line-normal:

        1.65;



    --line-loose:

        2;



}



/*==================================================
Base Typography
==================================================*/


body{


    font-family:

        var(--font-ui);


    font-size:

        16px;


    line-height:

        var(--line-normal);


    letter-spacing:

        .02em;


}



/*==================================================
Tamil Typography Foundation
==================================================*/


.tamil{


    font-family:

        var(--font-tamil);



    font-weight:

        600;



    line-height:

        2.1;



    letter-spacing:

        .02em;



    color:

        var(--color-white);



}



/*==================================================
English Typography Foundation
==================================================*/


.english{


    font-family:

        var(--font-display);



    font-weight:

        400;



    line-height:

        1.9;



    letter-spacing:

        .04em;



    color:

        rgba(255,255,255,.86);



}



/*==================================================
Hero Heading
==================================================*/


.hero-title{


    font-family:

        var(--font-tamil);



    font-size:

        clamp(

            2.4rem,

            5vw,

            4.8rem

        );



    font-weight:

        700;



    line-height:

        1.8;



    text-align:center;



}



/*==================================================
Hero English Subtitle
==================================================*/


.hero-subtitle{


    font-family:

        var(--font-display);



    font-size:

        clamp(

            1.2rem,

            2vw,

            2rem

        );



    font-weight:

        400;



    line-height:

        1.8;



    text-align:center;



    color:

        rgba(255,255,255,.75);



}



/*==================================================
Screen Caption
==================================================*/


.screen-caption{


    font-family:

        var(--font-ui);



    font-size:

        .78rem;



    font-weight:

        600;



    letter-spacing:

        .30em;



    text-transform:

        uppercase;



    text-align:center;



    color:

        rgba(217,181,106,.85);



}



/*==================================================
Gold Highlight
==================================================*/


.text-gold{


    color:

        var(--color-gold);



}



/*==================================================
Welcome Text
==================================================*/


.english-welcome{


    color:

        var(--color-gold);



    font-weight:

        600;



}



/*==================================================
Body Message
==================================================*/


.message{


    text-align:center;



    font-family:

        var(--font-ui);



}



.message-tamil{


    font-family:

        var(--font-tamil);



    font-size:

        1.25rem;



    line-height:

        2;



    color:

        var(--color-white);



}



.message-english{


    font-family:

        var(--font-display);



    font-size:

        1rem;



    color:

        rgba(255,255,255,.70);



}



/*==================================================
Card Typography
==================================================*/


.card-title{


    font-family:

        var(--font-tamil);



    font-size:

        1.25rem;



    font-weight:

        600;



}



.card-subtitle{


    font-family:

        var(--font-display);



    font-size:

        .95rem;



    color:

        rgba(255,255,255,.65);



}



/*==================================================
Button Typography
==================================================*/


.btn-title{


    font-family:

        var(--font-tamil);



    font-weight:

        700;



}



.btn-subtitle{


    font-family:

        var(--font-display);



    font-size:

        .85rem;



}



/*==================================================
Small Labels
==================================================*/


.label{


    font-family:

        var(--font-ui);



    font-size:

        .75rem;



    letter-spacing:

        .18em;



    text-transform:

        uppercase;



    color:

        rgba(255,255,255,.55);



}



/*==================================================
Divider Text
==================================================*/


.quote{


    font-family:

        var(--font-display);



    font-style:

        italic;



    font-size:

        1.2rem;



    line-height:

        1.8;



    color:

        rgba(255,255,255,.82);



}



/*==================================================
Responsive Typography
==================================================*/


@media(max-width:768px){



    body{


        font-size:

            15px;



    }



    .hero-title{


        font-size:

            2.3rem;



    }



    .hero-subtitle{


        font-size:

            1.1rem;



    }



    .tamil{


        line-height:

            1.95;



    }



}



@media(max-width:480px){



    .hero-title{


        font-size:

            2rem;



    }



    .message-tamil{


        font-size:

            1.1rem;



    }



}