/* =============================================================
   Synexusone design tokens — single source of truth.

   Values here are the de-facto standards already used across the
   application (derived by frequency from the existing views and
   stylesheets); they are centralised, not redesigned.

   Theme-specific colours live in app/themes/themes.css as --bs-*
   and --app-* tokens. This file defines the structural tokens
   (scale, spacing, radii, control sizing, elevation) plus neutral
   and intent colours, and maps them onto the theme tokens so the
   light / dark / calm themes keep working.
   ============================================================= */

:root {
    /* ---------- Typography ---------- */
    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;

    /* Type scale (px values match the sizes already in use) */
    --fs-xs: 12px; /* helper text, dense table meta   */
    --fs-sm: 13px; /* table cells, pagination, labels */
    --fs-md: 14px; /* body / control text             */
    --fs-lg: 16px; /* section subtitle                */
    --fs-xl: 18px; /* section heading                 */
    --fs-2xl: 24px; /* page / modal title              */

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

    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.6;

    /* ---------- Spacing (4px base) ---------- */
    --spacing-unit: 8px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* ---------- Page shell inset ----------
       The single horizontal offset between the sidebar and page content,
       plus the vertical rhythm above and below it. The shell (.synx-main
       in app/base/layout.css) applies the whole inset, so every route
       starts at the same place; a page's own root wrapper must not add a
       second one. The values are the Employees / Employee Access offset
       (24px shell padding + 24px page padding) stated once. */
    --app-page-inset-x: 48px;
    --app-page-inset-top: 48px;
    --app-page-inset-bottom: 56px;

    /* ---------- Radii ---------- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --border-radius: var(--radius-md); /* legacy alias */

    /* ---------- Control sizing ---------- */
    --control-height-sm: 32px;
    --control-height: 38px;
    --control-height-lg: 44px;
    --control-padding-x: 12px;
    --icon-size-sm: 16px;
    --icon-size: 20px;
    --icon-size-lg: 24px;

    /* ---------- Neutral palette ----------
       Two ramps, because the application already uses two: gray for the
       shell, forms and tables, slate for the admin screens and the
       app-table colour set (--at-text is slate-900, --at-muted slate-500).
       Both are named here rather than repeated as literals; picking one and
       retiring the other is a visual-design decision, not a mechanical one. */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-900: #111827;

    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-900: #0f172a;

    /* ---------- Intent colours ---------- */
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-secondary: #6b7280;
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --color-warning: #d97706;
    --color-info: #0ea5e9;

    /* ---------- Semantic surfaces / text / borders ----------
       These default to the theme tokens from themes.css when they
       are present, so a theme switch still drives everything. */
    --color-bg: var(--app-surface, #ffffff);
    --surface: var(--app-surface-2, #ffffff);
    --surface-muted: var(--gray-50);
    --color-text: var(--app-text, var(--gray-900));
    --text-muted: var(--app-muted, var(--gray-500));
    --border-color: var(--app-border, var(--gray-200));
    --border-color-strong: var(--gray-300);
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, .15);

    /* ---------- Elevation ---------- */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, .035), 0 4px 12px rgba(15, 23, 42, .025);
    --shadow-md: 0 2px 6px rgba(15, 23, 42, .035), 0 10px 28px rgba(15, 23, 42, .055);
    --shadow-lg: 0 8px 20px rgba(15, 23, 42, .06), 0 24px 64px rgba(15, 23, 42, .12);
    --box-shadow: var(--shadow-sm); /* legacy alias */

    /* ---------- Component tokens ---------- */
    --modal-radius: var(--radius-lg);
    --modal-padding-x: var(--space-5);
    --modal-padding-y: 18px;

    --table-header-bg: var(--gray-50);
    --table-cell-padding-y: var(--space-3);
    --table-cell-padding-x: var(--space-4);
    --table-row-hover-bg: rgba(15, 23, 42, .02);

    /* Matches the skin the app already used on its scroll panels
       (8px, gray-400 pill thumb, transparent track). */
    --scrollbar-size: 8px;
    --scrollbar-thumb: var(--gray-400);
    --scrollbar-thumb-hover: var(--gray-500);
    --scrollbar-track: transparent;
}

/* Dark theme: the structural tokens that are not already derived from
   --app-* read the dark palette in app/themes/themes.css. */
[data-bs-theme="dark"] {
    --color-bg: var(--app-bg);
    --surface: var(--app-card);
    --surface-muted: var(--app-surface-muted);
    --border-color-strong: var(--app-border-strong);
    --color-primary-hover: #3b82f6;
    --focus-ring: var(--app-focus-ring);
    --table-header-bg: var(--app-surface-muted);
    --table-row-hover-bg: rgba(255, 255, 255, .04);
    --scrollbar-thumb: var(--app-border-strong);
    --scrollbar-thumb-hover: #64748b;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .35);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, .5);
}

/* The page inset tightens on narrow viewports — the same 32px / 16px
   steps the per-page mobile breakpoints already used, now in one place.
   Bootstrap's lg and sm breakpoints. */
@media (max-width: 991.98px) {
    :root {
        --app-page-inset-x: 32px;
        --app-page-inset-top: 32px;
        --app-page-inset-bottom: 40px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --app-page-inset-x: 16px;
        --app-page-inset-top: 24px;
        --app-page-inset-bottom: 32px;
    }
}

/* Touch devices: the 38px / 32px control heights are tight for a finger, so
   the control tokens step up to the existing large size. Scoped to coarse
   pointers rather than narrow widths, so a small desktop window is unchanged
   and a touch laptop is covered. Everything built on the tokens follows. */
@media (pointer: coarse) {
    :root {
        --control-height: 44px;
        --control-height-sm: 40px;
    }
}