/* =============================================================
   DARK THEME — modern dark, inspired by Discord / GitHub Dark.
   Softer blue accent, slightly lighter surfaces, calmer feel.
   ============================================================= */

:root {
    /* Surfaces */
    --bg-body:       #1a1b2e;
    --bg-sidebar:    #15162a;
    --bg-card:       #1e1f33;
    --bg-card-solid: #1e1f33;
    --bg-input:      #141528;

    /* Borders */
    --border:        #2d2e44;
    --border-subtle: #252638;

    /* Text */
    --text-primary:  #e2e4e9;
    --text-heading:  #f0f1f5;
    --text-secondary:#9ea1b0;
    --text-muted:    #6b6e7f;

    /* Cashier name colour — bright cyan, reads clearly on the dark bg. */
    --cashier-name:  #22d3ee;

    /* Accent */
    --accent:        #6d8cff;
    --accent-secondary: #8fa8ff;
    --accent-hover-bg: rgba(109, 140, 255, 0.12);
    --accent-border: rgba(109, 140, 255, 0.25);

    /* Functional colours */
    --green:  #2ecc71;
    --red:    #e74c3c;
    --gold:   #ffd700;
    --orange: #e67e22;
    --blue:   #3498db;
    --purple: #a78bfa;

    /* ---- Up To You Ka console v3 -------------------------------------
       Eight values the v3 design uses that no token covered. They are
       here rather than as literals in utyk-admin.css because that file
       holds exactly one hard-coded hex in 65KB on purpose: the console
       follows whichever skin the operator picked, and a pasted palette
       would pin it to dark and silently break the other three.

       Dark carries the design's exact values because that is the theme
       the pack was drawn in and the one the operators use. The other
       three derive, so a later change to --accent or --bg-card-solid
       carries through instead of drifting.
       ------------------------------------------------------------- */
    --bg-sunken:         #181a2c;
    --bg-sunken-deep:    #0f1020;
    --rule-underline:    #4a4d66;
    --bg-sel:            #252842;
    --border-sel:        #3a3e63;
    --bg-bubble-out:     #252c4d;
    --border-bubble-out: #37406b;
    --pink:              #ff8fb8;

    /* Buttons */
    --btn-gradient:  linear-gradient(135deg, #6d8cff, #5b6abf);
    --btn-text:      #ffffff;
    --btn-shadow:    rgba(109, 140, 255, 0.25);

    /* Misc */
    --link-color:    #6d8cff;
    --modal-bg:      #1e1f33;
    --overlay-bg:    rgba(0, 0, 0, 0.65);
    --select-bg:     #141528;
    --select-arrow:  %239ea1b0;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ea1b0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    --presence-border: #15162a;
    --shadow-lg:     0 8px 32px rgba(0,0,0,0.5);
    --shadow-card:   none;
    --bg-section:    rgba(10, 10, 30, 0.4);
    --bg-inset:      rgba(0, 0, 0, 0.2);
}

/* Mobile dark theme is handled independently in mobile.css via body.theme-dark.
   That class is set from the user's mobile-theme preference (separate from
   data-theme here), so the two systems don't interfere. */