/* ======================================================
   OPTIMA DESIGN TOKENS
====================================================== */

/* ==========================================
   DARK THEME (DEFAULT)
========================================== */

:root {

    /* Brand */

    --op-color-primary: #303D51;
    --op-color-secondary: #008ED8;
    --op-color-accent: #D66A3A;

    /* Background */

    --op-color-bg: #101723;
    --op-color-surface: #182332;
    --op-color-card: #223042;

    /* Text */

    --op-color-text: #FFFFFF;
    --op-color-text-secondary: rgba(255,255,255,.72);

    /* UI */

    --op-color-border: rgba(255,255,255,.08);

    --op-color-overlay: rgba(0,0,0,.45);

    /* Glass */

    --op-glass-bg: rgba(255,255,255,.05);
    --op-glass-border: rgba(255,255,255,.08);

    /* Shadow */

    --op-shadow: 0 25px 60px rgba(0,0,0,.30);

    /* Radius */

--op-radius-sm: 8px;
--op-radius-md: 12px;
--op-radius-lg: 18px;
--op-radius-xl: 24px;
--op-radius-round: 8px;

    /* Blur */

    --op-blur: 20px;

    /* Layout */

    --op-container-width: 1800px;
    --op-container-padding: 48px;

    /* Animation */

    --op-transition: .35s ease;

}


/* ==========================================
   LIGHT THEME
========================================== */

html[data-theme="light"] {

    /* Background */

    --op-color-bg: #F5F7FA;
    --op-color-surface: #FFFFFF;
    --op-color-card: #FFFFFF;

    /* Text */

    --op-color-text: #1E293B;
    --op-color-text-secondary: rgba(30,41,59,.70);

    /* UI */

    --op-color-border: rgba(30,41,59,.08);

    --op-color-overlay: rgba(255,255,255,.15);

    /* Glass */

    --op-glass-bg: rgba(255,255,255,.75);
    --op-glass-border: rgba(30,41,59,.08);

    /* Shadow */

    --op-shadow: 0 20px 50px rgba(0,0,0,.08);

}


html[data-theme="light"] .op-theme-toggle__thumb {

    transform: translateX(26px);

}