/*
======================================================================
 EcoDrop Kiosk OS V2
 ---------------------------------------------------------------------
 File        : /kiosk/ui/theme.css
 Module      : Theme
 Version     : 2.0.0
======================================================================
*/

/* ==========================================================
   LIGHT THEME (DEFAULT)
========================================================== */

:root{

    --theme-bg:var(--eco-surface);
    --theme-surface:var(--eco-surface-elevated);
    --theme-card:var(--eco-surface-glass);

    --theme-text:var(--eco-text-primary);
    --theme-text-soft:var(--eco-text-secondary);

    --theme-border:var(--eco-border);

    --theme-primary:var(--eco-primary);
    --theme-success:var(--eco-success);
    --theme-warning:var(--eco-warning);
    --theme-danger:var(--eco-danger);

}

/* ==========================================================
   DARK
========================================================== */

html[data-theme="dark"]{

    --theme-bg:#0F172A;
    --theme-surface:#162033;
    --theme-card:#1F2937;

    --theme-text:#F8FAFC;
    --theme-text-soft:#CBD5E1;

    --theme-border:#334155;

    --theme-primary:#38BDF8;
    --theme-success:#22C55E;
    --theme-warning:#F59E0B;
    --theme-danger:#EF4444;

}

/* ==========================================================
   BODY
========================================================== */

body{

    background:var(--theme-bg);

    color:var(--theme-text);

    transition:

        background .35s ease,

        color .35s ease;

}

/* ==========================================================
   SURFACE
========================================================== */

.eco-surface{

    background:var(--theme-surface);

}

.eco-card{

    background:var(--theme-card);

    border:1px solid var(--theme-border);

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

.eco-title,
.eco-hero__title{

    color:var(--theme-text);

}

.eco-subtitle,
.eco-description,
.eco-card__subtitle{

    color:var(--theme-text-soft);

}

/* ==========================================================
   STATUS
========================================================== */

.eco-status--online{

    color:var(--theme-success);

}

.eco-status--offline{

    color:var(--theme-danger);

}

.eco-status--warning{

    color:var(--theme-warning);

}

/* ==========================================================
   BUTTONS
========================================================== */

.eco-button--primary{

    background:var(--theme-primary);

}

.eco-button--success{

    background:var(--theme-success);

}

.eco-button--danger{

    background:var(--theme-danger);

}

.eco-button--warning{

    background:var(--theme-warning);

}

/* ==========================================================
   TRANSITIONS
========================================================== */

html{

    transition:

        background-color .35s ease,

        color .35s ease;

}