/* ==========================================================================
   UTILITIES.CSS - Um conjunto de classes auxiliares para agilizar o dev.
   - Customizável com Variáveis CSS
   - Design Mobile-First com prefixos responsivos (md:, lg:)
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. VARIÁVEIS GLOBAIS (CUSTOMIZE AQUI!)
/* -------------------------------------------------------------------------- */
:root {
    --color-transparent-background: #1d1c2270;
    --color-transparent-background-overlay: #1d1c22a6;

    /* --color-background-canvas: #000;
    --color-background-surface: #161618;
    --color-background-surface-1: #212124; */

    --color-background-canvas: #1d1c22;
    --color-background-surface: #313139;
    --color-background-surface-1: #313139;

    --color-text: #fff;
    --color-text-muted: #818181;

    --color-link: #4bb9ea;
    --color-blue: #4bb9ea;
    --color-red: #ff7979;

}


/* :root {
    --color-transparent-background: rgba(255, 255, 255, 0.4);

    --color-background-canvas: #fff;
    --color-background-surface: #d0d0d0;

    --color-text: #000;
    --color-text-muted: #818181;

    --color-link: #006fa0;
    --color-blue: #006fa0;
    --color-red: #f33939;
} */

:root {
    /* Cores (exemplo) */
    --color-primary: #0d6efd;
    --color-secondary: #6c757d;
    --color-success: #198754;
    --color-danger: #ff5c6c;
    --color-danger2: #dc3545;
    --color-warning: #ffc107;
    --color-light: #f8f9fa;
    --color-dark: #212529;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-body-text: #343a40;


    --blur-1: 10px;

    /* Escala de Espaçamento (baseado em 1rem = 16px) */
    --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-8: 3rem;
    /* 48px */

    /* Fontes */
    --font-size-xs: 0.675rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;

    /* Bordas */
    --border-radius-sm: 0.2rem;
    --border-radius: 1rem;
    --border-radius-lg: 0.5rem;
    --border-radius-full: 9999px;

    /* Sombras */
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}


/* -------------------------------------------------------------------------- */
/* 2. RESET BÁSICO
/* -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    /* -webkit-user-select: none;
    user-select: none; */
}


/* Prevenir Select */
/* *,
*::before,
*::after {
    -webkit-user-select: none;
    user-select: none;
} */


/* -------------------------------------------------------------------------- */
/* 3. DISPLAY E VISIBILIDADE
/* -------------------------------------------------------------------------- */
.cursor-pointer {
    cursor: pointer;
}

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.d-none {
    display: none;
}


/* -------------------------------------------------------------------------- */
/* 4. TIPOGRAFIA
/* -------------------------------------------------------------------------- */
.color-red {
    color: var(--color-red);
}

.color-blue {
    color: var(--color-link);
}

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

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

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

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

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

.font-light {
    font-weight: 300;
}

.font-normal {
    font-weight: 400;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.text-xs {
    font-size: var(--font-size-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-base {
    font-size: var(--font-size-base);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

.italic {
    font-style: italic;
}

.no-underline {
    text-decoration: none;
}

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

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

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

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

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

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


/* -------------------------------------------------------------------------- */
/* 5. FLEXBOX
/* -------------------------------------------------------------------------- */
.flex-row {
    flex-direction: row;
}

.flex-col {
    flex-direction: column;
}

.justify-start {
    justify-content: flex-start;
}

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

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

.items-start {
    align-items: flex-start;
}

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

.items-end {
    align-items: flex-end;
}

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

.flex-grow {
    flex-grow: 1;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.nowrap {
    white-space: nowrap;
}

/* -------------------------------------------------------------------------- */
/* 6. ESPAÇAMENTO (Margins e Paddings)
/* -------------------------------------------------------------------------- */
/* Margem (m), Padding (p) */
/* Top (t), Bottom (b), Left (l), Right (r), Horizontal (x), Vertical (y) */
.m-0 {
    margin: 0;
}

.p-0 {
    padding: 0;
}

.m-1 {
    margin: var(--space-1);
}

.p-1 {
    padding: var(--space-1);
}

.m-2 {
    margin: var(--space-2);
}

.p-2 {
    padding: var(--space-2);
}

.m-3 {
    margin: var(--space-3);
}

.p-3 {
    padding: var(--space-3);
}

.m-4 {
    margin: var(--space-4);
}

.p-4 {
    padding: var(--space-4);
}

.m-5 {
    margin: var(--space-5);
}

.p-5 {
    padding: var(--space-5);
}

.m-6 {
    margin: var(--space-6);
}

.p-6 {
    padding: var(--space-6);
}

.m-8 {
    margin: var(--space-8);
}

.p-8 {
    padding: var(--space-8);
}

.m-auto {
    margin: auto;
}


/* left */
.pl-1 {
    padding-left: var(--space-1);
}

.pl-2 {
    padding-left: var(--space-2);
}

.pl-3 {
    padding-left: var(--space-3);
}

.pl-4 {
    padding-left: var(--space-4);
}

/* right */
.pr-1 {
    padding-right: var(--space-1);
}

.pr-2 {
    padding-right: var(--space-2);
}

.pr-3 {
    padding-right: var(--space-3);
}

.pr-4 {
    padding-right: var(--space-4);
}


/* top */
.pt-1 {
    padding-top: var(--space-1);
}

.pt-2 {
    padding-top: var(--space-2);
}

.pt-3 {
    padding-top: var(--space-3);
}

.pt-4 {
    padding-top: var(--space-4);
}

/* bottom */
.pb-1 {
    padding-bottom: var(--space-1);
}

.pb-2 {
    padding-bottom: var(--space-2);
}

.pb-3 {
    padding-bottom: var(--space-3);
}

.pb-4 {
    padding-bottom: var(--space-4);
}

/* Vertical (my, py) e Horizontal (mx, px) */
.my-1 {
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
}

.py-1 {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

.py-2 {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

/* ... (repita para 2, 3, 4, 5, 6, 8, auto) ... */
.my-4 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.py-4 {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

.mx-1 {
    margin-left: var(--space-1);
    margin-right: var(--space-1);
}

.px-1 {
    padding-left: var(--space-1);
    padding-right: var(--space-1);
}

.px-2 {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

/* ... (repita para 2, 3, 4, 5, 6, 8, auto) ... */
.mx-4 {
    margin-left: var(--space-4);
    margin-right: var(--space-4);
}

.px-4 {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}


/* -------------------------------------------------------------------------- */
/* 7. TAMANHOS
/* -------------------------------------------------------------------------- */
.w-full,
.w-100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}

.w-20 {
    width: 20%;
}

.h-full,
.h-100 {
    height: 100%;
}

.w-screen {
    width: 100vw;
}

.h-screen {
    height: 100vh;
}


/* -------------------------------------------------------------------------- */
/* 8. BORDAS E SOMBRAS
/* -------------------------------------------------------------------------- */
.border {
    border: 1px solid #dee2e6;
}

.border-0 {
    border: 0;
}

.rounded-sm {
    border-radius: var(--border-radius-sm);
}

.rounded {
    border-radius: var(--border-radius);
}

.rounded-lg {
    border-radius: var(--border-radius-lg);
}

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

.shadow {
    box-shadow: var(--shadow);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}


/* -------------------------------------------------------------------------- */
/* 9. CLASSES RESPONSIVAS (Mobile-First)
/* - md: aplica o estilo em telas de 768px ou mais.
/* - lg: aplica o estilo em telas de 1024px ou mais.
/* Ex: <div class="text-center md:text-left">...</div>
/* (Será centralizado no mobile e alinhado à esquerda no desktop)
/* -------------------------------------------------------------------------- */

/* Telas médias (tablets, desktops pequenos) */
@media (min-width: 768px) {
    .md\:d-block {
        display: block;
    }

    .md\:d-flex {
        display: flex;
    }

    .md\:d-none {
        display: none;
    }

    .md\:text-left {
        text-align: left;
    }

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

    .md\:text-right {
        text-align: right;
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:flex-col {
        flex-direction: column;
    }

    .md\:justify-start {
        justify-content: flex-start;
    }

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

    /* ... adicione outras classes responsivas que precisar ... */
}

/* Telas grandes (desktops) */
@media (min-width: 1024px) {
    .lg\:d-block {
        display: block;
    }

    .lg\:d-flex {
        display: flex;
    }

    .lg\:d-none {
        display: none;
    }

    .lg\:text-left {
        text-align: left;
    }

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

    .lg\:text-right {
        text-align: right;
    }

    /* ... adicione outras classes responsivas que precisar ... */
}


/* bgs */

.bg-surface {
    background-color: var(--color-background-surface);
}

.bg-surface-1 {
    background-color: var(--color-background-surface-1);
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.opacity-50 {
    opacity: 0.5;
}

.flip-x {
    transform: scaleX(-1);
}