@import "../common/components/header/header.css";
@import "../common/components/footer/footer.css";

* { margin: 0; padding: 0; box-sizing: border-box;}
html, body { scroll-behavior: smooth; background-color: var(--primary-50);}

:root {
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 3rem;    /* 48px */
    --space-8: 4rem;    /* 64px */
    
    --radius-1: 0.125rem;   /* 2px */
    --radius-2: 0.25rem;    /* 4px */
    --radius-3: 0.5rem;     /* 8px */
    --radius-4: 0.75rem;    /* 12px */
    --radius-5: 1rem;       /* 16px */
    --radius-6: 1.5rem;     /* 24px */
    --radius-7: 3rem;       /* 48px */
    --radius-full: 9999px;  /* full */

    --transition-fast: 150ms ease-in-out;
    --transition-medium: 300ms ease-in-out;
    --transition-slow: 900ms ease-in-out;

    --font-primary: "Montserrat", system-ui, sans-serif;
    --font-secondary: "Lekton", monospace;
    /* Font weights */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    /* Headings (fluid) */
    --fs-h1: clamp(2.75rem, 5vw + 1rem, 6rem); /* 44 → 96 */
    --fs-h2: clamp(2.25rem, 4vw + 0.75rem, 3.75rem); /* 36 → 60 */
    --fs-h3: clamp(1.875rem, 3vw + 0.75rem, 3rem); /* 30 → 48 */
    --fs-h4: clamp(1.5rem, 2.5vw + 0.5rem, 2.125rem); /* 24 → 34 */
    --fs-h5: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem); /* 20 → 24 */
    --fs-h6: clamp(1.125rem, 1vw + 0.5rem, 1.3125rem); /* 18 → 21 */
    /* Subtitles */
    --fs-subtitle-1: clamp(0.95rem, 0.8vw + 0.5rem, 1.0625rem); /* 15 → 17 */
    --fs-subtitle-2: clamp(0.875rem, 0.6vw + 0.5rem, 0.9375rem); /* 14 → 15 */
    /* Body */
    --fs-body-1: clamp(0.95rem, 0.5vw + 0.6rem, 1rem); /* 15 → 16 */
    --fs-body-2: clamp(0.875rem, 0.4vw + 0.6rem, 0.875rem); /* fixed 14 */
    /* UI text */
    --fs-button: clamp(0.875rem, 0.4vw + 0.5rem, 0.875rem);
    --fs-caption: clamp(0.75rem, 0.3vw + 0.45rem, 0.75rem);
    --fs-overline: clamp(0.625rem, 0.25vw + 0.4rem, 0.625rem);
    /* Letter spacing */
    --ls-button: 0.08em;
    --ls-overline: 0.12em;
    --lh-heading: 1.15;
    --lh-body: 1.6;
    --lh-ui: 1.3;
    /* Navigation */
    --fs-nav: clamp(0.9rem, 0.5vw + 0.6rem, 1rem);
    --fw-nav: 500;
    --lh-nav: 1.2;
}     

/* Font settings */
h1, h2, h3, h4, h5, h6 { line-height: var(--lh-heading);}
p { line-height: var(--lh-body);}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-semibold);}
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold);}
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold);}
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold);}
h5 { font-size: var(--fs-h5); font-weight: var(--fw-medium);}
h6 { font-size: var(--fs-h6); font-weight: var(--fw-bold);}

/* Font Families */
.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }

/* Text Colors (Semantic) */
.text-main { color: var(--neutral-900); }        /* Default deep text */
.text-secondary { color: var(--neutral-600); }   /* Muted/Subtle text */
.text-disabled { color: var(--neutral-400); }    /* Hints/Disabled */

.text-primary { color: var(--primary-500); }     /* Brand primary */
.text-primary-d { color: var(--primary-900); }
.text-primary-l { color: var(--primary-100); }

.text-white { color: #ffffff; }
.text-error { color: var(--error-500); }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.text-link {
    color: var(--primary-500);
    text-decoration: underline;
    transition: var(--transition-015);
}
.text-link:hover { opacity: 0.8; }

/* Headings */
.display-1 { font-size: var(--fs-h1); line-height: var(--lh-heading); font-weight: var(--fw-bold); }
.display-2 { font-size: var(--fs-h2); line-height: var(--lh-heading); font-weight: var(--fw-semibold); }

.text-subtitle-1 {
    font-family: var(--font-secondary);
    font-size: var(--fs-subtitle-1);
    font-weight: var(--fw-bold);
}
.text-subtitle-2 {
    font-family: var(--font-secondary);
    font-size: var(--fs-subtitle-2);
    font-weight: var(--fw-semibold);
}
.text-body-1 { font-size: var(--fs-body-1); font-weight: var(--fw-semibold);}
.text-body-2 { font-size: var(--fs-body-2); font-weight: var(--fw-regular);}

.text-button {
    font-size: var(--fs-button);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-button);
    text-transform: uppercase;
}
.text-caption {
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
}
.text-overline {
    font-size: var(--fs-overline);
    letter-spacing: var(--ls-overline);
    text-transform: uppercase;
}
/* Font settings */

/* Transitions & Shadows */
.transition-fast { 
    transition: background-color var(--transition-fast),
                transform var(--transition-fast),
                color var(--transition-fast),
                border var(--transition-fast);}
.transition-medium { 
    transition: background-color var(--transition-medium),
                transform var(--transition-medium),
                color var(--transition-medium),
                border var(--transition-fast);}
.transition-slow { 
    transition: background-color var(--transition-slow),
                transform var(--transition-slow),
                color var(--transition-slow),
                border var(--transition-fast);
    }

.hover-up:hover:not(:disabled) { transform: translateY(-2px);}
/* Transitions & Shadows */

.flex { display: flex; }
.grid { display: grid; }



/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-4);
    border: 1px solid transparent;
    font-family: var(--font-primary);
    font-size: var(--fs-button);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-button);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-sq {
    aspect-ratio: 1 / 1;
    padding: var(--space-4);
    border-radius: var(--radius-2);
}

.btn-pill {
    border-radius: var(--radius-full);
}

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

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-700);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--primary-900);
    color: var(--primary-900);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--primary-100);
}

.btn:disabled,
.btn-disabled {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    border-color: transparent !important;
    cursor: not-allowed;
    transform: none !important;
}

.btn-shadow {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
                rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
/* Buttons */



/* Main sections */
/* .main {
    padding-block: var(--space-8);
} */
.section {
    width: calc(100% - var(--space-7));
    max-width: 75rem;
    margin: 0 auto;
    padding-block: var(--space-4);
}
.section.section--hero { 
    margin-top: 0;
}
.container {
    margin-inline: auto;
}
/* ROUNDED SURFACE SECTION */
.section--surface {
    border-radius: var(--radius-6);
    padding: var(--space-7);
    background: var(--primary-100);
}
/* DARK SECTION */
.section--dark {
    background: var(--primary-800);
    color: var(--primary-50);
}
  

.layout-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}
.layout-split-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.box-shadow { box-shadow: rgba(17, 12, 46, 0.08) 0px 48px 100px 0px;}







/* Scroll to top page button */
#scrollToTop {
    display: none;
    position: fixed;
    width: var(--space-7);
    height: var(--space-7);
    border-radius: var(--radius-full);
    bottom: 5%;
    right: 5%;
    border: 0;
    z-index: 100;
    background-color: var(--primary-700);
}
#scrollToTop svg {
    position: absolute;
    transform: scale(0.55);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#scrollToTop svg path {
    fill: var(--primary-100);
}