/**
 * FilingLayer design tokens — single source of truth for the brand.
 *
 * Aligned with the Layer suite: deep-teal primary, burnt-orange accent, and the
 * DM type superfamily (Serif Display for voice, Sans for text, Mono for data).
 * The aesthetic is "compliance-grade editorial fintech": calm, precise,
 * trustworthy. Retune here; nothing else hard-codes 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-primary-soft:  #e6eef0;   /* tinted surface */
    --fl-color-secondary:     #3d6b5c;
    --fl-color-accent:        #c45c26;   /* burnt orange — CTAs, the IDV wedge */
    --fl-color-accent-hover:  #a94a1b;
    --fl-color-accent-soft:   #f7ede4;

    /* ---- Surfaces & text ---- */
    --fl-color-bg:            #f6f7f5;   /* warm paper */
    --fl-color-bg-warm:       #eef0ec;
    --fl-color-ink:           #07262c;   /* near-black teal for dark sections */
    --fl-color-ink-2:         #0c343c;
    --fl-color-surface:       #ffffff;
    --fl-color-surface-2:     #fbfcfb;
    --fl-color-border:        #d8ddd6;
    --fl-color-border-subtle: #e9ebe6;
    --fl-color-hairline:      #dfe3dc;
    --fl-color-text:          #15201d;
    --fl-color-text-muted:    #5c6661;
    --fl-color-text-faint:    #8a938e;
    --fl-color-text-invert:   #f4f1ea;   /* cream, as used in the suite logo */
    --fl-color-cream:         #f4f1ea;

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

    /* ---- Atmosphere (gradients, glows) ---- */
    --fl-grad-ink: radial-gradient(120% 120% at 80% -10%, #11697a 0%, #0c343c 38%, #07262c 100%);
    --fl-grad-paper: radial-gradient(110% 80% at 100% 0%, #ffffff 0%, var(--fl-color-bg) 60%);
    --fl-grad-accent: linear-gradient(135deg, #d96c33 0%, #c45c26 100%);
    --fl-glow-accent: 0 1px 0 rgba(255,255,255,0.25) inset, 0 8px 24px -8px rgba(196,92,38,0.5);
    --fl-dot: rgba(13,79,92,0.06);       /* dotted-grid texture colour */

    /* ---- 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-font-mono:    "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --fl-text-xs:   0.78rem;
    --fl-text-sm:   0.875rem;
    --fl-text-base: 1.0rem;
    --fl-text-lg:   1.2rem;
    --fl-text-xl:   1.5rem;
    --fl-text-2xl:  2.1rem;
    --fl-text-3xl:  2.9rem;
    --fl-text-4xl:  4.0rem;
    --fl-text-5xl:  5.2rem;

    /* Mono "label" treatment used for eyebrows, data tags, codes. */
    --fl-label: 0.72rem;
    --fl-tracking-label: 0.16em;

    /* ---- 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: 6.5rem;
    --fl-space-16: 9rem;

    /* ---- Radius ---- */
    --fl-radius-sm: 6px;
    --fl-radius:    10px;
    --fl-radius-lg: 16px;
    --fl-radius-xl: 24px;
    --fl-radius-pill: 999px;

    /* ---- Elevation (teal-tinted, layered) ---- */
    --fl-shadow-sm: 0 1px 2px rgba(7,38,44,0.05), 0 1px 1px rgba(7,38,44,0.04);
    --fl-shadow:    0 1px 2px rgba(7,38,44,0.05), 0 6px 16px -8px rgba(7,38,44,0.16);
    --fl-shadow-md: 0 2px 4px rgba(7,38,44,0.05), 0 16px 32px -12px rgba(7,38,44,0.22);
    --fl-shadow-lg: 0 4px 8px rgba(7,38,44,0.06), 0 32px 64px -20px rgba(7,38,44,0.32);
    --fl-ring: 0 0 0 3px rgba(17,105,122,0.28);

    /* ---- Motion ---- */
    --fl-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --fl-dur: 0.45s;
    --fl-dur-fast: 0.18s;

    /* ---- Layout ---- */
    --fl-container-max: 1180px;
    --fl-container-pad: 1.5rem;
}