/* ============================================================
 * InSync365 Design Tokens
 * ------------------------------------------------------------
 * Shared design system variables. Loaded once globally.
 * Page-specific stylesheets (e.g. redesign-projectslist.css)
 * consume these via var(--is-*).
 *
 * Initial set extracted from the Projects List redesign
 * (proposals/app-redesign/project-list/ProjectsList.html).
 * Extend additively as more screens migrate to the redesign.
 * ============================================================ */

:root {
    /* ── Typography ─────────────────────────────────────────── */
    --is-font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --is-font-mono: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* ── Foreground (text) ──────────────────────────────────── */
    --is-fg-1: #1A1A1F;   /* primary text, headings */
    --is-fg-2: #404048;   /* secondary text */
    --is-fg-3: #76767E;   /* muted text, labels */
    --is-fg-4: #AAB1BA;   /* dimmest text, separators */
    --is-fg-muted: #AAB1BA; /* alias of fg-4 used by form placeholder copy */

    /* ── Surfaces (backgrounds) ─────────────────────────────── */
    --is-bg-surface:   #FFFFFF;   /* cards, primary panels */
    --is-bg-surface-2: #FAFAFB;   /* subtle alternate rows */
    --is-bg-surface-3: #F2F3F5;   /* chip / pill / hover backgrounds */
    --is-bg-canvas:    #F0F2F4;   /* page background behind cards */
    --is-bg-app:       #F0F2F4;   /* alias of bg-canvas used by popup backdrops */

    /* ── Borders ────────────────────────────────────────────── */
    --is-border-1: #E5E5EA;       /* hairline separators */
    --is-border-2: #D1D1D6;       /* default borders */
    --is-border-3: #B8B8C0;       /* form-control borders */

    /* ── Radii ──────────────────────────────────────────────── */
    --is-radius-xs: 4px;
    --is-radius-sm: 6px;
    --is-radius-md: 10px;
    --is-radius-lg: 14px;

    /* ── Shadows ────────────────────────────────────────────── */
    --is-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .02);
    --is-shadow-2: 0 2px 6px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .03);
    --is-shadow-3: 0 12px 28px rgba(0, 0, 0, .12), 0 4px 10px rgba(0, 0, 0, .06);

    /* ── Brand & action ─────────────────────────────────────── */
    --is-action-blue:     #007BFF;
    --is-brand-blue:      #007BFF;
    --is-brand-blue-100:  #E6F2FF;
    --is-brand-blue-200:  #CFE4F4;
    --is-brand-blue-300:  #66B0FF;
    --is-brand-blue-700:  #0056B3;

    --is-brand-orange:     #F59E2C;
    --is-brand-orange-100: oklch(95% .04 50);
    --is-brand-orange-600: #D17D14;
    --is-brand-orange-700: oklch(40% .12 50);

    --is-brand-blue-600: #006FE6;

    --is-brand-purple: #3D0A47;

    /* Sidebar / brand-panel gradient used by login and other brand-tinted shells */
    --is-sidebar-grad: linear-gradient(135deg, #3D0A47 0%, #1C1750 45%, #0494DA 100%);

    /* ── Semantic ───────────────────────────────────────────── */
    --is-success:    #1F8A5B;
    --is-success-bg: #E6F4EC;
    --is-warning:    #CE8600;
    --is-warning-bg: #FBF3DD;
    --is-danger:     #C73B3B;
    --is-danger-bg:  #FBEAEA;
    --is-info:       #007BFF;
    --is-info-bg:    #E6F2FF;

    /* ── App layout ─────────────────────────────────────────── */
    /* Sticky table headers in list screens read this. There is no app topbar
       at the moment, so headers pin to the top of the viewport (0). If a
       topbar is added later, set this to its height — every grid in the app
       picks it up automatically. */
    --is-topbar-h: 0px;
}