/*
  Design tokens (PLAT-056, refined for the POS redesign). Components use these variables only, so
  light and dark are two token sets. Direction-agnostic: no left/right anywhere in the style sheets.
  Dark follows the system unless the page sets data-theme="light" or "dark".

  Palette: cool, slightly blue-tinted neutrals so white surfaces read as layered rather than flat;
  one confident blue for the primary action, focus and selection; status colours used sparingly.
*/
:root {
    color-scheme: light;

    /* Surfaces, from the app background up to overlays. */
    --c-bg: #f4f5f8;
    --c-surface: #ffffff;
    --c-surface-subtle: #f8f9fb;
    --c-surface-sunken: #f4f5f8;
    --c-surface-hover: #f2f4f7;
    --c-surface-translucent: rgba(255, 255, 255, 0.82);
    --c-sidebar: #f4f5f8;
    --c-border: #e5e7eb;
    --c-border-strong: #d0d5dd;
    --c-control-border: #858d9e;

    /* Text. */
    --c-text: #111827;
    --c-text-secondary: #5d6679;
    --c-text-tertiary: #646c7d;

    /* The primary action is the brand blue; links, focus and selection share it. */
    --c-action: #2563eb;
    --c-action-hover: #1d4ed8;
    --c-action-pressed: #1e40af;
    --c-action-text: #ffffff;
    --c-accent: #2563eb;
    --c-accent-hover: #1d4ed8;
    --c-accent-text: #ffffff;
    --c-link: #1d5fe0;
    --c-accent-soft: #eef3fe;
    --c-accent-soft-text: #1d4ed8;
    --c-focus: #2563eb;
    --c-focus-ring: rgba(37, 99, 235, 0.22);
    --c-selection-indicator: #2563eb;

    /* Status. */
    --c-success: #067647;
    --c-success-text: #ffffff;
    --c-success-soft: #ecfdf3;
    --c-success-soft-text: #067647;
    --c-warning: #dc6803;
    --c-warning-soft: #fff7e8;
    --c-warning-soft-text: #b54708;
    --c-danger: #c8291d;
    --c-danger-hover: #a82218;
    --c-danger-text: #ffffff;
    --c-danger-soft: #fef3f2;
    --c-danger-soft-text: #b42318;
    --c-purple-soft: #f4f0ff;
    --c-purple-soft-text: #5925dc;

    --c-toast: #111827;
    --c-toast-text: #ffffff;
    --c-toast-success-icon: #47cd89;
    --c-toast-danger-icon: #f97066;
    --c-overlay: rgba(16, 24, 40, 0.38);

    /* Type: one family for Arabic and Latin; mono for barcodes, IMEIs and codes that must not be misread.
       Arabic needs a little more size and line height than Latin to stay readable at small sizes. */
    --font-sans: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --fs-display: 2rem;
    --fs-title: 1.5rem;
    --fs-section: 1.125rem;
    --fs-lead: 1.0625rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.875rem;
    --fs-caption: 0.8125rem;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-tight: 1.25;
    --lh-body: 1.6;

    /* Spacing scale: 4 8 12 16 24 32 48. */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.125rem;
    --radius-pill: 999px;

    /* Elevation: hairline borders do most of the work; shadows only lift what floats. */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-card: 0 0 0 1px var(--c-border), var(--shadow-xs);
    --shadow-raised: var(--shadow-sm);
    --shadow-overlay: 0 24px 48px -12px rgba(16, 24, 40, 0.22), 0 0 0 1px var(--c-border);

    --control-h-sm: 2.25rem;
    --control-h: 2.5rem;
    --control-h-lg: 3.25rem;
    /* The smallest effective tap area for any action (WCAG 2.5.5 / Apple HIG): small controls keep
       their compact look and extend an invisible hit area to this size (see .btn-small). */
    --touch-min: 2.75rem;

    --ease: cubic-bezier(0.2, 0, 0, 1);
    --dur-fast: 120ms;
    --dur: 200ms;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --c-bg: #0e1014;
        --c-surface: #14161b;
        --c-surface-subtle: #171a1f;
        --c-surface-sunken: #1b1e24;
        --c-surface-hover: #1f232a;
        --c-surface-translucent: rgba(24, 27, 33, 0.82);
        --c-sidebar: #111317;
        --c-border: #262a31;
        --c-border-strong: #353a43;
        --c-control-border: #6e7787;
        --c-text: #f2f4f7;
        --c-text-secondary: #9aa3b2;
        --c-text-tertiary: #8790a0;
        --c-action: #2f6bf0;
        --c-action-hover: #2559cf;
        --c-action-pressed: #1f4db8;
        --c-action-text: #ffffff;
        --c-accent: #2f6bf0;
        --c-accent-hover: #2559cf;
        --c-accent-text: #ffffff;
        --c-link: #7aa7ff;
        --c-accent-soft: #1a2540;
        --c-accent-soft-text: #a9c4ff;
        --c-focus: #5b8def;
        --c-focus-ring: rgba(91, 141, 239, 0.3);
        --c-selection-indicator: #5b8def;
        --c-success: #3ccb7f;
        --c-success-text: #0b1f14;
        --c-success-soft: #10261c;
        --c-success-soft-text: #6ce0a2;
        --c-warning: #f5a524;
        --c-warning-soft: #2b1f0e;
        --c-warning-soft-text: #f5b865;
        --c-danger: #c93636;
        --c-danger-hover: #b42f2f;
        --c-danger-text: #ffffff;
        --c-danger-soft: #2e1513;
        --c-danger-soft-text: #ff9c93;
        --c-purple-soft: #251a3d;
        --c-purple-soft-text: #c9b2ff;
        --c-toast: #f2f4f7;
        --c-toast-text: #111827;
        --c-toast-success-icon: #067647;
        --c-toast-danger-icon: #c2281d;
        --c-overlay: rgba(0, 0, 0, 0.6);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-overlay: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--c-border);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --c-bg: #0e1014;
    --c-surface: #14161b;
    --c-surface-subtle: #171a1f;
    --c-surface-sunken: #1b1e24;
    --c-surface-hover: #1f232a;
    --c-surface-translucent: rgba(24, 27, 33, 0.82);
    --c-sidebar: #111317;
    --c-border: #262a31;
    --c-border-strong: #353a43;
    --c-control-border: #6e7787;
    --c-text: #f2f4f7;
    --c-text-secondary: #9aa3b2;
    --c-text-tertiary: #8790a0;
    --c-action: #2f6bf0;
    --c-action-hover: #2559cf;
    --c-action-pressed: #1f4db8;
    --c-action-text: #ffffff;
    --c-accent: #2f6bf0;
    --c-accent-hover: #2559cf;
    --c-accent-text: #ffffff;
    --c-link: #7aa7ff;
    --c-accent-soft: #1a2540;
    --c-accent-soft-text: #a9c4ff;
    --c-focus: #5b8def;
    --c-focus-ring: rgba(91, 141, 239, 0.3);
    --c-selection-indicator: #5b8def;
    --c-success: #3ccb7f;
    --c-success-text: #0b1f14;
    --c-success-soft: #10261c;
    --c-success-soft-text: #6ce0a2;
    --c-warning: #f5a524;
    --c-warning-soft: #2b1f0e;
    --c-warning-soft-text: #f5b865;
    --c-danger: #c93636;
    --c-danger-hover: #b42f2f;
    --c-danger-text: #ffffff;
    --c-danger-soft: #2e1513;
    --c-danger-soft-text: #ff9c93;
    --c-purple-soft: #251a3d;
    --c-purple-soft-text: #c9b2ff;
    --c-toast: #f2f4f7;
    --c-toast-text: #111827;
    --c-toast-success-icon: #067647;
    --c-toast-danger-icon: #c2281d;
    --c-overlay: rgba(0, 0, 0, 0.6);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-overlay: 0 24px 48px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--c-border);
}

/* Touch screens: larger targets. */
@media (pointer: coarse) {
    :root {
        --control-h-sm: var(--touch-min);
        --control-h: var(--touch-min);
    }
}

/* Reduced motion and transparency are honoured everywhere. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur: 0ms;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --c-surface-translucent: var(--c-surface);
    }
}