/* 27185 POS shared design tokens.
   One source for color, radius, elevation, and focus across POS, admin, and dialogs.
   Brand yellow = identity (logo, active nav). Primary green = checkout / confirm only. */

:root {
    /* Neutral (stone) */
    --ui-bg: #f5f5f4;
    --ui-surface: #ffffff;
    --ui-surface-muted: #fafaf9;
    --ui-surface-sunken: #f5f5f4;
    --ui-border: #e7e5e4;
    --ui-border-strong: #d6d3d1;
    --ui-border-hover: #a8a29e;
    --ui-text: #292524;
    --ui-text-strong: #1c1917;
    --ui-text-body: #44403c;
    --ui-text-secondary: #57534e;
    --ui-text-muted: #78716c;
    --ui-text-subtle: #a8a29e;

    /* Brand (yellow) */
    --ui-brand: #eab308;
    --ui-brand-hover: #ca8a04;
    --ui-brand-soft: #fefce8;
    --ui-brand-soft-strong: #fef9c3;
    --ui-brand-border: #fde68a;
    --ui-brand-text: #713f12;
    --ui-brand-on: #1c1917;

    /* Primary action (emerald) */
    --ui-primary: #059669;
    --ui-primary-hover: #047857;
    --ui-primary-strong: #064e3b;
    --ui-primary-soft: #ecfdf5;
    --ui-primary-border: #a7f3d0;
    --ui-primary-text: #047857;

    /* Semantic */
    --ui-danger: #dc2626;
    --ui-danger-hover: #b91c1c;
    --ui-danger-soft: #fef2f2;
    --ui-danger-border: #fecaca;
    --ui-warning: #d97706;
    --ui-warning-hover: #b45309;
    --ui-warning-soft: #fffbeb;
    --ui-warning-border: #fde68a;
    --ui-warning-text: #92400e;
    --ui-info: #2563eb;
    --ui-info-hover: #1d4ed8;
    --ui-info-soft: #eff6ff;
    --ui-info-border: #bfdbfe;

    /* Radius: control / card / panel / pill */
    --ui-radius-sm: 6px;
    --ui-radius: 8px;
    --ui-radius-lg: 12px;
    --ui-radius-pill: 9999px;

    /* Elevation: resting card / raised popover / modal */
    --ui-shadow-sm: 0 1px 2px rgba(28, 25, 23, .06);
    --ui-shadow-md: 0 4px 12px rgba(28, 25, 23, .08), 0 1px 2px rgba(28, 25, 23, .05);
    --ui-shadow-lg: 0 20px 48px rgba(28, 25, 23, .18), 0 2px 6px rgba(28, 25, 23, .08);
    --ui-overlay: rgba(28, 25, 23, .46);

    /* Focus */
    --ui-focus-ring: 0 0 0 3px rgba(234, 179, 8, .45);

    /* Motion */
    --ui-duration: .12s;
    --ui-ease: ease;
}

/* Monochrome line icon (templates/partials/ui_icons.php). */
.ui-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Colored status dot (replaces colored-circle emoji where color carries meaning). */
.ui-dot {
    display: inline-block;
    width: .6em;
    height: .6em;
    margin-right: .25em;
    border-radius: 9999px;
    background: var(--ui-dot, #a8a29e);
    vertical-align: .05em;
}

/* Page title icon: muted so the title text leads. */
.ui-title-icon {
    color: var(--ui-text-subtle);
}

/* Keyboard focus on actions: visible on keyboard navigation only, never on mouse click.
   Inputs keep their own focus styles. Zero specificity so component styles still win. */
:where(a, button, [role="button"], summary):focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}