@layer base {

/**
 * DH Disaster Response Platform - Shared Design Tokens
 * ====================================================
 * CANONICAL LOCATION: shared/static/css/design-tokens.css
 *
 * This file is the single source of truth for design tokens across
 * the DH Suite monorepo (Reach, Respond, Portal). Each app's
 * static/css/design-tokens.css is a symlink to this file.
 *
 * DO NOT create copies - edit this file directly.
 *
 * IMPORTANT: The --color-brand variable should be set dynamically via
 * deployment_config.yaml (branding_color setting). The value is injected
 * into <style> tags in base templates.
 *
 * Example usage in base.html:
 *   <style>
 *       :root {
 *           --color-brand: {{ branding_color|default('#0d9488') }};
 *       }
 *   </style>
 */

:root {
    /* ========================================================================
       Brand Colors (configurable via deployment_config.yaml)
       ======================================================================== */

    /* Primary color - uses branding_color from config */
    --color-primary: var(--color-brand, #0d9488);
    --color-primary-dark: #0f766e;
    --color-primary-light: #14b8a6;

    /* ========================================================================
       Semantic Colors (fixed - not configurable)
       WCAG AA Contrast Ratios (4.5:1 for text, 3:1 for large text/UI):
       - success (#22c55e) on white: 2.8:1 - USE DARK FOR TEXT
       - success-dark (#16a34a) on white: 4.5:1 - OK for text
       - warning (#f59e0b) on white: 2.1:1 - USE DARK FOR TEXT
       - warning-dark (#d97706) on white: 3.3:1 - OK for large text/UI
       - danger (#ef4444) on white: 3.9:1 - OK for large text/UI
       - danger-dark (#dc2626) on white: 5.1:1 - OK for text
       - info (#3b82f6) on white: 4.5:1 - OK for text
       ======================================================================== */

    --color-success: #22c55e;
    --color-success-dark: #16a34a;
    --color-success-text: #15803d;  /* Green-700: 5.9:1 contrast - safe for text */
    --color-warning: #f59e0b;
    --color-warning-dark: #d97706;
    --color-warning-text: #b45309;  /* Amber-700: 4.8:1 contrast - safe for text */
    --color-danger: #ef4444;
    --color-danger-dark: #dc2626;
    --color-danger-text: #b91c1c;   /* Red-700: 6.1:1 contrast - safe for text */
    --color-info: #3b82f6;
    --color-info-dark: #2563eb;
    --color-info-text: #1d4ed8;     /* Blue-700: 6.6:1 contrast - safe for text */

    /* ========================================================================
       Gray Scale
       WCAG AA Contrast on white (#ffffff):
       - gray-400 (#9ca3af): 2.7:1 - FAIL for text, OK for disabled/decorative
       - gray-500 (#6b7280): 4.6:1 - OK for text (minimum)
       - gray-600 (#4b5563): 7.0:1 - OK for text
       - gray-700 (#374151): 10.3:1 - OK for text
       - gray-800 (#1f2937): 14.5:1 - OK for text
       - gray-900 (#111827): 17.4:1 - OK for text
       ======================================================================== */

    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;  /* Use for disabled/decorative only, not readable text */
    --color-gray-500: #6b7280;  /* Minimum for text - 4.6:1 contrast */
    --color-gray-600: #4b5563;  /* Preferred for secondary text */
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* ========================================================================
       Typography
       ======================================================================== */

    --font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                        Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
                        "Liberation Mono", Menlo, monospace;

    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */

    /* ========================================================================
       Spacing Scale (based on 4px grid)
       ======================================================================== */

    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */

    /* ========================================================================
       Border Radius
       ======================================================================== */

    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;  /* 6px */
    --radius-lg: 0.5rem;    /* 8px */
    --radius-xl: 0.75rem;   /* 12px */
    --radius-full: 9999px;  /* Pill shape */

    /* ========================================================================
       Shadows
       ======================================================================== */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* ========================================================================
       Transitions
       ======================================================================== */

    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ========================================================================
       Focus Indicators (WCAG 2.4.7 Focus Visible)
       ======================================================================== */

    /* Focus ring colors - visible against both light and dark backgrounds */
    --focus-ring-color: #3b82f6;  /* Blue-500 - high contrast */
    --focus-ring-color-dark: #1d4ed8;  /* Blue-700 for dark mode */
    --focus-ring-offset: 2px;
    --focus-ring-width: 2px;

    /* Focus ring styles */
    --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);
    --focus-ring-offset-shadow: 0 0 0 var(--focus-ring-offset) white;
    --focus-ring-shadow: 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);

    /* ========================================================================
       Breakpoints (for reference - use in @media queries)
       ======================================================================== */
    /*
     * Mobile:  < 768px
     * Tablet:  768px - 1023px
     * Desktop: >= 1024px
     */

    /* ========================================================================
       Badge/Status Tokens
       ========================================================================
       Semantic color pairs for status badges, priority indicators, and labels.
       Each badge has a background (-bg) and text (-text) color designed for
       WCAG AA contrast compliance (4.5:1 minimum).
    */

    /* Status Badges */
    --badge-pending-bg: #fef3c7;         /* Amber 100 */
    --badge-pending-text: #92400e;       /* Amber 800 - 4.8:1 contrast */

    --badge-assigned-bg: #dbeafe;        /* Blue 100 */
    --badge-assigned-text: #1e40af;      /* Blue 800 - 5.2:1 contrast */

    --badge-in-progress-bg: #e0e7ff;     /* Indigo 100 */
    --badge-in-progress-text: #3730a3;   /* Indigo 800 - 5.1:1 contrast */

    --badge-completed-bg: #dcfce7;       /* Green 100 */
    --badge-completed-text: #166534;     /* Green 800 - 4.7:1 contrast */

    --badge-cancelled-bg: #f1f5f9;       /* Slate 100 */
    --badge-cancelled-text: #334155;     /* Slate 700 - 6.5:1 contrast */

    --badge-available-bg: #d1fae5;       /* Emerald 100 */
    --badge-available-text: #065f46;     /* Emerald 800 - 5.0:1 contrast */

    --badge-deployed-bg: #dbeafe;        /* Blue 100 */
    --badge-deployed-text: #1e40af;      /* Blue 800 - 5.2:1 contrast */

    --badge-returning-bg: #fef3c7;       /* Amber 100 */
    --badge-returning-text: #92400e;     /* Amber 800 - 4.8:1 contrast */

    /* Priority Badges */
    --badge-critical-bg: #fee2e2;        /* Red 100 */
    --badge-critical-text: #991b1b;      /* Red 800 - 5.4:1 contrast */

    --badge-high-bg: #ffedd5;            /* Orange 100 */
    --badge-high-text: #9a3412;          /* Orange 800 - 4.8:1 contrast */

    --badge-medium-bg: #fef9c3;          /* Yellow 100 */
    --badge-medium-text: #854d0e;        /* Yellow 800 - 4.6:1 contrast */

    --badge-low-bg: #f0fdf4;             /* Green 50 */
    --badge-low-text: #166534;           /* Green 800 - 4.7:1 contrast */

    /* Semantic Badges (generic use) */
    --badge-success-bg: #d1fae5;         /* Emerald 100 */
    --badge-success-text: #065f46;       /* Emerald 800 - 5.0:1 contrast */

    --badge-danger-bg: #fee2e2;          /* Red 100 */
    --badge-danger-text: #991b1b;        /* Red 800 - 5.4:1 contrast */

    --badge-warning-bg: #fef3c7;         /* Amber 100 */
    --badge-warning-text: #92400e;       /* Amber 800 - 4.8:1 contrast */

    --badge-info-bg: #dbeafe;            /* Blue 100 */
    --badge-info-text: #1e40af;          /* Blue 800 - 5.2:1 contrast */

    --badge-primary-bg: #e0e7ff;         /* Indigo 100 */
    --badge-primary-text: #3730a3;       /* Indigo 800 - 5.1:1 contrast */

    --badge-secondary-bg: #e5e7eb;       /* Gray 200 */
    --badge-secondary-text: #374151;     /* Gray 700 - 6.5:1 contrast */

    /* ========================================================================
       Map Marker Tokens (Respond app)
       ========================================================================
       Colors for map markers indicating work order/team status.
       These use the semantic status colors for consistency.
    */

    --marker-pending: var(--color-warning);      /* #f59e0b - Amber */
    --marker-assigned: var(--color-info);        /* #3b82f6 - Blue */
    --marker-in-progress: var(--color-success);  /* #22c55e - Green */
    --marker-completed: var(--color-gray-400);   /* #9ca3af - Gray */
    --marker-team: var(--color-primary);         /* Brand color */
}

/* ============================================================================
   Utility Classes
   ============================================================================ */

/* Text colors - using contrast-safe variants for WCAG AA compliance */
.text-primary { color: var(--color-primary); }  /* Primary teal passes at 4.5:1 */
.text-success { color: var(--color-success-text); }  /* Green-700 for contrast */
.text-warning { color: var(--color-warning-text); }  /* Amber-700 for contrast */
.text-danger { color: var(--color-danger-text); }    /* Red-700 for contrast */
.text-info { color: var(--color-info-text); }        /* Blue-700 for contrast */
.text-muted { color: var(--color-gray-500); }        /* Minimum contrast gray */

/* Background colors with white text */
.bg-primary { background-color: var(--color-primary); color: white; }
.bg-success { background-color: var(--color-success); color: white; }
.bg-warning { background-color: var(--color-warning); color: var(--color-gray-900); }  /* Dark text on yellow */
.bg-danger { background-color: var(--color-danger); color: white; }
.bg-info { background-color: var(--color-info); color: white; }

/* Responsive visibility — elements retain their natural display type.
   Do NOT set display on the visible state; elements use their default
   (block, inline, table-cell, etc.). Only override to hide. */

.mobile-only {
    display: none;
}

@media (max-width: 1023px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: revert;
    }
}

/* ============================================================================
   Focus Indicators (WCAG 2.4.7 Focus Visible)
   ============================================================================ */

/* Default focus styles for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* Box shadow alternative for elements where outline doesn't work well */
.focus-ring:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-offset-shadow), var(--focus-ring-shadow);
}

/* High contrast focus for dark backgrounds */
.focus-ring-light:focus-visible {
    outline: var(--focus-ring-width) solid white;
    outline-offset: var(--focus-ring-offset);
}

/* Remove default focus outline when using custom focus styles */
.focus-custom:focus {
    outline: none;
}

/* Skip link styles (for keyboard navigation) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: var(--spacing-2) var(--spacing-4);
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

/* Focus within for container elements */
.focus-within:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* ============================================================================
   Heading Normalization (WCAG 1.3.1 - Heading Hierarchy)
   ============================================================================
   Use semantic heading levels (h1 > h2 > h3, etc.) but style visually
   using these classes. This maintains proper document outline while
   allowing flexible visual styling.

   Usage:
     <h2 class="heading-sm">Section Title</h2>  <!-- Semantic h2, styled small -->
     <h3 class="heading-lg">Card Title</h3>     <!-- Semantic h3, styled large -->
*/

.heading-xs {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.4;
}

.heading-sm {
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1.4;
}

.heading-md {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.3;
}

.heading-lg {
    font-size: var(--font-size-xl);
    font-weight: 600;
    line-height: 1.2;
}

.heading-xl {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.2;
}

/* Card title - common pattern for section headers */
.card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0 0 var(--spacing-3) 0;
    color: var(--color-gray-800);
}

/* Modal title styling */
.modal-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
    color: var(--color-gray-900);
}

/* Section title - larger grouping headers */
.section-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0 0 var(--spacing-4) 0;
    color: var(--color-gray-900);
}

/* ============================================================================
   Form Accessibility (WCAG 1.3.1, 3.3.2)
   ============================================================================ */

/* Help text for form fields - associated via aria-describedby */
.help-text {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-top: var(--spacing-1);
}

/* Error text for form validation - associated via aria-describedby */
.error-text {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-danger);
    margin-top: var(--spacing-1);
}

/* Required field indicator */
.required::after {
    content: " *";
    color: var(--color-danger);
}

/* Form group with label, input, and help/error text */
.form-group {
    margin-bottom: var(--spacing-4);
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-1);
    color: var(--color-gray-700);
}

/* Invalid state styling */
.form-group.is-invalid input,
.form-group.is-invalid select,
.form-group.is-invalid textarea,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
}

.form-group.is-invalid .help-text {
    display: none;
}

.form-group.is-invalid .error-text {
    display: block;
}

} /* end @layer base */