@import url("layout/body.css");
@import url("layout/header.css");
@import url("layout/main.css");
@import url("layout/footer.css");
@import url("layout/tablets.css");
@import url("sections.css");
@import url("fonts.css");
@import url("icons.css");
@import url("objects/buttons.css");
@import url("objects/inputs.css");
@import url("objects/cards.css");
@import url("forms.css");
@import url("menus/dropdown.css");

:root,
:host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

* {
    padding: 0;
    margin: 0;
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    font-style: normal;
    box-sizing: border-box;
}

:root {
    --scandal-gradient: linear-gradient(160deg, rgb(240, 253, 244) 0%, rgb(236, 253, 245) 40%, rgb(248, 250, 252) 100%);
    --feta-gradient: linear-gradient(135deg, rgb(220, 252, 231), rgb(167, 243, 208));
    --button: linear-gradient(160deg, #16a34a, #059669);
    --ebony: #101828;

    --green-haze: #00a63e;
    --feta: #f0fdf4;
    --ice-cold: #b9f8cf;
    --scandal: #dcfce7;
    --pale-sky: #6a7282;
    --athens-gray: #e5e7eb;
    --white: #fff;

    --text-color: var(--ebony);
    --text-secondary: var(--pale-sky);
    --accent: var(--green-haze);

    --max-width: 1400px;
    --border-radius: 16px;
    --border-color: var(--scandal);
    --border-color-active: var(--ice-cold);
    --gap: 8px;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --padding: 16px;
    --active-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);

    --h1: clamp(2rem, 8vw, 2.5rem);
    --h2: clamp(1.125rem, 5vw, 2rem);
    --h3: clamp(1.125rem, 4.5vw, 1.5rem);
    --h4: clamp(1rem, 4vw, 1rem);
    --h5: clamp(0.875rem, 3vw, 0.875rem);
    --h6: clamp(0.65rem, 2.5vw, 0.65rem);
    --p: clamp(0.875rem, 3vw, 1rem);
}

.flex {
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.column {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2px;
}

[hidden] {
    display: none !important;
}