/* ==========================================================================
   FinMV design tokens
   --------------------------------------------------------------------------
   The brand, expressed as values rather than as inherited marketing CSS
   (ADR-003). Every colour below was measured from finmv.com's own stylesheet;
   nothing here was invented, and no rule from that stylesheet was copied.

   Workspace is denser than the marketing site on purpose: a 14px base, a 4px
   spacing grid and tabular numerals, because this is an instrument panel for a
   fintech project, not a landing page.

   Office reuses this file and overrides only the shell tokens, so the two
   applications can never drift apart on brand while staying instantly
   distinguishable.
   ========================================================================== */

:root {
    /* ---------------------------------------------------------- brand */
    --fmv-primary:          #0c5adb;
    --fmv-primary-strong:   #0a4bb8;
    --fmv-primary-soft:     #e8ecfc;
    --fmv-primary-tint:     #f4f7fe;
    --fmv-navy:             #00247e;
    --fmv-navy-deep:        #072b83;

    --fmv-accent:           #fd8424;
    --fmv-accent-soft:      #fff2e6;

    /* ------------------------------------------------------------ ink */
    --fmv-ink:              #151922;
    --fmv-ink-strong:       #0d1218;
    --fmv-ink-muted:        #5b6474;
    --fmv-ink-subtle:       #808b9c;
    --fmv-ink-inverse:      #ffffff;

    /* ------------------------------------------------------- surfaces */
    --fmv-surface:          #ffffff;
    --fmv-surface-sunken:   #f5f7fb;
    --fmv-surface-raised:   #ffffff;
    --fmv-surface-tint:     #eff2f7;
    --fmv-canvas:           #f1f4f9;

    /* --------------------------------------------------------- lines */
    --fmv-line:             #dfe4ed;
    --fmv-line-strong:      #c3cbd9;
    --fmv-line-soft:        #eaeef4;

    /* ---------------------------------------------------------- state
       Six tones, used everywhere: statuses, risk levels, badges, callouts,
       score meters. One vocabulary means a customer learns the colour system
       once. */
    --fmv-success:          #0f7a3d;
    --fmv-success-soft:     #e6f4ec;
    --fmv-warning:          #a9660a;
    --fmv-warning-soft:     #fdf1e0;
    --fmv-danger:           #c22a2a;
    --fmv-danger-soft:      #fbeaea;
    --fmv-critical:         #8b1414;
    --fmv-critical-soft:    #f7dede;
    --fmv-info:             #0c5adb;
    --fmv-info-soft:        #e8ecfc;
    --fmv-neutral:          #5b6474;
    --fmv-neutral-soft:     #eef1f6;

    /* ----------------------------------------------------- typography
       Tahoma leads because finmv.com already sets it; the stack degrades to
       the platform UI font rather than to a serif. */
    --fmv-font: Tahoma, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
    --fmv-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                     "Liberation Mono", monospace;

    --fmv-text-xs:   11px;
    --fmv-text-sm:   12px;
    --fmv-text-base: 14px;
    --fmv-text-md:   15px;
    --fmv-text-lg:   17px;
    --fmv-text-xl:   21px;
    --fmv-text-2xl:  26px;
    --fmv-text-3xl:  32px;

    --fmv-leading-tight:  1.25;
    --fmv-leading-normal: 1.55;

    /* --------------------------------------------------------- space
       A 4px grid. Every margin and padding in the application is one of
       these; a hand-typed pixel value is a bug. */
    --fmv-space-1:  4px;
    --fmv-space-2:  8px;
    --fmv-space-3:  12px;
    --fmv-space-4:  16px;
    --fmv-space-5:  20px;
    --fmv-space-6:  24px;
    --fmv-space-8:  32px;
    --fmv-space-10: 40px;
    --fmv-space-12: 48px;
    --fmv-space-16: 64px;

    /* --------------------------------------------------------- shape */
    --fmv-radius-sm:  4px;
    --fmv-radius:     6px;
    --fmv-radius-lg:  10px;
    --fmv-radius-pill: 999px;

    --fmv-shadow-sm: 0 1px 2px rgba(13, 18, 24, .06);
    --fmv-shadow:    0 2px 8px rgba(13, 18, 24, .08);
    --fmv-shadow-lg: 0 8px 28px rgba(13, 18, 24, .14);

    /* --------------------------------------------------------- shell */
    --fmv-shell-bg:          #0f1b3d;
    --fmv-shell-fg:          #ced7ee;
    --fmv-shell-fg-strong:   #ffffff;
    --fmv-shell-active-bg:   rgba(255, 255, 255, .10);
    --fmv-shell-hover-bg:    rgba(255, 255, 255, .06);
    --fmv-shell-line:        rgba(255, 255, 255, .10);
    --fmv-shell-width:       244px;
    --fmv-topbar-height:     56px;

    --fmv-content-max: 1360px;

    --fmv-z-drawer: 60;
    --fmv-z-modal:  70;
    --fmv-z-toast:  80;
}

/* Office: same brand, unmistakably not the customer product. The shell goes
   near-black with an amber edge so a screenshot of Office can never be
   mistaken for a screenshot of Workspace. */
:root[data-app="office"] {
    --fmv-shell-bg:        #10131a;
    --fmv-shell-fg:        #b9c0cc;
    --fmv-shell-fg-strong: #ffffff;
    --fmv-shell-active-bg: rgba(253, 132, 36, .16);
    --fmv-shell-hover-bg:  rgba(255, 255, 255, .05);
    --fmv-shell-line:      rgba(255, 255, 255, .08);
    --fmv-canvas:          #eef0f4;
}