/* ═══════════════════════════════════════════════════════════════
   Paynt Design System — Design Tokens
   Based on Azure Portal / Fluent 2 Design System
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── Brand ─── */
    --brand-primary: #0078D4;
    --brand-primary-hover: #106EBE;
    --brand-primary-active: #005A9E;
    --brand-primary-disabled: rgba(0, 120, 212, 0.4);
    --brand-light: #DEECF9;
    --brand-lightest: #EFF6FC;
    --brand-dark: #004578;

    /* ─── Backgrounds ─── */
    --bg-page: #FAF9F8;
    --bg-surface: #FFFFFF;
    --bg-surface-secondary: #F3F2F1;
    --bg-surface-tertiary: #EDEBE9;
    --bg-overlay: rgba(0, 0, 0, 0.4);
    --bg-sidebar: #FFFFFF;

    /* ─── Text ─── */
    --text-primary: #323130;
    --text-secondary: #605E5C;
    --text-tertiary: #A19F9D;
    --text-disabled: #C8C6C4;
    --text-on-brand: #FFFFFF;
    --text-link: #0078D4;
    --text-link-hover: #004578;

    /* ─── Borders ─── */
    --border-default: #EDEBE9;
    --border-strong: #D2D0CE;
    --border-stronger: #A19F9D;
    --border-focus: #323130;
    --border-brand: #0078D4;
    --border-divider: #EDEBE9;

    /* ─── Status / Semantic ─── */
    --status-success: #107C10;
    --status-success-bg: #DFF6DD;
    --status-warning: #797600;
    --status-warning-bg: #FFF4CE;
    --status-error: #D13438;
    --status-error-bg: #FDE7E9;
    --status-info: #0078D4;
    --status-info-bg: #EFF6FC;
    --status-severe-warning: #D83B01;
    --status-severe-warning-bg: #FED9CC;

    /* ─── POS ─── */
    --pos-cash: #107C10;
    --pos-credit: #D83B01;
    --pos-electronic: #0078D4;
    --pos-return: #D13438;
    --pos-hold: #797600;

    /* ─── Typography ─── */
    --font-family: 'Tajawal', 'Segoe UI', 'Segoe UI Arabic', -apple-system, BlinkMacSystemFont, 'Roboto', 'Noto Sans Arabic', 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'Cascadia Code', 'Consolas', 'Courier New', monospace;

    /* ─── Spacing ─── */
    --space-none: 0;
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 12px;
    --space-l: 16px;
    --space-xl: 20px;
    --space-xxl: 24px;
    --space-xxxl: 32px;
    --space-xxxxl: 48px;

    /* ─── Shadows ─── */
    --shadow-none: none;
    --shadow-2: 0 1px 2px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.08);
    --shadow-4: 0 1.6px 3.6px rgba(0,0,0,0.13), 0 0.3px 0.9px rgba(0,0,0,0.11);
    --shadow-8: 0 3.2px 7.2px rgba(0,0,0,0.13), 0 0.6px 1.8px rgba(0,0,0,0.11);
    --shadow-16: 0 6.4px 14.4px rgba(0,0,0,0.13), 0 1.2px 3.6px rgba(0,0,0,0.11);
    --shadow-64: 0 25.6px 57.6px rgba(0,0,0,0.22), 0 4.8px 14.4px rgba(0,0,0,0.18);

    /* ─── Border Radius ─── */
    --radius-none: 0;
    --radius-s: 2px;
    --radius-m: 4px;
    --radius-l: 8px;
    --radius-xl: 12px;
    --radius-circular: 50%;

    /* ─── Motion ─── */
    --duration-instant: 50ms;
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;
    --easing-default: cubic-bezier(0.33, 0, 0.67, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0, 1);
    --easing-accelerate: cubic-bezier(1, 0, 1, 1);

    /* ─── Layout ─── */
    --topbar-height: 48px;
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 48px;
    --breadcrumbs-height: 40px;
    --commandbar-height: 44px;
}

/* ─── Dark Theme ─── */
[data-theme="dark"] {
    --bg-page: #1B1A19;
    --bg-surface: #292827;
    --bg-surface-secondary: #3B3A39;
    --bg-surface-tertiary: #484644;
    --bg-sidebar: #252423;
    --text-primary: #FAF9F8;
    --text-secondary: #D2D0CE;
    --text-tertiary: #A19F9D;
    --text-disabled: #605E5C;
    --border-default: #484644;
    --border-strong: #605E5C;
    --brand-primary: #4EA8DE;
    --brand-light: #0F3B5E;
    --status-success: #5DB75D;
    --status-error: #F1707B;
    --status-warning: #FCE100;
}