/* ============================================================================
   lp-tokens.css — Design tokens for LeanPoint UI V2.

   Only design tokens live here — colours, typography, shadows, radii,
   spacing, dimensions, z-index, motion. All other layers reference these
   tokens via var(--lp-…). Values follow the prototype (newdesign.scwd.dk).
   Defined on :root per CSS Architecture §2.4.1. Tenant overrides load AFTER
   this file (see Common/StyleV2, scoped to .lp-v2) so tenants can restyle
   the whole app by only touching a handful of tokens.
   ============================================================================ */

:root {
    /* ── Brand & accent ──────────────────────────────────────────────────── */
    --lp-brand:        #102A43;   /* left navigation */
    --lp-brand-hover:  #1B3A57;
    --lp-brand-fg:     #FFFFFF;
    --lp-topbar:       #0B2135;   /* top utility bar */
    --lp-accent:       #55BD52;
    --lp-accent-hover: #49A847;   /* prototype /elements/ "Brand hover" */
    --lp-accent-fg:    #FFFFFF;
    --lp-accent-soft:  #EAF8EA;   /* active chip / dock button / info bar */
    --lp-accent-text:  #2F7A35;   /* text on --lp-accent-soft */
    --lp-infobar-text:   #2F6B32; /* page info bar (explainer) */
    --lp-infobar-link:   #2F7E35;
    --lp-infobar-border: #D8EED8;

    /* ── Surfaces ────────────────────────────────────────────────────────── */
    --lp-bg:            #F8FAFC;
    --lp-surface:       #FFFFFF;
    --lp-surface-alt:   #F8FAFC;
    --lp-surface-hover: #F1F5F9;
    --lp-overlay-scrim: rgba(15, 23, 42, 0.35);

    /* ── Text ────────────────────────────────────────────────────────────── */
    --lp-text:           #1F2937;
    --lp-text-strong:    #1F2937;
    --lp-text-secondary: #334155;   /* buttons, chips */
    --lp-text-label:     #475569;   /* table headers */
    --lp-text-muted:     #64748B;
    --lp-text-inverse:   #FFFFFF;
    --lp-nav-text:       #D7E2EE;   /* nav rail + utility bar */

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --lp-border:        #E2E8F0;
    --lp-border-strong: #CBD5E1;
    --lp-border-focus:  #55BD52;

    /* ── Status ──────────────────────────────────────────────────────────── */
    --lp-success: #2E9E4B;
    --lp-warning: #E39C0E;
    --lp-danger:  #EF4444;   /* prototype /elements/ "Error" */
    --lp-info:    #0F76BF;

    /* ── Radii ───────────────────────────────────────────────────────────── */
    --lp-radius-sm: 4px;
    --lp-radius:    6px;
    --lp-radius-lg: 10px;   /* buttons, inputs, selects */
    --lp-radius-xl: 12px;   /* cards, toolbars, dock buttons */

    /* ── Shadows ─────────────────────────────────────────────────────────── */
    --lp-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.06);
    --lp-shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.06);
    --lp-shadow-3: 0 12px 32px rgba(15, 23, 42, 0.15), 0 6px 12px rgba(15, 23, 42, 0.08);

    /* ── Calendar & activity palette (newdesign.scwd.dk/elements "SaaS color palette") ── */
    --lp-project-bg-color: #F1F5F9;        --lp-project-border-color: #DBE3EC;        --lp-project-text-color: #475569;
    --lp-holiday-paid-bg-color: #DCFCE7;   --lp-holiday-paid-border-color: #86EFAC;   --lp-holiday-paid-text-color: #166534;
    --lp-training-bg-color: #DBEAFE;       --lp-training-border-color: #93C5FD;       --lp-training-text-color: #1E3A8A;
    --lp-holiday-unpaid-bg-color: #FEF3C7; --lp-holiday-unpaid-border-color: #FBBF24; --lp-holiday-unpaid-text-color: #92400E;
    --lp-absent-bg-color: #FEE2E2;         --lp-absent-border-color: #FCA5A5;         --lp-absent-text-color: #991B1B;
    --lp-vehicle-bg-color: #EEF2FF;        --lp-vehicle-border-color: #A5B4FC;        --lp-vehicle-text-color: #3730A3;
    --lp-todo-bg-color: #FEFCE8;           --lp-todo-border-color: #FDE047;           --lp-todo-text-color: #854D0E;
    --lp-task-bg-color: #FFF7ED;           --lp-task-border-color: #FDBA74;           --lp-task-text-color: #7C2D12;
    --lp-inventory-bg-color: #F5F3FF;      --lp-inventory-border-color: #C4B5FD;      --lp-inventory-text-color: #4C1D95;
    --lp-time-text-text-color: #92400E;    --lp-event-text-text-color: #0F172A;
    /* Availability toggle status */
    --lp-toggle-label-bg-color: #DCFCE7;           --lp-toggle-label-border-color: #86EFAC;           --lp-toggle-label-text-color: #166534;
    --lp-toggle-label-disabled-bg-color: #FEE2E2;  --lp-toggle-label-disabled-border-color: #FCA5A5;  --lp-toggle-label-disabled-text-color: #991B1B;
    /* Chips, row toggle, avatar, notification dot (elements page) */
    --lp-chip-active-bg-color: #EAF8EA; --lp-chip-active-border-color: #55BD52; --lp-chip-active-text-color: #2F7A35;
    --lp-row-toggle-border-color: #E2E8F2;
    --lp-avatar-bg-color: #DDE7F0; --lp-avatar-text-color: #1F2937;
    --lp-notification-dot-bg-color: #3B82F6; --lp-notification-dot-border-color: #102A43;

    /* ── Scrollbars ──────────────────────────────────────────────────────── */
    --lp-scrollbar-thumb:        #DDE1E5;
    --lp-scrollbar-thumb-hover:  #BFC5CC;
    --lp-scrollbar-thumb-active: #6B7280;

    /* ── Layout dimensions ───────────────────────────────────────────────── */
    --lp-topnav-h:              56px;
    --lp-navrail-w:             248px;    /* left module-nav rail */
    --lp-sidebar-w:             376px;    /* 320px panel + 56px dock rail */
    --lp-sidebar-collapsed-w:   56px;
    --lp-detail-w:              320px;    /* same panel width as the Filters sidebar (--lp-sidebar-w minus its rail) */
    --lp-control-h:             40px;     /* buttons, inputs, selects */
    --lp-font-size-btn:         13.3333px; /* button label: prototype buttons use the default button font (Arial 13.33px / 700) */
    --lp-font-family-btn:       Arial, sans-serif;
    --lp-chip-h:                24px;     /* chips / badges / status pills (prototype .badge) */
    --lp-chip-px:               10px;
    --lp-chip-fs:               var(--lp-font-size-sm);
    --lp-fold-strip-w:          calc(100vw - 96px);  /* visible strip of a horizontally scrolling grid (viewport minus the content side padding) */

    /* ── Typography ──────────────────────────────────────────────────────── */
    --lp-font-family:
        "Segoe UI",
        system-ui,
        Arial,
        sans-serif;
    --lp-font-heading: var(--lp-font-family);
    --lp-font-body:    var(--lp-font-family);
    --lp-font-size:    13px;
    --lp-font-size-sm: 12px;
    --lp-font-size-lg: 14px;
    /* Type scale — every size and weight in the lp-* sheets comes from here. */
    --lp-font-size-2xs: 10px;
    --lp-font-size-xs:  11px;
    --lp-font-size-md:  15px;
    --lp-font-size-xl:  16px;
    --lp-font-size-2xl: 18px;
    --lp-font-size-3xl: 20px;
    --lp-font-size-4xl: 22px;
    --lp-font-size-5xl: 24px;
    --lp-fw-regular:   400;
    --lp-fw-medium:    500;
    --lp-fw-semibold:  600;
    --lp-fw-bold:      700;
    --lp-fw-extrabold: 800;
    --lp-fw-black:     900;

    /* ── Density (compact | standard | comfortable) ──────────────────────── */
    --lp-row-py: 14px;
    --lp-row-fs: 13px;
    --lp-row-avatar: 32px;   /* grid avatar — scales with density (prototype) */
    --lp-row-toggle: 32px;   /* row expand toggle */

    /* ── Z-index scale ───────────────────────────────────────────────────── */
    --lp-z-nav:        40;
    --lp-z-dropdown:   60;
    --lp-z-popover:    80;
    --lp-z-menu:       90;
    --lp-z-modal:      100;
    --lp-z-toast:      120;

    /* ── Motion ──────────────────────────────────────────────────────────── */
    --lp-ease: cubic-bezier(0.2, 0, 0.13, 1.5);
    --lp-dur:  180ms;
}

/* Density variants — override --lp-row-py and --lp-row-fs. Table components
   read these tokens directly so switching density is a single class flip on
   the <body>. Padding / font size per UI spec §10.10.1; avatar and toggle
   sizes follow the prototype, giving rows of ~45 / ~61 / ~73 px. */
.lp-v2.lp-density-compact     { --lp-row-py: 8px;  --lp-row-fs: 12px; --lp-row-avatar: 28px; --lp-row-toggle: 28px; }
.lp-v2.lp-density-standard    { --lp-row-py: 14px; --lp-row-fs: 13px; --lp-row-avatar: 32px; --lp-row-toggle: 32px; }
.lp-v2.lp-density-comfortable { --lp-row-py: 18px; --lp-row-fs: 14px; --lp-row-avatar: 36px; --lp-row-toggle: 34px; }

/* ══════════════════════════════════════════════════════════════════════════
   LEGACY TENANT VARIABLES → V2 TOKENS
   The legacy tenant stylesheet (/Common/style) still loads for popups, the
   Setup wizard, print and recruiter pages. It paints buttons, section bars,
   grid headers, list selections, page titles … from these variables, set on
   :root with the tenant's old colours and "Exo 2". html:root (0,1,1) beats its
   :root (0,1,0) whatever the load order, so every legacy rule now draws with
   the prototype palette and font.
   ══════════════════════════════════════════════════════════════════════════ */
html:root {
    --lp-color1: var(--lp-brand);           --lp-color1-fg: var(--lp-brand-fg);      /* brand bars, selected rows/pages */
    --lp-color2: var(--lp-surface-alt);     --lp-color2-fg: var(--lp-text-strong);   /* panel / menu chrome */
    --lp-color3: var(--lp-accent);          --lp-color3-fg: var(--lp-accent-fg);     /* add / positive actions */
    --lp-color4: var(--lp-surface);         --lp-color4-fg: var(--lp-text-secondary);/* secondary buttons */
    --lp-color5: var(--lp-accent-soft);     --lp-color5-fg: var(--lp-accent-text);   /* view / add badges */
    --lp-color6: var(--lp-surface-alt);     --lp-color6-fg: var(--lp-text);          /* light panels */
    --lp-color7: var(--lp-surface-hover);                                            /* hover */
    --lp-detail-bg: var(--lp-surface);      --lp-detail-fg: var(--lp-text);
    --lp-detail-alt-bg: var(--lp-surface-alt); --lp-detail-alt-fg: var(--lp-text);
    --lp-grid-header-bg: var(--lp-surface-alt);
    --lp-grid-header-fg: var(--lp-text-label);
    --lp-grid-header-font-size: 12px;
    --lp-grid-row-bg: var(--lp-surface);
    --lp-grid-alt-bg: var(--lp-surface);                                             /* no zebra */
    --lp-grid-text-size: 13px;
    --lp-page-title-fg: var(--lp-text-strong);
    --lp-page-title-size: 24px;
    --lp-font: var(--lp-font-family);
    --lp-button-font: var(--lp-font-family);
    --lp-headerspan-font: var(--lp-font-family);
}