/**
 * FilingLayer design tokens — single source of truth for the brand.
 *
 * Aligned with the Layer suite (see SupportLayer): same deep-teal primary and
 * burnt-orange accent so FilingLayer reads as a sibling. Retune these values to
 * match the suite's canonical tokens when they land — nothing else should hard-
 * code a colour, radius, or font.
 */

:root {
    /* ---- Brand colours (shared suite identity) ---- */
    --fl-color-primary:       #0d4f5c;   /* deep teal — trust / compliance-grade */
    --fl-color-primary-hover: #0a3d47;
    --fl-color-primary-light: #11697a;
    --fl-color-secondary:     #3d6b5c;
    --fl-color-accent:        #c45c26;   /* burnt orange — CTAs, the IDV wedge */
    --fl-color-accent-hover:  #a94a1b;

    /* ---- Surfaces & text ---- */
    --fl-color-bg:            #f7f8fa;
    --fl-color-bg-warm:       #f1f3f6;
    --fl-color-ink:           #082f37;   /* near-black teal for dark sections */
    --fl-color-surface:       #ffffff;
    --fl-color-border:        #d5d9e0;
    --fl-color-border-subtle: #e8ebf0;
    --fl-color-text:          #1a1f1c;
    --fl-color-text-muted:    #5a6169;
    --fl-color-text-invert:   #f4f1ea;   /* cream, as used in the suite logo */

    /* ---- Semantic ---- */
    --fl-color-success: #1f6b3a;
    --fl-color-warning: #a35f0c;
    --fl-color-error:   #b42318;
    --fl-color-info:    #1d4ed8;

    /* ---- Typography ---- */
    --fl-font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
    --fl-font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --fl-text-xs:   0.78rem;
    --fl-text-sm:   0.875rem;
    --fl-text-base: 1rem;
    --fl-text-lg:   1.18rem;
    --fl-text-xl:   1.5rem;
    --fl-text-2xl:  2rem;
    --fl-text-3xl:  2.75rem;
    --fl-text-4xl:  3.6rem;

    /* ---- Spacing scale (4px base) ---- */
    --fl-space-1: 0.25rem;
    --fl-space-2: 0.5rem;
    --fl-space-3: 0.75rem;
    --fl-space-4: 1rem;
    --fl-space-5: 1.5rem;
    --fl-space-6: 2rem;
    --fl-space-8: 3rem;
    --fl-space-10: 4.5rem;
    --fl-space-12: 6rem;

    /* ---- Radius ---- */
    --fl-radius-sm: 6px;
    --fl-radius:    8px;
    --fl-radius-lg: 12px;
    --fl-radius-xl: 20px;
    --fl-radius-pill: 999px;

    /* ---- Elevation ---- */
    --fl-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --fl-shadow:    0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(13,79,92,0.05);
    --fl-shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(13,79,92,0.07);
    --fl-shadow-lg: 0 12px 40px rgba(8,47,55,0.16);

    /* ---- Layout ---- */
    --fl-container-max: 1140px;
    --fl-container-pad: 1.25rem;
}