/*
|--------------------------------------------------------------------------
| TechPackHub Client Portal
| Global Styles
|--------------------------------------------------------------------------
*/

/*======================================
=            Design Tokens             =
======================================*/

:root{

    /* Brand */

    --tph-primary:#2563EB;
    --tph-primary-hover:#1D4ED8;

    --tph-success:#16A34A;
    --tph-warning:#F59E0B;
    --tph-danger:#DC2626;

    /* Text */

    --tph-text:#0F172A;
    --tph-text-light:#64748B;

    /* Background */

    --tph-bg:#F8FAFC;
    --tph-card:#FFFFFF;

    /* Border */

    --tph-border:#E2E8F0;

    /* Radius */

    --tph-radius-sm:8px;
    --tph-radius-md:12px;
    --tph-radius-lg:16px;
    --tph-radius-xl:20px;

    /* Shadow */

    --tph-shadow-sm:0 2px 8px rgba(15,23,42,.04);
    --tph-shadow-md:0 8px 24px rgba(15,23,42,.06);
    --tph-shadow-lg:0 14px 34px rgba(15,23,42,.08);

    /* Transition */

    --tph-transition:.25s ease;

    /* Width */

    --tph-max-width:1280px;

}


/*======================================
=            Reset                     =
======================================*/

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    color:var(--tph-text);

    background:var(--tph-bg);

    font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

    line-height:1.6;

    font-size:15px;

}


/*======================================
=            Images                    =
======================================*/

img{

    max-width:100%;

    height:auto;

    display:block;

}


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

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0 0 16px;

    color:var(--tph-text);

    font-weight:600;

    line-height:1.25;

}

h1{

    font-size:32px;

}

h2{

    font-size:24px;

}

h3{

    font-size:20px;

}

h4{

    font-size:18px;

}

p{

    margin:0 0 16px;

    color:var(--tph-text-light);

}


/*======================================
=            Links                     =
======================================*/

a{

    color:var(--tph-primary);

    text-decoration:none;

    transition:var(--tph-transition);

}

a:hover{

    color:var(--tph-primary-hover);

}


/*======================================
=            Layout                    =
======================================*/

.tph-container{

    width:100%;

    max-width:var(--tph-max-width);

    margin:0 auto;

    padding:32px;

}

.tph-section{

    margin-bottom:32px;

}


/*======================================
=            Cards                     =
======================================*/

.tph-card{

    background:var(--tph-card);

    border:1px solid var(--tph-border);

    border-radius:var(--tph-radius-lg);

    box-shadow:var(--tph-shadow-sm);

    transition:var(--tph-transition);

}

.tph-card:hover{

    box-shadow:var(--tph-shadow-md);

}

.tph-card-header{

    padding:24px;

    border-bottom:1px solid var(--tph-border);

}

.tph-card-body{

    padding:24px;

}


/*======================================
=            Grid                      =
======================================*/

.tph-grid{

    display:grid;

    gap:24px;

}

.tph-grid-2{

    grid-template-columns:repeat(2,1fr);

}

.tph-grid-3{

    grid-template-columns:repeat(3,1fr);

}

.tph-grid-4{

    grid-template-columns:repeat(4,1fr);

}


/*======================================
=            Flex                      =
======================================*/

.tph-flex{

    display:flex;

}

.tph-align-center{

    align-items:center;

}

.tph-justify-between{

    justify-content:space-between;

}

.tph-gap-8{

    gap:8px;

}

.tph-gap-16{

    gap:16px;

}

.tph-gap-24{

    gap:24px;

}


/*======================================
=            Utilities                 =
======================================*/

.tph-text-center{

    text-align:center;

}

.tph-text-right{

    text-align:right;

}

.tph-fw-500{

    font-weight:500;

}

.tph-fw-600{

    font-weight:600;

}

.tph-fw-700{

    font-weight:700;

}

.tph-muted{

    color:var(--tph-text-light);

}

.tph-hidden{

    display:none;

}


/*======================================
=            Spacing                   =
======================================*/

.mt-0{margin-top:0;}
.mt-8{margin-top:8px;}
.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}
.mt-32{margin-top:32px;}

.mb-0{margin-bottom:0;}
.mb-8{margin-bottom:8px;}
.mb-16{margin-bottom:16px;}
.mb-24{margin-bottom:24px;}
.mb-32{margin-bottom:32px;}


/*======================================
=            Loading                   =
======================================*/

.tph-loading{

    opacity:.6;

    pointer-events:none;

}


/*======================================
=            Animation                 =
======================================*/

.fade-in{

    animation:tphFade .4s ease;

}

@keyframes tphFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}