/*
 * Davaya design tokens — the single source of colours, type, spacing, radii and shadows for every area
 * (landing, storefront, pharmacy dashboard, super admin, customer account, driver app, error pages).
 * Load this file FIRST; area stylesheets map their own variable names onto these tokens.
 * Pharmacies override only --brand-* at runtime (their colours); everything else stays consistent.
 *
 * Palette from the logo: Dark Blue #2C5B80, Green #45A76C, Teal #7CC5B5, Light Green #96CF86.
 * Contrast (WCAG 2.x): white on #2E8553 4.57:1 (buttons) · on #2C5B80 7.20:1 · #16324A on #FFF 13.2:1 ·
 * #2B3F52 on #FFF 10.9:1 · #53677A on #FFF 5.85:1 · #5E7380 (n-500) on #FFF 5.1:1. #45A76C is for
 * accents/icons/large text only (3.0:1 with white).
 */
:root {
    /* brand */
    --color-primary: #45A76C;
    --color-primary-strong: #2E8553;   /* green buttons / green text on white (AA) */
    --color-primary-hover: #2A7A4C;
    --color-primary-active: #236A41;
    --color-primary-tint: #E3F3E8;
    --color-secondary: #2C5B80;
    --color-secondary-hover: #234A69;
    --color-secondary-tint: #E6EEF5;
    --color-accent: #7CC5B5;
    --color-accent-soft: #96CF86;

    /* text & surfaces */
    --color-heading: #16324A;
    --color-text-main: #2B3F52;
    --color-text-muted: #53677A;
    --color-icon: #2C5B80;
    --color-bg: #F7FAF8;
    --color-surface: #FFFFFF;
    --color-surface-alt: #EEF4F2;
    --color-border: #DCE6E3;
    --color-border-strong: #B9CAC6;
    --color-footer: #16324A;
    --color-footer-text: #C9D6E0;

    /* neutral scale, tinted toward the logo blue-green (replaces cold slate greys) */
    --n-50: #F7FAF9;
    --n-100: #EEF3F2;
    --n-200: #DCE6E3;
    --n-300: #B9CAC6;
    --n-400: #8DA2A8;
    --n-500: #5E7380;
    --n-600: #45596A;
    --n-700: #2F4457;
    --n-800: #1D3044;

    /* status */
    --color-success: #1E7A4C;  --color-success-tint: #E6F5EC;  --color-success-line: #A9DABD;
    --color-warning: #A15C07;  --color-warning-tint: #FFF6E5;  --color-warning-line: #F5D39A;
    --color-danger:  #B42318;  --color-danger-tint:  #FDECEA;  --color-danger-line:  #F5B7B1;
    --color-info:    #1D5D8A;  --color-info-tint:    #E8F1F8;  --color-info-line:    #B7D2E6;
    --color-wa: #1F7A4A;

    /* type */
    --font-body: 'Almarai', 'Segoe UI', Tahoma, sans-serif;
    --font-head: 'Cairo', 'Almarai', 'Segoe UI', Tahoma, sans-serif;
    --font-latin: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-xs: 12px;   /* smallest text allowed (counters/badges only) */
    --text-sm: 13.5px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    --text-3xl: 36px;

    /* shape & depth */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(22, 50, 74, .06), 0 1px 3px rgba(22, 50, 74, .05);
    --shadow-md: 0 6px 18px rgba(22, 50, 74, .08);
    --shadow-lg: 0 20px 50px rgba(22, 50, 74, .14);
    --focus-ring: 0 0 0 3px rgba(44, 91, 128, .35);

    /* spacing (4px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* touch */
    --tap: 44px;        /* recommended minimum touch target */
    --tap-min: 36px;    /* dense UIs (tables, chips) */

    /* layers */
    --z-header: 30;
    --z-fab: 40;
    --z-drawer: 50;
    --z-modal: 60;
    --z-toast: 70;
}

/* consistent keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}