@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('#1c3766') }};
 *       }
 *   </style>
 */

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

    /* Primary color - uses branding_color from config.
       The -dark / -light fallbacks below approximate the runtime values
       computed in base templates via color-mix() against --color-brand;
       they only apply when --color-brand is unset (no branding config). */
    --color-primary: var(--color-brand, #1c3766);
    --color-primary-dark: #15294d;
    --color-primary-light: #495f85;

    /* Soft brand tints, for selected rows and brand-themed callout panels.
       Base templates recompute these from the customer's branding_color with
       color-mix(); the literals below are the unbranded fallback and are the
       same mixes against #1c3766. Before these existed, a page that wanted a
       tinted highlight reached for a fixed light blue, which stayed blue on a
       customer whose brand is not. */
    --color-brand-soft: #e8ebf0;
    --color-brand-soft-border: #c6cdd9;

    /* ========================================================================
       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;

    /* ========================================================================
       Semantic surface, border and text roles
       ------------------------------------------------------------------------
       Every one of these was referenced by name and defined
       nowhere, so `var(--color-border)` and its neighbours resolved to nothing
       and the declaration was silently dropped. Adding them makes properties
       that were already written start applying — expect a visual change, and
       expect some of it to be the intended design finally showing up.

       They are aliases onto the gray ramp rather than new hex values, so there
       is still one palette. Naming the role as well as the shade is what lets
       a later change to "what muted text looks like" happen in one place.
       ======================================================================== */

    --color-white: #ffffff;

    --color-bg: #ffffff;
    --color-bg-subtle: var(--color-gray-50);
    --color-bg-muted: var(--color-gray-100);

    --color-border: var(--color-gray-200);
    --color-border-strong: var(--color-gray-300);

    --color-text: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);  /* Preferred for secondary text */
    --color-text-muted: var(--color-gray-500);      /* Minimum contrast for text */

    /* Branding injects these at runtime and they are undefined when branding is
       unset, so a bare var(--color-surface) renders transparent — and looks
       fine in development, where branding is always set. Declaring the defaults
       here is what makes that failure impossible rather than merely unlikely. */
    --color-surface: #ffffff;
    --color-on-surface: var(--color-gray-900);

    /* ========================================================================
       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 */

    /* Font weights. Referenced 82 times across Rally and Respond and defined
       nowhere, so every "medium" and "semibold" label rendered at the browser
       default. */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;


    /* ========================================================================
       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 */
    --spacing-16: 4rem;     /* 64px — reach.css reached for this by name,
                               with a 4rem fallback, before it existed. */

    /* ========================================================================
       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 brand color 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: var(--color-on-brand, 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 */