/**
 * Contractors4Christ — Design Tokens (v2.0)
 *
 * The single source of truth for color, type, spacing, radius and shadow
 * across the ENTIRE product — guest browsing, homeowner dashboard,
 * contractor CRM, search, profiles, forms, and the PWA app shell all read
 * from these same variables. There is no separate "PWA" palette vs "website"
 * palette anymore — one design system, applied responsively.
 *
 * Loaded FIRST, before every other plugin stylesheet (see AssetLoader).
 * Custom properties are inert until referenced, so declaring them at :root
 * carries no risk of leaking visual changes into the active theme — only
 * plugin CSS (assets/css/*.css) references var(--c4c-*).
 *
 * Brand overrides (logo, header colors, etc.) still come from PWA Settings ->
 * Branding at runtime — Frontend\PwaHeaderRenderer and Frontend\AssetLoader
 * print a small inline <style> block that overrides --c4c-brand-gold /
 * --c4c-header-* per the admin's saved settings, on top of these defaults.
 */

:root {
    /* ---- Color ---- */
    --c4c-bg:            #F8F9FB;
    --c4c-surface:       #FFFFFF;
    /* Same value as --c4c-surface, under a name nothing re-declares.
       dashboard.css's .c4c-app block locally redefines --c4c-surface as an
       alias of --c4c-bg, which meant its --c4c-card: var(--c4c-surface)
       resolved to the page background rather than the card surface — cards
       and page were the same color. Deriving --c4c-card from this
       un-shadowed token restores the intended contrast. */
    --c4c-surface-base:  #FFFFFF;
    --c4c-surface-2:     #F3F4F6;
    --c4c-brand-gold:    #C99B3F;
    --c4c-brand-gold-strong: #B0842A;
    --c4c-brand-gold-soft:   rgba(201, 155, 63, 0.12);
    --c4c-text:          #111827;
    --c4c-text-secondary:#6B7280;
    --c4c-text-tertiary: #9CA3AF;
    --c4c-border:        #E5E7EB;
    --c4c-border-strong: #D1D5DB;
    --c4c-success:       #16A34A;
    --c4c-success-soft:  rgba(22, 163, 74, 0.10);
    --c4c-warning:       #F59E0B;
    --c4c-warning-soft:  rgba(245, 158, 11, 0.12);
    --c4c-danger:        #DC2626;
    --c4c-danger-soft:   rgba(220, 38, 38, 0.10);
    --c4c-info:          #2563EB;
    --c4c-info-soft:     rgba(37, 99, 235, 0.10);
    --c4c-overlay:       rgba(17, 24, 39, 0.48);

    /* ---- Inverse ink ----
       The text color that sits ON TOP of a surface painted with
       --c4c-text (active filter chips, active pagination buttons,
       toasts). It must FLIP with the theme: in light mode the chip
       background is near-black so the label is white; in dark mode the
       chip background becomes near-white, so a hardcoded #fff label
       turned white-on-white and vanished. Never write `color:#fff` on
       top of a --c4c-text background again — use this token. */
    --c4c-on-inverse:    #FFFFFF;

    /* ---- Active / selected surface ----
       v2.5.4 root-cause fix. Every "selected pill" component (My Requests
       filter chips, search filter chips, pagination's current page) was
       built as `background: var(--c4c-ink or --c4c-text); color:
       var(--c4c-on-inverse)`. That's a fine pattern in light mode — ink is
       dark, so it paints a dark pill with a white label. But --c4c-ink and
       --c4c-text are the theme's ink color, and in dark mode ink flips to
       near-white — so the exact same rule painted the "selected" pill
       near-white with dark text on it: legible in isolation, but a
       stark white blob sitting in an otherwise dark screen, which is what
       kept reading as "still broken" even after the text-contrast fix.
       These two tokens are a DELIBERATELY SEPARATE pair — not derived from
       ink/text at all — so "selected" always renders as a confident, on-
       brand accent instead of an inverted copy of body text. */
    --c4c-active-bg:     var(--c4c-text, #101623);
    --c4c-active-ink:    #FFFFFF;

    /* Companion tokens for the few components that previously hardcoded
       a light-mode-only value with no token to fall back on. */
    --c4c-skeleton-mid:  #ECEFF3;
    --c4c-warning-ink:   #92610A;
    --c4c-placeholder:   #9AA2B1;

    /* ---- Typography ---- */
    --c4c-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* v2.4.6: whole scale stepped up ~1-2px with slightly looser line
       heights for legibility on phones — every stylesheet reads these,
       so this single block raises text size across the entire product.
       Body sits at 17px (was 16px); the smallest token, --c4c-caption,
       is now 13px (was 12px) since sub-13px text is where readability
       complaints actually come from. */
    --c4c-h1: 700 38px/1.2 var(--c4c-font);
    --c4c-h2: 700 30px/1.25 var(--c4c-font);
    --c4c-h3: 700 24px/1.3 var(--c4c-font);
    --c4c-card-title: 700 19px/1.35 var(--c4c-font);
    --c4c-body: 400 17px/1.6 var(--c4c-font);
    --c4c-secondary: 400 15px/1.55 var(--c4c-font);
    --c4c-caption: 500 13px/1.45 var(--c4c-font);

    /* ---- Spacing (8pt grid) ---- */
    --c4c-space-1: 8px;
    --c4c-space-2: 16px;
    --c4c-space-3: 24px;
    --c4c-space-4: 32px;
    --c4c-space-5: 40px;
    --c4c-space-6: 48px;
    --c4c-space-8: 64px;

    /* ---- Radius ---- */
    --c4c-radius-sm:  8px;
    --c4c-radius-md:  12px;
    --c4c-radius-lg:  16px;
    --c4c-radius-xl:  24px;
    --c4c-radius-full: 999px;

    /* ---- Shadow (soft, no harsh drop-shadows) ---- */
    --c4c-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
    --c4c-shadow-sm: 0 2px 8px rgba(17, 24, 39, 0.06);
    --c4c-shadow-md: 0 6px 20px rgba(17, 24, 39, 0.08);
    --c4c-shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.12);
    --c4c-shadow-gold: 0 10px 26px rgba(201, 155, 63, 0.35);

    /* ---- Motion ---- */
    --c4c-ease: cubic-bezier(.2, .7, .2, 1);
    --c4c-dur-fast: 150ms;
    --c4c-dur-base: 220ms;
    --c4c-dur-slow: 360ms;

    /* ---- App shell metrics (overridable per-page) ---- */
    --c4c-header-h: 72px;
    --c4c-bottomnav-h: 64px;
    --c4c-sidebar-w: 288px;
    --c4c-right-rail-w: 320px;

    /* ---- Layout ----
       Part 2 addition: the one page-content container width every content
       page (search results, category cards, contractor profile) should
       share — see the audit's "page container widths are inconsistent"
       finding. Previously search.css/cards.css hardcoded 1200px and
       profile.css independently hardcoded 1180px. */
    --c4c-container-max-w: 1200px;

    /* ---- Brand-derived convenience color ----
       Part 2 addition: dashboard.css and profile.css both already
       hardcoded this exact value separately for text sitting on top of a
       gold-accent button/badge — promoted here so both read the same
       token instead of agreeing by coincidence. */
    --c4c-gold-ink: #171203;

    /* ---- Z-index scale ---- */
    --c4c-z-header: 500;
    --c4c-z-bottomnav: 500;
    --c4c-z-sheet: 800;
    --c4c-z-modal: 900;
    --c4c-z-toast: 1000;
}

/* Dark mode: flips surface/text tokens only; components never hardcode a
   light-mode color, they always reference the token — so this block is
   the only place the dark theme is defined. Applied as a class on <html>
   by assets/js/pwa.js (C4CTheme, user toggle, remembered in
   localStorage) and assets/js/pwa/app-mode.js (admin's PWA Settings ->
   Dark Mode = enabled). */
.c4c-dark {
    --c4c-bg:            #0B0F17;
    --c4c-surface:       #151B26;
    --c4c-surface-base:  #151B26;
    --c4c-surface-2:     #1E2632;
    --c4c-text:          #F3F4F6;
    --c4c-text-secondary:#9CA3AF;
    --c4c-text-tertiary: #6B7280;
    --c4c-border:        #262F3D;
    --c4c-border-strong: #333F52;
    --c4c-overlay:       rgba(0, 0, 0, 0.6);

    /* --c4c-text is now near-WHITE, so anything painted with it as a
       background needs near-BLACK ink on top — this is the flip that
       fixes the invisible active tab labels. */
    --c4c-on-inverse:    #0B0F17;

    /* The "selected pill" fix: in dark mode a selected chip/page-button
       becomes the brand gold accent with dark ink on top, instead of
       inheriting --c4c-text (which is near-white here, and would paint
       the pill near-white — a bright blob against the dark UI around it).
       Reuses the SAME gold-ink pairing already proven legible on the
       gold badges/CTAs elsewhere in dark mode. */
    --c4c-active-bg:     var(--c4c-brand-gold, #c99b3f);
    --c4c-active-ink:    var(--c4c-gold-ink, #171203);

    --c4c-skeleton-mid:  #232B3B;
    --c4c-warning-ink:   #F0B44A;
    --c4c-placeholder:   #7A8497;

    /* Soft tint backgrounds were mixed for a white page; they read as
       muddy over a dark one. Slightly stronger alpha keeps badges legible. */
    --c4c-brand-gold-soft: rgba(201, 155, 63, 0.20);
    --c4c-success-soft:    rgba(22, 163, 74, 0.20);
    --c4c-warning-soft:    rgba(245, 158, 11, 0.20);
    --c4c-danger-soft:     rgba(220, 38, 38, 0.20);
    --c4c-info-soft:       rgba(37, 99, 235, 0.20);

    /* Shadows tuned for black rather than white paper. */
    --c4c-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
    --c4c-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --c4c-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.50);
    --c4c-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    /* Tells the browser to render native controls, scrollbars and form
       widgets dark instead of painting white boxes on a dark page. */
    color-scheme: dark;
}