// Global imports
@use "reset";
@use "typography";

// Global styles
:root {
    // Colors
    --background-color: #222222;
    --color-text: #ffffff;
    --color-brand: #5a89ff;
    --color-dark-blue: #33388d;
    --color-grey-dark: #434343;
    --background-color-modal: #363636;

    // Typography
    --font-family-base: "Poppins", sans-serif;
    --font-family-secondary: "Arial", sans-serif;

    /* Font Weights */
    --font-weight-thin: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;

    /* Font Sizes */
    --font-size-s: clamp(0.4rem, 0.8vw, 0.938rem);
    --font-size-base: 1rem;
    --font-size-m: clamp(0.6rem, 1vw, 1.188rem);
    --font-size-xl: clamp(1.375rem, 2.3vw, 2.875rem);
    --font-size-modal-title: clamp(1rem, 2.5vw, 2.8rem);

    /* Spacing Horizontal */
    --space-xxs-x: min(0.23vw, 0.25rem);
    --space-xs-x: min(0.46vw, 0.5rem);
    --space-s-x: min(0.93vw, 1rem);
    --space-sm-x: min(1.4vw, 1.5rem);
    --space-m-x: min(1.85vw, 2rem);

    /* Spacing Vertical */
    --space-xxs-y: min(0.358dvh, 0.25rem);
    --space-xs-y: min(0.716dvh, 0.5rem);
    --space-s-y: min(1.432dvh, 1rem);
    --space-sm-y: min(2.148dvh, 1.5rem);
    --space-m-y: min(2.864dvh, 2rem);

    --padding-layout: min(1dvh, 0.8rem) var(--space-s-x);

    /* Breakpoints */
    --breakpoint-tablet: 1024px;

    /* Border Radius */
    --border-radius-button-small: 0.5rem;
    --border-radius-button: min(0.75rem, 0.6vw);
    --border-radius-modal: min(1rem, 1.4vw);
    --border-radius-card: min(0.75rem, 0.7vw);
    --border-radius-tabs: min(12px, 0.7vw);
    --border-radius-rounded: 70px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-light);
    color: var(--color-text);
    background-color: var(--background-color);
}

*:focus-visible {
    outline: none !important;
}

h1,
h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-thin);
}

h3 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-m);
}

p {
    text-wrap: pretty;
}