/* ============================================================
   pwa-theme.css  —  SafeHouse Tech PWA
   Design tokens ported from main app (app.css / theme.css).
   Mobile-first. No MudBlazor dependency.
   ============================================================ */

:root {
    /* ── Brand ─────────────────────────────────────── */
    --accent:          #B86A0F;
    --accent-light:    #FDF4E7;
    --accent-mid:      #EF9F27;
    --accent-hover:    #A05C0A;
    --accent-dark:     #633806;
    --accent-bg:       #FAEEDA;

    /* ── Neutrals ──────────────────────────────────── */
    --gray-900: #2C2C2A;
    --gray-800: #444441;
    --gray-600: #5F5E5A;
    --gray-400: #888780;
    --gray-200: #D3D1C7;
    --gray-100: #F1EFE8;
    --gray-50:  #F7F6F2;

    /* ── Semantic ──────────────────────────────────── */
    --color-danger:        #A32D2D;
    --color-danger-bg:     #FCEBEB;
    --color-danger-border: #F09595;
    --color-warn:          #854F0B;
    --color-warn-bg:       #FAEEDA;
    --color-success:       #3B6D11;
    --color-success-bg:    #EAF3DE;
    --color-info:          #185FA5;
    --color-info-bg:       #E6F1FB;

    /* ── Surfaces ──────────────────────────────────── */
    --surface:           #ffffff;
    --surface-secondary: #F7F6F2;
    --surface-tertiary:  #F1EFE8;
    --border:            rgba(0,0,0,0.10);
    --border-mid:        rgba(0,0,0,0.18);
    --text-primary:      #2C2C2A;
    --text-secondary:    #5F5E5A;
    --text-tertiary:     #888780;

    /* ── PWA Layout ────────────────────────────────── */
    --pwa-header-height:   52px;
    --pwa-bottom-nav-h:    64px;     /* safe-area-aware bottom nav */
    --pwa-content-pad:     16px;
    --radius-sm:           4px;
    --radius-md:           6px;
    --radius-lg:           10px;
    --radius-xl:           14px;

    /* ── Typography scale (mobile) ─────────────────── */
    --font-xs:   11px;
    --font-sm:   12px;
    --font-base: 14px;
    --font-md:   15px;
    --font-lg:   17px;
    --font-xl:   20px;
    --font-2xl:  24px;

    /* ── Touch targets ─────────────────────────────── */
    --touch-min: 44px;     /* WCAG 2.5.5 minimum tap target */

    /* ── Transitions ───────────────────────────────── */
    --trans-fast:  0.15s ease;
    --trans-base:  0.2s ease;
    --trans-slow:  0.3s ease;

    /* ── Status badge colours ──────────────────────── */
    --status-open-bg:        #E6F1FB;
    --status-open-text:      #185FA5;
    --status-inprogress-bg:  #FDF4E7;
    --status-inprogress-text:#854F0B;
    --status-completed-bg:   #EAF3DE;
    --status-completed-text: #3B6D11;
    --status-overdue-bg:     #FCEBEB;
    --status-overdue-text:   #A32D2D;
    --status-pending-bg:     #F1EFE8;
    --status-pending-text:   #5F5E5A;
}

/* ── Dark mode ──────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --surface:           #1E293B;
        --surface-secondary: #0F172A;
        --surface-tertiary:  #334155;
        --border:            rgba(255,255,255,0.08);
        --border-mid:        rgba(255,255,255,0.14);
        --text-primary:      #F1F5F9;
        --text-secondary:    #94A3B8;
        --text-tertiary:     #64748B;
        --gray-50:           #1E293B;
        --gray-100:          #334155;
        --gray-200:          #475569;
        --accent-light:      rgba(239,159,39,0.12);
        --accent-bg:         rgba(239,159,39,0.08);

        --status-open-bg:        rgba(24,95,165,0.15);
        --status-inprogress-bg:  rgba(133,79,11,0.15);
        --status-completed-bg:   rgba(59,109,17,0.15);
        --status-overdue-bg:     rgba(163,45,45,0.15);
        --status-pending-bg:     rgba(95,94,90,0.15);
    }
}