/* =========================================================
   GLOBAL CSS
   Kunal Portfolio
   ========================================================= */


/* =========================================================
   01. ROOT VARIABLES
   ========================================================= */

:root {

    /* ---------- Colors ---------- */

    --color-bg: #f8f9fb;
    --color-white: #ffffff;

    --color-text: #111318;
    --color-text-dark: #17191d;
    --color-text-muted: #68717c;

    --color-primary: #2f6df6;
    --color-primary-dark: #2459d6;

    --color-border: #e4e8ed;
    --color-border-dark: #d5dae0;


    /* ---------- Typography ---------- */

    --font-primary: "General Sans", sans-serif;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* ---------- Font Sizes ---------- */

    --fs-body: 16px;
    --fs-small: 13px;
    --fs-xs: 12px;

    --fs-h1: clamp(58px, 4.15vw, 78px);
    --fs-h2: clamp(44px, 3.05vw, 58px);
    --fs-h3: clamp(24px, 1.6vw, 30px);


    /* ---------- Line Heights ---------- */

    --lh-body: 1.6;
    --lh-heading: 1.05;
    --lh-tight: 1.15;


    /* ---------- Layout ---------- */

    --container-width: 1824px;

    --page-padding: clamp(24px, 3.2vw, 64px);

    --section-spacing: clamp(48px, 4vw, 60px);


    /* ---------- Border Radius ---------- */

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-pill: 999px;


    /* ---------- Shadows ---------- */

    --shadow-sm: 0 4px 20px rgba(17, 19, 24, 0.06);
    --shadow-md: 0 12px 40px rgba(17, 19, 24, 0.08);


    /* ---------- Transitions ---------- */

    --transition-fast: 0.2s ease;
    --transition: 0.35s ease;
    --transition-slow: 0.6s ease;


    /* ---------- Z-index ---------- */

    --z-header: 100;
    --z-overlay: 500;
    --z-cursor: 1000;
}


/* =========================================================
   02. FONT
   ========================================================= */

@font-face {
    font-family: "General Sans";
    src: url("../fonts/GeneralSans-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "General Sans";
    src: url("../fonts/GeneralSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "General Sans";
    src: url("../fonts/GeneralSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "General Sans";
    src: url("../fonts/GeneralSans-Semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   03. RESET
   ========================================================= */

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

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: var(--color-bg);
    color: var(--color-text);

    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--lh-body);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}


/* =========================================================
   04. BASIC ELEMENTS
   ========================================================= */

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

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

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

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

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}

p {
    margin-bottom: 0;
}


/* =========================================================
   05. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;

    color: var(--color-text);

    font-family: var(--font-primary);
    font-weight: var(--font-weight-medium);

    line-height: var(--lh-heading);
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
}

h3 {
    font-size: var(--fs-h3);
}

.text-muted {
    color: var(--color-text-muted);
}

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


/* =========================================================
   06. COMMON LAYOUT
   ========================================================= */

.site-container {
    width: min(
        calc(100% - (var(--page-padding) * 2)),
        var(--container-width)
    );

    margin-inline: auto;
}

.section {
    position: relative;
    width: 100%;
    padding-block: var(--section-spacing);
}


/* =========================================================
   07. COMMON FLEX UTILITIES
   ========================================================= */

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.justify-center {
    justify-content: center;
}


/* =========================================================
   08. COMMON BUTTON
   ========================================================= */

.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;
    padding: 0 22px;

    border: 1px solid transparent;
    border-radius: var(--radius-pill);

    font-size: 14px;
    font-weight: var(--font-weight-medium);

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.btn-custom:hover {
    transform: translateY(-2px);
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

.btn-outline {
    background: transparent;
    border-color: var(--color-border-dark);
    color: var(--color-text);
}

.btn-outline:hover {
    border-color: var(--color-text);
}


/* =========================================================
   09. EYEBROW
   ========================================================= */

.eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 28px;

    color: var(--color-text-muted);

    font-size: 13px;
    font-weight: var(--font-weight-medium);

    line-height: 1.4;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

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


/* =========================================================
   10. COMMON DIVIDER
   ========================================================= */

.divider {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}


/* =========================================================
   11. COMMON CARD
   ========================================================= */

.card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}


/* =========================================================
   12. VISIBILITY / ACCESSIBILITY
   ========================================================= */

.visually-hidden {
    position: absolute !important;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
    border: 0;
}


/* =========================================================
   13. SELECTION
   ========================================================= */

::selection {
    background: var(--color-primary);
    color: var(--color-white);
}


/* =========================================================
   14. FOCUS
   ========================================================= */

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}


/* =========================================================
   15. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: #c9ced5;
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: #aeb4bc;
}