/* ============================================================
   RUNWAY BRANDING — Override these variables to retheme the app.
   Future: this file will be served dynamically per tenant via
   GET /tenant/branding.css which overrides these values in the cascade.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* === Brand Colors ===
       Primary action color used for buttons, links, focus rings, and accents.
       Tip: keep primary and primary-dark 15-20% apart in lightness. */
    --color-blue:      #0089DC;
    --color-blue-dark: #0070B8;
    --color-teal:      #00B5B8;

    /* === App Chrome ===
       Sidebar background and page canvas color. */
    --color-sidebar:   #18222F;
    --color-bg:        #F5F7FA;

    /* === Typography ===
       Font stack used across the entire app. */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* === Shape ===
       Border radius for cards, inputs, and buttons. */
    --radius:    8px;
    --radius-sm: 6px;

    /* === Text ===
       Primary and secondary/muted text. */
    --color-text:     #1D2B3A;
    --color-text-sub: #6B7280;

    /* === Surface / Neutrals === */
    --color-white:    #FFFFFF;
    --color-gray-50:  #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E8EAED;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-900: #1D2B3A;
    --color-navy:     #1D2B3A;  /* alias for --color-gray-900 — kept for backward compat, always set both together */

    /* === Layout (structural — avoid overriding unless redesigning nav) === */
    --sidebar-width:  220px;
    --header-height:  60px;

    /* === Status / Semantic ===
       Used for alerts, badges, and status indicators. */
    --color-red:      #D92D20;
    --color-amber:    #DC6803;
    --color-green:    #12B76A;

    /* === Severity Tints (background fills for risk/issue badges) === */
    --color-critical: #FEE4E2;
    --color-high:     #FEF0C7;
    --color-medium:   #D1E9FF;
    --color-low:      #F3F4F6;

    /* === Checklist Module ===
       Override these to retheme the checklist feature without touching component styles. */
    --color-checklist-accent:      var(--color-blue);    /* section left border + active tab indicator */
    --color-checklist-accent-tint: #EBF6FD;             /* subtle header bg tint in section blocks */
    --color-progress-track:        var(--color-gray-200);
    --color-progress-default:      var(--color-blue);    /* 0–49% */
    --color-progress-halfway:      var(--color-amber);   /* 50–99% */
    --color-progress-complete:     var(--color-green);   /* 100% */
    --color-response-pass:         var(--color-green);
    --color-response-pass-tint:    #F0FDF4;
    --color-response-pass-text:    #166534;
    --color-response-fail:         var(--color-red);
    --color-response-fail-tint:    #FEF2F2;
    --color-response-fail-text:    #991B1B;
}