/* ============================================================
   ZIMOZO ERP — Design Tokens
   Single source for typography, spacing, breakpoints.
   Theme colors and skins are in theme-skins.css (after tokens).
   ============================================================ */

:root {
    /* Typography scale */
    --z-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --z-text-xs: 0.75rem;      /* 12px */
    --z-text-sm: 0.875rem;     /* 14px */
    --z-text-base: 1rem;       /* 16px */
    --z-text-lg: 1.125rem;     /* 18px */
    --z-text-xl: 1.25rem;      /* 20px */
    --z-text-2xl: 1.5rem;      /* 24px */
    --z-text-3xl: 1.875rem;    /* 30px — KPI values, large numbers */
    --z-text-4xl: 2.25rem;     /* 36px — hero numbers */
    --z-line-height-tight: 1.25;
    --z-line-height-normal: 1.5;
    --z-line-height-relaxed: 1.625;
    --z-weight-normal: 400;
    --z-weight-medium: 500;
    --z-weight-semibold: 600;
    --z-weight-bold: 700;

    /* Enterprise palette (flat, white-first) — 2026 SaaS */
    --z-bg-page: #F8FAFC;
    --z-bg-subtle: #F8F9FA;
    --z-bg-muted: #EEF1F4;
    --z-bg-table-head: #F9FAFB;
    --z-bg-row-hover: #F3F4F6;
    --z-border: #E5E7EB;
    --z-border-input: #D1D5DB;
    --z-btn-primary-bg: #111827;
    --z-btn-primary-text: #FFFFFF;
    --z-text: #374151;
    --z-text-primary: #111827;
    --z-text-secondary: #6B7280;
    --z-primary: #111827;
    --z-primary-rgb: 17, 24, 39;
    --z-transition: all 0.2s ease;

    /* Semantic (status, alerts) — enterprise-safe */
    --z-success: #059669;
    --z-warning: #D97706;
    --z-danger: #DC2626;
    --z-info: #2563EB;
    --z-border-light: #F3F4F6;

    /* Semantic backgrounds (tinted) — for badges, alerts, status cards */
    --z-bg-success: rgba(5, 150, 105, 0.08);
    --z-bg-warning: rgba(217, 119, 6, 0.08);
    --z-bg-danger: rgba(220, 38, 38, 0.08);
    --z-bg-info: rgba(37, 99, 235, 0.08);

    /* Semantic text — for badges, alerts, status text */
    --z-text-success: #166534;
    --z-text-warning: #92400E;
    --z-text-danger: #991B1B;
    --z-text-info: #1E40AF;

    /* Spacing — 8px grid (8, 16, 24, 32, 40, 48) */
    --z-space-1: 0.25rem;   /* 4px */
    --z-space-2: 0.5rem;    /* 8px */
    --z-space-3: 0.75rem;   /* 12px */
    --z-space-4: 1rem;      /* 16px — 2 units */
    --z-space-5: 1.25rem;   /* 20px */
    --z-space-6: 1.5rem;    /* 24px — 3 units */
    --z-space-8: 2rem;      /* 32px */
    --z-space-10: 2.5rem;   /* 40px */
    --z-space-12: 3rem;     /* 48px */

    /* Radius scale */
    --z-radius-sm: 4px;        /* badges, small elements */
    --z-radius-md: 8px;        /* buttons, inputs */
    --z-radius-lg: 12px;       /* cards, modals */
    --z-radius-full: 9999px;   /* pills, avatars */
    --z-radius-card: 12px;     /* alias for --z-radius-lg */
    --z-radius-btn: 8px;       /* alias for --z-radius-md */

    /* Shadow / elevation scale */
    --z-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --z-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
    --z-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --z-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --z-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Liquid Glass tokens — visionOS-style frosted panels */
    --z-glass-blur: 20px;
    --z-glass-saturate: 180%;
    --z-glass-bg: rgba(255, 255, 255, 0.72);
    --z-glass-bg-heavy: rgba(255, 255, 255, 0.85);
    --z-glass-bg-light: rgba(255, 255, 255, 0.55);
    --z-glass-border: rgba(255, 255, 255, 0.25);
    --z-glass-border-subtle: rgba(255, 255, 255, 0.15);
    --z-glass-highlight: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 40%);
    --z-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    --z-glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
    --z-glass-radius: 16px;

    /* Mesh background blob colors (derived from skin primary) */
    --z-mesh-color-1: rgba(var(--z-primary-rgb), 0.3);
    --z-mesh-color-2: rgba(var(--z-primary-rgb), 0.15);
    --z-mesh-color-3: rgba(99, 102, 241, 0.12);
    --z-mesh-color-4: rgba(168, 85, 247, 0.1);

    /* Breakpoints (for reference; use in media queries) */
    --z-breakpoint-sm: 640px;
    --z-breakpoint-md: 768px;
    --z-breakpoint-lg: 1024px;
    --z-breakpoint-xl: 1280px;
    --z-breakpoint-pos: 1366px;   /* 15.6" display typical min width; POS optimized */
    --z-breakpoint-pos-max: 1920px;
}

/* POS layout: applied when $pos_layout is true in app.blade.php; optimized for 15.6" and above */
@media (min-width: 1366px) {
    body.hold-transition.lockscreen .content-wrapper {
        /* POS-specific density can be tuned here without affecting mobile */
    }
}