/* ==========================================================================
   Finwiz design tokens — the single source of every color, type size,
   radius, shadow, spacing and motion value in the platform.

   Language: Apple-inspired. One accent, a neutral gray ramp, quiet surfaces,
   depth from soft shadows and translucent materials, never from heavy
   borders. Rules for use live in design/DESIGN_LANGUAGE.md.

   Load this file FIRST on every page. Component and feature stylesheets
   reference var(--fw-*) only; a new hard-coded hex value is a defect.
   ========================================================================== */
:root {
    /* ---- Typography -------------------------------------------------------
       The platform font: SF on Apple devices, Segoe UI on Windows — both
       ship Hebrew glyphs, optical sizing and tuned tracking. No web font. */
    --fw-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text",
               "Segoe UI", system-ui, "Heebo", Arial, sans-serif;
    --fw-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display",
               "Segoe UI", system-ui, "Heebo", Arial, sans-serif;
    --fw-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    /* Type scale (rem, so the user's text-size setting scales the UI). */
    --fw-fs-2xs: 0.6875rem;  /* 11 — badge, caption 2 */
    --fw-fs-xs: 0.75rem;     /* 12 — caption, table meta */
    --fw-fs-sm: 0.8125rem;   /* 13 — footnote, dense tables */
    --fw-fs-md: 0.875rem;    /* 14 — controls, body in dense panels */
    --fw-fs-base: 0.9375rem; /* 15 — body */
    --fw-fs-lg: 1.0625rem;   /* 17 — headline */
    --fw-fs-xl: 1.25rem;     /* 20 — title 3 */
    --fw-fs-2xl: 1.375rem;   /* 22 — title 2, section title */
    --fw-fs-3xl: 1.75rem;    /* 28 — title 1 */
    --fw-fs-4xl: 2.125rem;   /* 34 — large title */

    --fw-fw-regular: 400;
    --fw-fw-medium: 500;
    --fw-fw-semibold: 600;
    --fw-fw-bold: 700;

    --fw-lh-tight: 1.15;   /* titles */
    --fw-lh-snug: 1.35;    /* controls */
    --fw-lh-body: 1.5;     /* reading text */

    --fw-tracking-display: -0.022em; /* 20px and up */
    --fw-tracking-title: -0.012em;   /* 17px */
    --fw-tracking-caption: 0.01em;   /* 12px and down */

    /* ---- Neutral ramp (Apple system grays, warm-neutral) ----------------- */
    --fw-white: #ffffff;
    --fw-gray-50: #f5f5f7;
    --fw-gray-100: #efeff2;
    --fw-gray-200: #e5e5ea;
    --fw-gray-300: #d2d2d7;
    --fw-gray-400: #b0b0b6;
    --fw-gray-500: #86868b;
    --fw-gray-600: #6e6e73;
    --fw-gray-700: #48484a;
    --fw-gray-800: #2c2c2e;
    --fw-gray-900: #1d1d1f;

    /* ---- Brand + accent ---------------------------------------------------
       --fw-brand is the logo cyan: decoration only (it fails contrast with
       white text). --fw-accent is the one interactive color: buttons, links,
       focus, selection. 5.4:1 on white, 4.95:1 on --fw-gray-50 (the UI audit
       measured the first pick, #0077c8, at 4.31:1 on gray). */
    --fw-brand: #00aeff;
    --fw-indigo: #28306e;
    --fw-accent: #006dba;
    --fw-accent-hover: #005fa3;
    --fw-accent-pressed: #00528e;
    --fw-accent-border: #9ccbea;
    --fw-accent-tint: #e5f1fa;
    --fw-accent-tint-subtle: #f3f8fc;
    --fw-on-accent: #ffffff;

    /* ---- Status ----------------------------------------------------------- */
    --fw-success: #1f7a3a;
    --fw-success-fill: #34a853;
    --fw-success-border: #a9dbb8;
    --fw-success-tint: #eaf6ed;
    --fw-warning: #a85300;
    --fw-warning-fill: #f5a524;
    --fw-warning-border: #f3d29a;
    --fw-warning-tint: #fff6e6;
    --fw-danger: #d1242f;
    --fw-danger-border: #f3b8bc;
    --fw-danger-tint: #fdeeef;

    /* ---- Categorical hues: things told apart by colour (board columns).
       Each one holds white semibold text at 4.5:1 or better. ------------- */
    --fw-cat-1: #1f6fd1;  /* blue */
    --fw-cat-2: #8e44c9;  /* purple */
    --fw-cat-3: #b85a00;  /* orange */
    --fw-cat-4: #00788a;  /* teal */
    --fw-cat-5: #c8283d;  /* red */
    --fw-cat-6: #5b4dd6;  /* violet */
    --fw-cat-7: #c2307a;  /* pink */
    --fw-cat-8: #00845a;  /* green */

    /* ---- Semantic roles (what components should reach for) --------------- */
    --fw-bg: var(--fw-gray-50);              /* the canvas behind cards */
    --fw-surface: var(--fw-white);           /* cards, sheets, inputs */
    --fw-surface-raised: var(--fw-white);
    --fw-fill: var(--fw-gray-100);           /* quiet fills: hover, segmented track */
    --fw-fill-strong: var(--fw-gray-200);
    --fw-separator: rgba(0, 0, 0, 0.08);     /* hairlines inside a surface */
    --fw-border: var(--fw-gray-300);         /* control outlines */
    --fw-text: var(--fw-gray-900);
    --fw-text-secondary: var(--fw-gray-600);
    --fw-text-tertiary: var(--fw-gray-500);
    --fw-text-disabled: var(--fw-gray-400);
    --fw-link: var(--fw-accent);
    --fw-focus-ring: 0 0 0 3px rgba(0, 109, 186, 0.28);

    /* Materials: translucent chrome over scrolling content. */
    --fw-material-bar: rgba(255, 255, 255, 0.72);
    --fw-material-thin: rgba(255, 255, 255, 0.82);
    --fw-material-blur: saturate(180%) blur(20px);
    --fw-scrim: rgba(0, 0, 0, 0.32);

    /* ---- Shape ------------------------------------------------------------ */
    --fw-radius-xs: 6px;     /* chips, small controls */
    --fw-radius-sm: 8px;     /* buttons, inputs */
    --fw-radius-md: 12px;    /* cards, menus */
    --fw-radius-lg: 16px;    /* panels, large cards */
    --fw-radius-xl: 22px;    /* sheets, dialogs */
    --fw-radius-pill: 999px;

    /* ---- Elevation: soft, layered, never a hard outline ------------------ */
    --fw-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    --fw-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    --fw-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.10), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
    --fw-shadow-4: 0 20px 48px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(0, 0, 0, 0.06);

    /* ---- Spacing (4pt grid) ---------------------------------------------- */
    --fw-space-1: 4px;
    --fw-space-2: 8px;
    --fw-space-3: 12px;
    --fw-space-4: 16px;
    --fw-space-5: 20px;
    --fw-space-6: 24px;
    --fw-space-8: 32px;
    --fw-space-10: 40px;

    /* Control heights: one size per density step. */
    --fw-control-sm: 28px;
    --fw-control-md: 34px;
    --fw-control-lg: 44px;

    /* ---- Motion ------------------------------------------------------------
       Critically damped feel: fast out, gentle settle, no overshoot. */
    --fw-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --fw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --fw-dur-press: 100ms;
    --fw-dur-fast: 160ms;
    --fw-dur-base: 240ms;
    --fw-dur-slow: 360ms;

    /* ======================================================================
       Legacy aliases. Three older token sets grew up section by section
       (base-variables, the .ma-instance scope, the client-portal set). They
       now resolve to the tokens above, so every older rule follows the one
       language. New code uses --fw-* directly.
       ====================================================================== */
    --primary-text-color: var(--fw-text);
    --secondary-text-color: var(--fw-accent);
    --background-color: var(--fw-bg);
    --border-color: var(--fw-gray-200);
    --box-shadow-color: rgba(0, 0, 0, 0.08);
    --header-background: var(--fw-surface);
    --title-color: var(--fw-surface);
    --emphasis-color: var(--fw-danger);
    --emphasis: var(--fw-danger);
    --primary-color: var(--fw-accent);
    --error-color: var(--fw-danger);
    --muted: var(--fw-text-secondary);
    --text: var(--fw-text);

    --clr-primary: var(--fw-accent);
    --clr-primary-dark: var(--fw-accent-hover);
    --clr-primary-light: var(--fw-accent-tint);
    --clr-accent: var(--fw-indigo);
    --clr-accent-light: #3a4490;
    --clr-bg: var(--fw-bg);
    --clr-surface: var(--fw-surface);
    --clr-text: var(--fw-text);
    --clr-text-secondary: var(--fw-text-secondary);
    --clr-muted: var(--fw-text-tertiary);
    --clr-border: var(--fw-gray-200);
    --clr-border-light: var(--fw-gray-100);
    --clr-success: var(--fw-success-fill);
    --clr-warning: var(--fw-warning-fill);
    --clr-danger: var(--fw-danger);
    --clr-danger-light: var(--fw-danger-tint);
    --clr-info-yellow: var(--fw-warning-tint);

    --radius-sm: var(--fw-radius-xs);
    --radius-md: var(--fw-radius-md);
    --radius-lg: var(--fw-radius-lg);
    --radius-xl: var(--fw-radius-xl);
    --shadow-sm: var(--fw-shadow-1);
    --shadow-md: var(--fw-shadow-2);
    --shadow-lg: var(--fw-shadow-3);
    --shadow-xl: var(--fw-shadow-4);
    --font: var(--fw-font);
    --transition: var(--fw-dur-fast) var(--fw-ease);

    color-scheme: light;
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --fw-material-bar: rgba(255, 255, 255, 0.98);
        --fw-material-thin: rgba(255, 255, 255, 0.98);
        --fw-material-blur: none;
    }
}

@media (prefers-contrast: more) {
    :root {
        --fw-separator: rgba(0, 0, 0, 0.22);
        --fw-border: var(--fw-gray-500);
        --fw-text-secondary: var(--fw-gray-700);
        --fw-text-tertiary: var(--fw-gray-600);
    }
}