/*
 * Design tokens (UI optimization plan, Phase 2).
 * Load first: every app stylesheet (legacy, layout, components, utilities) reads these.
 * Change a value here to change it everywhere; add a token before hard-coding a new colour.
 */

:root {
    /* Brand */
    --app-brand-dark: #272727;

    /* Surfaces */
    --app-body-bg: #f2f3f8;
    --app-surface-muted: #f5f6fc;

    /* Neutrals */
    --app-gray-100: #f2f2f2;
    --app-gray-200: #eaeaeb;
    --app-gray-300: #dedede;
    --app-gray-500: #808080;
    --app-border: #ebedf2;
    --app-divider: #bfbfbf;
    --app-text-muted: #6f727d;

    /* Status / accents */
    --app-danger: #f4516c;
    --app-accent-red: #f33333;
    --app-accent-orange: #ff8913;
    --app-accent-blue: #3366ff;
    --app-success: #34bfa3;
    --app-success-bg: #e3f6f1;

    /* Maps: locality areas and markers, and the one picked (Franchisee Edit, Localities / Villages; read by franchisee_locality.js) */
    --app-map-area: var(--app-brand-dark);
    --app-map-active: var(--app-success);

    /* Activity types (Appointment list and calendars: the type filter buttons and legend) */
    --app-type-all: #0a0a0a;
    --app-type-appointment: #36a3f7;
    --app-type-followup: #5867dd;
    --app-type-task: #00c5dc;

    /* Effects */
    --app-focus-ring: rgba(39, 39, 39, 0.12);

    /* Spacing scale */
    --app-space-1: 4px;
    --app-space-2: 8px;
    --app-space-3: 12px;
    --app-space-4: 16px;
    --app-space-5: 24px;
    --app-space-6: 32px;

    /* Shape */
    --app-radius-sm: 4px;
    --app-radius: 6px;
    --app-radius-lg: 10px;
    --app-shadow: 0 10px 30px rgba(39, 39, 39, 0.12);
}