/* ===================================================================
   DAMATIS UI FRAMEWORK v1.0
   =================================================================== */


/* ===================================================================
   1. DESIGN TOKENS
   =================================================================== */

:root{

    /* COLORS */

    --dam-color-primary:#C89B4B;
    --dam-color-primary-hover:#B4883B;

    --dam-color-text:#1D2B44;
    --dam-color-text-light:#5F6B7A;

    --dam-color-background:#FFFFFF;
    --dam-color-background-alt:#FCFCFC;

    --dam-color-border:#ECECEC;


    /* LAYOUT */

    --dam-container:1320px;

    --dam-space-section:100px;
    --dam-space-content:40px;
    --dam-space-title:22px;
    --dam-space-button:36px;

    /* COMPONENTS */

    --dam-radius-card:18px;
    --dam-radius-button:12px;

    --dam-shadow:
        0 10px 30px rgba(0,0,0,.08);

    --dam-shadow-hover:
        0 22px 50px rgba(0,0,0,.14);

    --dam-transition:.35s ease;

}



/* ===================================================================
   2. RESET
   =================================================================== */

*{
    box-sizing:border-box;
}

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



/* ===================================================================
   3. COMPONENTS
   =================================================================== */

/* =====================================================
   DAMATIS CARD
===================================================== */

.damatis-card{

    background:#fff;

    border-radius:var(--dam-radius-card);

    overflow:hidden;

    box-shadow:var(--dam-shadow);

    transition:var(--dam-transition);

}

.damatis-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--dam-shadow-hover);

}


/* =====================================================
   DAMATIS BUTTON
===================================================== */

.damatis-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:50px;

    padding:16px 28px;

    border-radius:var(--dam-radius-button);

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

    color:#fff;

    text-decoration:none;

    transition:var(--dam-transition);

}

.damatis-btn:hover{

    background:var(--dam-color-primary-hover);

    transform:translateY(-3px);

}

/* ===================================================================
   DAMATIS GRID
   =================================================================== */

.damatis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    width: 100%;
}

@media (max-width: 768px) {
    .damatis-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* =====================================================
   DAMATIS SECTION
===================================================== */



/* =====================================================
   DAMATIS CONTAINER
===================================================== */


/* ===================================================================
   4. ANIMATIONS
   =================================================================== */



/* ===================================================================
   5. RESPONSIVE
   =================================================================== */