/*
====================================================
ToolZora Design System
Version: 1.0
====================================================
*/

/*==============================
RESET
==============================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.7;
    background:var(--tz-bg);
    color:var(--tz-text);
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul,
ol{
    list-style:none;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    cursor:pointer;
    border:none;
    background:none;
}

table{
    border-collapse:collapse;
    width:100%;
}

/*==============================
ROOT VARIABLES
==============================*/

:root{

    /* Colors */

    --tz-primary:#2563eb;
    --tz-primary-hover:#1d4ed8;

    --tz-secondary:#0f172a;

    --tz-success:#10b981;
    --tz-danger:#ef4444;
    --tz-warning:#f59e0b;

    --tz-bg:#f8fafc;
    --tz-card:#ffffff;

    --tz-border:#e5e7eb;

    --tz-text:#1e293b;
    --tz-light-text:#64748b;

    /* Radius */

    --tz-radius-sm:8px;
    --tz-radius:14px;
    --tz-radius-lg:22px;

    /* Shadow */

    --tz-shadow-sm:0 2px 8px rgba(0,0,0,.05);

    --tz-shadow:0 10px 25px rgba(0,0,0,.08);

    --tz-shadow-lg:0 20px 40px rgba(0,0,0,.12);

    /* Width */

    --tz-width:1300px;

    /* Animation */

    --tz-transition:.3s ease;

}

/*==============================
DARK MODE
==============================*/

body.dark-mode{

    --tz-bg:#0f172a;

    --tz-card:#1e293b;

    --tz-border:#334155;

    --tz-text:#f8fafc;

    --tz-light-text:#cbd5e1;

}

/*==============================
CONTAINER
==============================*/

.toolzora-container{

    width:min(100% - 40px,var(--tz-width));

    margin:auto;

}

/*==============================
SECTION
==============================*/

.toolzora-section{

    padding:70px 0;

}

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

h1,
h2,
h3,
h4,
h5{

    color:var(--tz-secondary);

    font-weight:700;

    line-height:1.3;

}

.toolzora-title{

    font-size:42px;

    margin-bottom:15px;

}

.toolzora-subtitle{

    font-size:32px;

    margin-bottom:20px;

}

.toolzora-description{

    max-width:800px;

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

    margin-bottom:35px;

}

/*==============================
GRID
==============================*/

.toolzora-grid{

    display:grid;

    gap:25px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

/*==============================
CARD
==============================*/

.toolzora-card{

    background:var(--tz-card);

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

    border-radius:var(--tz-radius);

    padding:30px;

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

    transition:var(--tz-transition);

}

.toolzora-card:hover{

    transform:translateY(-3px);

    box-shadow:var(--tz-shadow);

}

/*==============================
BUTTONS
==============================*/

.toolzora-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:10px;

    background:var(--tz-primary);

    color:#fff;

    font-weight:600;

    transition:var(--tz-transition);

}

.toolzora-btn:hover{

    background:var(--tz-primary-hover);

}

.toolzora-btn-outline{

    background:transparent;

    border:2px solid var(--tz-primary);

    color:var(--tz-primary);

}

.toolzora-btn-outline:hover{

    color:#fff;

    background:var(--tz-primary);

}

/*==============================
INPUTS
==============================*/

.toolzora-input{

    width:100%;

    padding:15px 18px;

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

    border-radius:10px;

    background:#fff;

    outline:none;

    transition:.3s;

}

.toolzora-input:focus{

    border-color:var(--tz-primary);

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

/*==============================
TEXTAREA
==============================*/

.toolzora-textarea{

    width:100%;

    min-height:220px;

    resize:vertical;

    padding:20px;

    border-radius:12px;

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

    outline:none;

}

/*==============================
RESULT BOX
==============================*/

.toolzora-result{

    background:#f1f5f9;

    padding:25px;

    border-left:5px solid var(--tz-primary);

    border-radius:12px;

    margin-top:25px;

}

/*==============================
BADGE
==============================*/

.toolzora-badge{

    display:inline-block;

    padding:6px 14px;

    border-radius:100px;

    background:#dbeafe;

    color:var(--tz-primary);

    font-size:14px;

    font-weight:600;

}

/*==============================
SPACING
==============================*/

.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}

.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

.text-center{text-align:center;}

.hidden{
    display:none !important;
}

/*==============================
ADVERTISEMENT
==============================*/

.toolzora-ad{

    width:100%;

    min-height:280px;

    border:2px dashed var(--tz-border);

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:40px 0;

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

    background:#fff;

}

/*==============================
FOOTER SPACING
==============================*/

footer{

    margin-top:70px;

}