/* CoHarmony design tokens — the single source for colour, radius and shadow.
   ==========================================================================
   Three stylesheets each declared their own :root. professional-theme.css had
   --primary: #2563EB, user-portal.css had --primary-color: #2563EB, and
   modern-styles.css had --primary: #1E40AF — a different blue under the same
   name, kept out of trouble only by never being linked. Two of them agreed by
   hand, which is not the same as agreeing.

   Everything below is declared once here. The other stylesheets alias their
   old names onto these, so every existing rule keeps working untouched while
   there is only one place a value can change.

   Dark mode lives here for the same reason: the theme is a block of variables,
   not a second stylesheet, and it only works if every rule already reads a
   variable. Three states, not two — an explicit choice stamps data-theme on
   the root, and the default "system" setting stamps nothing, so the media
   query has to carry the un-stamped case while the attribute wins over it in
   both directions. */

/* Inter, served from this origin rather than fonts.googleapis.com: one fewer
   connection to open, one fewer third party told who is reading a family-law
   portal, and text that still renders if Google is unreachable. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Inter-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Inter-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Inter-Bold.woff2') format('woff2');
}

:root {
    /* ── Brand ─────────────────────────────────────────────────────────── */
    --ch-blue: #2563EB;
    --ch-blue-dark: #1D4ED8;
    --ch-blue-light: #3B82F6;
    --ch-blue-hover: #1E40AF;
    --ch-violet: #7C3AED;
    --ch-indigo: #6366F1;
    --ch-indigo-dark: #4F46E5;
    --ch-indigo-light: #818CF8;
    --ch-teal: #0D9488;

    /* ── Status ────────────────────────────────────────────────────────── */
    /* The plain status colours lighten in dark so they stay readable AS TEXT
       on dark surfaces. Anything that paints a status colour as a SURFACE
       under white text (buttons, solid badges) must use the -surface variant,
       which deliberately does not flip: the deep values read correctly on
       both grounds, while white-on-lightened-mint/amber fails contrast. */
    --ch-success-surface: #059669;
    --ch-warning-surface: #B45309;
    --ch-danger-surface: #DC2626;
    --ch-info-surface: #0284C7;
    --ch-success: #059669;
    --ch-success-light: #10B981;
    --ch-success-bg: #ECFDF5;
    --ch-warning: #D97706;
    --ch-warning-light: #F59E0B;
    --ch-warning-bg: #FFFBEB;
    --ch-danger: #DC2626;
    --ch-danger-light: #EF4444;
    --ch-danger-bg: #FEF2F2;
    --ch-info: #0284C7;
    --ch-info-light: #0EA5E9;
    --ch-info-bg: #F0F9FF;

    /* ── Neutrals ──────────────────────────────────────────────────────── */
    --ch-slate-50: #F8FAFC;
    --ch-slate-100: #F1F5F9;
    --ch-slate-200: #E2E8F0;
    --ch-slate-300: #CBD5E1;
    --ch-slate-400: #94A3B8;
    --ch-slate-500: #64748B;
    --ch-slate-600: #475569;
    --ch-slate-700: #334155;
    --ch-slate-800: #1E293B;
    --ch-slate-900: #0F172A;

    /* ── Surfaces and text ─────────────────────────────────────────────── */
    --ch-bg: #F8FAFC;
    --ch-surface: #FFFFFF;
    --ch-elevated: #FFFFFF;
    --ch-text: #0F172A;
    --ch-text-2: #475569;
    --ch-text-muted: #64748B;
    --ch-text-light: #94A3B8;
    --ch-border: #E2E8F0;
    --ch-border-strong: #CBD5E1;

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

    /* ── Shape ─────────────────────────────────────────────────────────── */
    --ch-radius-sm: 6px;
    --ch-radius: 8px;
    --ch-radius-md: 12px;
    --ch-radius-lg: 16px;
    --ch-radius-xl: 24px;

    /* ── Sidebar ───────────────────────────────────────────────────────── */
    --ch-sidebar-bg: #0F172A;
    --ch-sidebar-text: #E2E8F0;
    --ch-sidebar-text-muted: #94A3B8;
    --ch-sidebar-hover: rgba(255, 255, 255, 0.05);
    --ch-sidebar-active: rgba(37, 99, 235, 0.2);
    --ch-sidebar-accent: #3B82F6;

    /* ── Custody ───────────────────────────────────────────────────────── */
    /* Defaults only: each parent picks their own colour and the dashboard
       overrides these inline with the stored values. Held as RGB triplets so
       the shading rules can apply their own alpha.

       The retired light-blue/light-pink pair was assigned from slots named
       "Husband"/"Wife" — gendered, and indistinguishable to deuteranopes.
       Blue and amber survive both common forms of colour blindness. */
    --ch-parent-one-rgb: 147, 197, 253;
    --ch-parent-two-rgb: 252, 211, 77;
    --ch-parent-both-rgb: 94, 234, 212;

    --ch-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;

    color-scheme: light;
}

/* Dark. Only tokens are redefined — every rule in every stylesheet reads
   through them, which is what makes a second theme this short. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ch-bg: #0A0F1C;
        --ch-surface: #121826;
        --ch-elevated: #182234;
        --ch-text: #F1F5F9;
        --ch-text-2: #B6C2D4;
        --ch-text-muted: #8C9AB0;
        --ch-text-light: #64748B;
        --ch-border: #253147;
        --ch-border-strong: #33415C;

        /* The light end of the slate scale is what pages use for "subtle
           neutral surface" (secondary buttons, alternating sections, skeleton
           shimmer). Left at their light values they render white cards with
           light text on the dark ground — so the light end follows the
           surfaces. The dark end (700–900) is NOT remapped: it is used for
           deliberately dark elements (footers, mockup chrome) that already
           read correctly on both grounds, as do the 300/400 text colours
           sitting on top of them. */
        --ch-slate-50: #101724;
        --ch-slate-100: #1B2637;
        --ch-slate-200: #253147;

        /* Lifted off the light values: the same blue that reads as confident
           on white turns muddy on near-black. */
        --ch-blue: #3B82F6;
        --ch-blue-dark: #2563EB;
        --ch-blue-hover: #60A5FA;
        --ch-indigo: #818CF8;

        --ch-success: #34D399;
        --ch-success-bg: #06281F;
        --ch-warning: #FBBF24;
        --ch-warning-bg: #2B1D06;
        --ch-danger: #F87171;
        --ch-danger-bg: #2C1013;
        --ch-info: #38BDF8;
        --ch-info-bg: #06222E;

        /* Shadows do almost nothing on a dark ground; the surface step and the
           hairline carry the separation instead. */
        --ch-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
        --ch-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
        --ch-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
        --ch-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55);
        --ch-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);

        --ch-sidebar-bg: #070B14;
        --ch-sidebar-hover: rgba(255, 255, 255, 0.06);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --ch-bg: #0A0F1C;
    --ch-surface: #121826;
    --ch-elevated: #182234;
    --ch-text: #F1F5F9;
    --ch-text-2: #B6C2D4;
    --ch-text-muted: #8C9AB0;
    --ch-text-light: #64748B;
    --ch-border: #253147;
    --ch-border-strong: #33415C;
    --ch-slate-50: #101724;
    --ch-slate-100: #1B2637;
    --ch-slate-200: #253147;
    --ch-blue: #3B82F6;
    --ch-blue-dark: #2563EB;
    --ch-blue-hover: #60A5FA;
    --ch-indigo: #818CF8;
    --ch-success: #34D399;
    --ch-success-bg: #06281F;
    --ch-warning: #FBBF24;
    --ch-warning-bg: #2B1D06;
    --ch-danger: #F87171;
    --ch-danger-bg: #2C1013;
    --ch-info: #38BDF8;
    --ch-info-bg: #06222E;
    --ch-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --ch-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
    --ch-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --ch-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55);
    --ch-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    --ch-sidebar-bg: #070B14;
    --ch-sidebar-hover: rgba(255, 255, 255, 0.06);

    color-scheme: dark;
}