/*
 * tokens.css — Design tokens (CSS custom properties)
 * widget4 modernization
 */

:root {
    /* === Base colors (from widget3) === */
    --bg:           #fff;
    --bg-item:      #F8F8FA;
    --bg-lgray:     #F2F2F8;
    --bg-gray:      #A0A2AA;
    --bg-dark:      #0B0E18;
    --bg-dark2:     #161923;
    --btn-bg:       #E93537;
    --btn-hover:    #730D0E;
    --btn-press:    #470606;
    --btn-checked:  #0B0E18;

    /* === Extended colors === */
    --color-success:        #2e7d32;
    --color-success-light:  #e8f5e9;
    --color-warning:        #f57c00;
    --color-warning-light:  #fff3e0;
    --color-info:           #0288d1;
    --color-info-light:     #e1f5fe;
    --color-error:          var(--btn-bg);
    --color-error-light:    #FFEAEB;
    --color-border:         #e0e0e0;
    --color-text-muted:     #80808C;

    /* === Shadows === */
    --shadow-sm:    0 2px 8px  rgba(0,0,0,0.06);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:    0 8px 32px rgba(0,0,0,0.14);
    --shadow-focus: 0 0 0 3px rgba(233,53,55,0.20);

    /* === Border radius === */
    --radius-sm:    8px;
    --radius-md:    16px;
    --radius-lg:    24px;
    --radius-xl:    32px;

    /* === Transitions === */
    --transition-fast:   150ms ease;
    --transition-normal: 280ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   420ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === Z-index layers === */
    --z-dropdown:   100;
    --z-modal:      200;
    --z-overlay:    300;
    --z-toast:      400;
}