/* =========================================================
   DRENA GLOBAL DESIGN SYSTEM
   Shared visual language for all Drena pages
========================================================= */


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

:root {

    /* Brand */
    --drena-orange: #ff5315;
    --drena-orange-hover: #e9470d;

    /* Main backgrounds */
    --drena-bg: #0b0b0b;
    --drena-bg-soft: #111111;
    --drena-bg-raised: #161616;

    /* Light surfaces */
    --drena-surface: #ffffff;
    --drena-surface-soft: #f7f7f7;

    /* Dark-theme text */
    --drena-white: #ffffff;
    --drena-text-light: #e7e7e7;
    --drena-text-muted: #aeb4ba;
    --drena-text-dim: #80868b;

    /* Light-surface text */
    --drena-ink: #171717;
    --drena-text: #343434;
    --drena-muted: #747b80;

    /* Borders */
    --drena-border-dark:
        rgba(255, 255, 255, 0.20);

    --drena-border-dark-soft:
        rgba(255, 255, 255, 0.08);

    --drena-border-light:
        #e5e5e7;

    /* Status */
    --drena-success: #19b75b;
    --drena-danger: #d94a4a;

    /* Radius */
    --drena-radius-sm: 8px;
    --drena-radius-md: 12px;
    --drena-radius-lg: 16px;

    /* Shadows */
    --drena-shadow-sm:
        0 4px 16px
        rgba(0, 0, 0, 0.06);

    --drena-shadow-md:
        0 10px 30px
        rgba(0, 0, 0, 0.10);

    --drena-shadow-lg:
        0 18px 50px
        rgba(0, 0, 0, 0.16);

    /* Layout */
    --drena-container: 1320px;

    /* Motion */
    --drena-transition:
        220ms cubic-bezier(
            .2,
            .65,
            .25,
            1
        );
}


/* =========================================================
   2. COMMON PAGE SHELL
========================================================= */

.drena-page {
    width: 100%;
    min-height: 100vh;

    background:
        var(--drena-bg);

    color:
        var(--drena-text-light);
}


.drena-shell {
    width:
        min(
            var(--drena-container),
            calc(100% - 48px)
        );

    margin:
        0 auto;
}


/* =========================================================
   3. EYEBROW / SECTION LABEL
========================================================= */

.drena-eyebrow {
    display: block;

    margin-bottom: 8px;

    color:
        var(--drena-orange);

    font-size: 12px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: .16em;

    text-transform: uppercase;
}


/* =========================================================
   4. COMMON BUTTON
========================================================= */

.drena-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding:
        0 20px;

    border:
        1px solid
        var(--drena-orange);

    border-radius:
        var(--drena-radius-sm);

    background:
        var(--drena-orange);

    color:
        #ffffff;

    font-size: 14px;
    font-weight: 700;

    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color
        var(--drena-transition),

        border-color
        var(--drena-transition),

        transform
        var(--drena-transition),

        box-shadow
        var(--drena-transition);
}


.drena-button:hover {
    background:
        var(--drena-orange-hover);

    border-color:
        var(--drena-orange-hover);

    color:
        #ffffff;

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 20px
        rgba(255, 83, 21, 0.20);
}


/* =========================================================
   5. DARK FORM CONTROLS
========================================================= */

.drena-dark-control {
    width: 100%;
    min-height: 46px;

    padding:
        0 14px;

    border:
        1px solid
        var(--drena-border-dark);

    border-radius:
        var(--drena-radius-sm);

    background:
        var(--drena-bg-soft);

    color:
        var(--drena-text-light);

    outline: none;

    transition:
        background-color
        var(--drena-transition),

        border-color
        var(--drena-transition),

        box-shadow
        var(--drena-transition);
}


.drena-dark-control::placeholder {
    color:
        var(--drena-text-dim);
}


.drena-dark-control:focus {
    background:
        var(--drena-bg-raised);

    border-color:
        var(--drena-orange);

    box-shadow:
        0 0 0 2px
        rgba(255, 83, 21, 0.12);
}


/* =========================================================
   6. COMMON LIGHT CARD
========================================================= */

.drena-card {
    overflow: hidden;

    background:
        var(--drena-surface);

    border:
        1px solid
        var(--drena-border-light);

    border-radius:
        var(--drena-radius-md);

    box-shadow:
        var(--drena-shadow-sm);

    color:
        var(--drena-ink);

    transition:
        transform
        var(--drena-transition),

        box-shadow
        var(--drena-transition),

        border-color
        var(--drena-transition);
}


.drena-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        var(--drena-shadow-md);
}


/* =========================================================
   7. ACCESSIBILITY
========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .drena-button,
    .drena-dark-control,
    .drena-card {

        transition:
            none;
    }

}


/* =========================================================
   8. RESPONSIVE GLOBAL SHELL
========================================================= */

@media (
    max-width: 800px
) {

    .drena-shell {

        width:
            min(
                100% - 32px,
                var(--drena-container)
            );
    }

}


@media (
    max-width: 520px
) {

    .drena-shell {

        width:
            min(
                100% - 24px,
                var(--drena-container)
            );
    }

}