/* ==========================================================================
   UltimatePOS — Design Tokens (light defaults)
   Single source of truth for brand color, semantic color, surfaces, text,
   shape and motion. Dark mode redefines the same variables in dark-theme.css
   when <html data-theme="dark"> is set, so every component that reads
   var(--upos-*) re-themes itself automatically.
   ========================================================================== */

:root {
    /* Brand ---------------------------------------------------------- */
    --upos-accent:        #646EE4;
    --upos-accent-hover:  #4f58d4;
    --upos-accent-soft:   #eef0fd;

    /* Semantic ------------------------------------------------------- */
    --upos-success:       #16a34a;
    --upos-success-soft:  #ecfdf5;
    --upos-danger:        #dc2626;
    --upos-danger-soft:   #fef2f2;
    --upos-warning:       #d97706;
    --upos-warning-soft:  #fffbeb;
    --upos-info:          #0284c7;

    /* Surfaces (light) ----------------------------------------------- */
    --upos-canvas:        #f1f5f9;
    --upos-surface:       #ffffff;
    --upos-surface-2:     #f8fafc;
    --upos-surface-3:     #eef2f7;
    --upos-border:        #e2e8f0;
    --upos-border-2:      #cbd5e1;

    /* Text (light) ----------------------------------------------------- */
    --upos-text:          #0f172a;
    --upos-text-2:        #475569;
    --upos-text-muted:    #94a3b8;

    /* POS "total payable" hero ----------------------------------------- */
    --upos-total-bg:      #ecfdf5;
    --upos-total-border:  #d1fae5;
    --upos-total-label:   #065f46;
    --upos-total-value:   #047857;

    /* Shape + motion ---------------------------------------------------- */
    --upos-radius-sm:     8px;
    --upos-radius-md:     12px;
    --upos-radius-lg:     16px;
    --upos-dur:           150ms;
    --upos-ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
    --upos-shadow-card:   0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --upos-shadow-pop:    0 12px 32px rgba(15, 23, 42, 0.16);
    --upos-focus-ring:    0 0 0 2px var(--upos-surface), 0 0 0 4px var(--upos-accent);
}

/* --------------------------------------------------------------------------
   Global refinements (both themes)
   -------------------------------------------------------------------------- */

/* Keyboard focus ring for interactive elements. Uses :where() so it never
   beats component-level focus styles. Inputs keep their border-based focus. */
:where(button, a, [role="button"], [role="menuitem"], summary, label.tw-dw-btn, .pos-filter-chip-clear, .product_box, .quantity-up, .quantity-down):focus-visible {
    outline: 2px solid var(--upos-accent);
    outline-offset: 2px;
}

/* Tabular numerals everywhere money / quantities are shown — stops column
   jitter and reads more precise. */
.number,
.total_quantity,
.price_total,
.pos_totals_value,
.pos_totals_right_value,
.pos_quantity,
input.input_number,
.product_price,
.total_paying,
.change_return_span,
.balance_due,
.display_currency,
.pos-unit-label {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Text selection tint */
::selection {
    background: var(--upos-accent-soft);
}