/* Fluent 2 Light — semantic + component tokens.
   Legacy names (--app-bg, --surface, --primary, …) stay as aliases. */
:root,
[data-theme="light"] {
    color-scheme: light;

    /* --- Semantic --- */
    --color-background-app: #f1f5f9;
    --color-background-surface: var(--palette-grey-0);
    --color-background-elevated: var(--palette-grey-0);
    --color-background-subtle: #f5f6f8;
    --color-background-muted: #e8eaee;
    --color-background-overlay: rgb(0 0 0 / 0.45);

    --color-text-primary: #242424;
    --color-text-secondary: #424242;
    --color-text-muted: #616161;
    --color-text-disabled: #696969;
    /* Light brand = items royal blue (user decision 0038); dark keeps SlateBlue */
    --color-text-brand: var(--palette-royal-80);
    --color-text-inverse: var(--palette-grey-0);
    --color-text-on-brand: var(--palette-grey-0);
    --color-text-on-brand-muted: #f3f0ff;

    /* Unified border (decision 0038): one border for every screen = items card border */
    --color-border-default: var(--palette-royal-border);
    --color-border-strong: #757575;
    --color-border-subtle: var(--palette-royal-border);
    --color-stroke-focus: var(--palette-royal-60);

    --color-action-primary: var(--palette-royal-60);
    --color-action-primary-hover: var(--palette-royal-70);
    --color-action-primary-pressed: var(--palette-royal-80);
    --color-action-primary-tint: var(--palette-royal-20);
    --color-action-accent: var(--palette-royal-70);

    --color-status-success: var(--palette-green-50);
    --color-status-success-tint: var(--palette-green-20);
    --color-status-danger: var(--palette-red-50);
    --color-status-danger-tint: var(--palette-red-20);
    --color-status-warning: var(--palette-orange-50);
    --color-status-warning-tint: var(--palette-orange-20);
    --color-status-info: var(--palette-blue-50);
    --color-status-info-tint: var(--palette-blue-20);
    --color-status-neutral: var(--palette-grey-50);
    --color-status-purple: var(--palette-purple-50);
    --color-status-blocked: var(--palette-rose-50);
    --color-status-blocked-tint: var(--palette-rose-20);

    --color-highlight-barcode: #fffbd6;
    --color-highlight-barcode-text: #1d1f23;
    --color-fy-flash: var(--palette-royal-60); /* أزرق بدل الأوركيد في الفاتح */

    --color-chrome-bg: var(--palette-chrome);
    --color-chrome-text: var(--palette-grey-0);
    --color-chrome-muted: #e8e8e8;
    --color-chrome-disabled: #b8b8b8;
    --color-chrome-brand: var(--palette-royal-40);
    --color-chrome-hover: rgb(255 255 255 / 0.10);
    --color-chrome-border: rgb(255 255 255 / 0.55);
    /* شريط القوائم (tap bar) في الفاتح فقط — كحلي من الصورة المرجعية */
    --color-chrome-tap-bg: #1e293b;
    --color-chrome-tap-text: var(--color-chrome-text);
    --color-chrome-tap-muted: var(--color-chrome-muted);
    --color-chrome-tap-hover: var(--color-chrome-hover);

    --color-hover: #f0f0f0;
    --color-selected: var(--palette-royal-20);
    --color-input-bg: var(--palette-grey-0);
    --color-input-bg-disabled: #f0f0f0;

    --shadow-sm: 0 0 2px rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.14);
    --shadow-md: 0 0 2px rgb(0 0 0 / 0.12), 0 4px 8px rgb(0 0 0 / 0.14);
    --shadow-lg: 0 0 8px rgb(0 0 0 / 0.12), 0 14px 28px rgb(0 0 0 / 0.18);
    /* نفس حلقة تركيز شاشة الأصناف (أنعم من الحلقة الصلبة) */
    --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-stroke-focus) 45%, transparent);
    --focus-ring-chrome: 0 0 0 2px var(--color-chrome-brand);

    /* --- Component --- */
    --btn-primary-bg: var(--color-action-primary);
    --btn-primary-fg: var(--color-text-on-brand);
    --btn-primary-hover: var(--color-action-primary-hover);
    --btn-success-bg: var(--palette-green-50);
    --btn-success-hover: #0b650b;
    --btn-success-fg: var(--color-text-on-brand);
    --btn-danger-fill: var(--palette-red-50);
    --btn-danger-fg: var(--color-text-on-brand);
    --input-border: var(--color-border-default);
    --input-border-hover: var(--color-action-primary);
    --input-border-focus: var(--color-stroke-focus);
    --table-header-bg: var(--color-action-primary-tint);
    --table-header-fg: var(--color-text-brand);
    --table-row-alt: #f5f6f8;
    --table-row-hover: var(--color-hover);
    --table-row-selected: var(--color-selected);

    /* --- Legacy aliases (existing CSS / JS class contracts) --- */
    --app-bg: var(--color-background-app);
    --surface: var(--color-background-surface);
    --surface-secondary: var(--color-background-subtle);
    --surface-tertiary: var(--color-background-muted);
    --surface-muted: var(--color-background-muted);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-brand: var(--color-text-brand);
    --text-inverse: var(--color-text-inverse);
    --border-color: var(--color-border-default);
    --border-strong: var(--color-border-strong);
    --primary: var(--color-action-primary);
    --primary-hover: var(--color-action-primary-hover);
    --primary-contrast: var(--color-text-on-brand);
    --primary-tint: var(--color-action-primary-tint);
    --hover: var(--color-hover);
    --selected: var(--color-selected);
    --selected-bg: var(--color-selected);
    --accent: var(--color-action-primary);
    --chrome-bg: var(--color-chrome-bg);
    --chrome-text: var(--color-chrome-text);
    --chrome-muted: var(--color-chrome-muted);
    --chrome-disabled: var(--color-chrome-disabled);
    --chrome-brand: var(--color-chrome-brand);
    --chrome-hover: var(--color-chrome-hover);
    --input-bg: var(--color-input-bg);
    --input-bg-disabled: var(--color-input-bg-disabled);
    --grid-header-bg: var(--table-header-bg);
    --grid-row-alt: var(--table-row-alt);
}