@property --top-safe-area { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --bottom-safe-area { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --left-safe-area { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --right-safe-area { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
    /* --- Universal Layout Variable Architecture (Safe Areas First) --- */
    --top-safe-area: env(safe-area-inset-top, 0px);
    --left-safe-area: env(safe-area-inset-left, 0px);
    --right-safe-area: env(safe-area-inset-right, 0px);
    --bottom-safe-area: env(safe-area-inset-bottom, 0px);
    /* Immersion Buffer: Ensures backgrounds overlap system bars perfectly */
    --bottom-safe-area-buffered: calc(var(--bottom-safe-area) + 1px);

    /* Orientation Transition: Smooths out layout shifts during device rotation */
    transition: --top-safe-area var(--m-normal) var(--m-ease),
                --bottom-safe-area var(--m-normal) var(--m-ease),
                --left-safe-area var(--m-normal) var(--m-ease),
                --right-safe-area var(--m-normal) var(--m-ease);

    /* Spacing System (Margin & Padding) - Pattern: 0.5, 0.75, 1, 2, 3 */
    /* Baseline (L3) is 1rem */
    --spacing-1: 0.5rem;
    --spacing-2: 0.75rem;
    --spacing-3: 1rem;
    --spacing-4: 2rem;
    --spacing-5: 3rem;

    /* Corner Radius System - Pattern: 0.5, 0.75, 1, 2, 3 */
    /* Baseline (L3) is 8px */
    --radius-1: 4px;
    --radius-2: 6px;
    --radius-3: 8px;
    --radius-4: 16px;
    --radius-5: 24px;
    --radius-circle: 50%;
    --radius-pill: 9999px;

    /* System Layering Model */
    --z-base: 1;
    --z-deep: 20;
    --z-active: 50;
    --z-transition: 100;
    --z-workspace: 60;
    --z-backdrop: 70;
    --z-panel: 90;
    --z-rail: 100;
    --z-island: 200;
    --z-header: 80;
    --z-modal: 5000;

    /* Font Size System (0.5, 0.75, 1, 2, 3) */
    --font-1: 0.5rem;
    --font-2: 0.75rem;
    --font-3: 1rem;
    --font-4: 2rem;
    --font-5: 3rem;
    --font-6: 4rem;
    --font-7: 5rem;
    --font-8: 6rem;
    --font-9: 8rem;
    --font-10: 10rem;

    /* Shadow System - Light Mode (Size & Opacity Pattern: 0.5, 0.75, 1, 1.5, 2) */
    /* Baseline (L3) is 20px blur / 0.1 opacity */
    --shadow-1: 0 0 10px 0 rgba(0, 0, 0, 0.05);
    --shadow-2: 0 0 15px 0 rgba(0, 0, 0, 0.075);
    --shadow-3: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    --shadow-4: 0 0 30px 0 rgba(0, 0, 0, 0.15);
    --shadow-5: 0 0 40px 0 rgba(0, 0, 0, 0.2);

    /* Background System - Light Mode (Pattern: 0.5, 0.75, 1, 1.5, 2) */
    /* Dark to Light (Consistent with Dark Mode) */
    --bg-1: #cccccc; /* 20% */
    --bg-2: #d9d9d9; /* 15% */
    --bg-3: #e5e5e5; /* 10% */
    --bg-4: #ededed; /* 7.5% */
    --bg-5: #f2f2f2; /* 5% */

    /* --- Centralized Device Breakpoints (5-Device Model) --- */
    --bp-watch: 15rem;       /* 240px */
    --bp-phone: 20rem;       /* 320px */
    --bp-tablet: 48rem;      /* 768px */
    --bp-desktop: 80rem;     /* 1280px */
    --bp-workstation: 150rem; /* 2400px */

    --side-safe-area: 0rem;

    /* --- Industrial Size Tokens (System Geometry) --- */
    --size-rail: 4rem;
    --size-topbar: var(--size-rail);
    --size-panel: 15rem;
    --size-header: var(--size-rail);
    --size-button: 3rem;
    --size-stat: 3rem;
    --size-icon: 1.5rem;

    /* Functional Rail Metrics (Geometry) */
    --rail-width: var(--size-rail);
    --rail-size-left: calc(var(--rail-width) + var(--left-safe-area));
    --rail-size-right: calc(var(--rail-width) + var(--right-safe-area));
    --rail-size: var(--rail-width); /* Backward Compatibility Alias */

    --topbar-height: var(--size-topbar);
    --top-reserve: 0px;
    --panel-inner-width: var(--size-panel);

    --indicator-thickness: 4px;
    --marker-inset: 6px;

    /* Derived Metrics for Sidebar/Workspace Pushing */
    --rail-reserve-padding-left: calc(var(--side-safe-area) + var(--rail-size-left));
    --rail-reserve-padding-right: calc(var(--side-safe-area) + var(--rail-size-right));
    --rail-reserve-padding: var(--rail-reserve-padding-left); /* Legacy Fallback */

    --side-panel-width-left: calc(var(--rail-reserve-padding-left) + var(--panel-inner-width));
    --side-panel-width-right: calc(var(--rail-reserve-padding-right) + var(--panel-inner-width));
    --side-panel-width: var(--side-panel-width-left);

    /* Baseline: No reserve on mobile */
    --main-panel-reserve-padding-left: 0px;
    --main-panel-reserve-padding-right: 0px;
    --main-panel-reserve-padding: 0px;

    /* Base View Padding (Mobile First: Include Safe Areas) */
    --view-padding-left: calc(var(--spacing-3) + var(--left-safe-area));
    --view-padding-right: calc(var(--spacing-3) + var(--right-safe-area));

    /* Mobile Contextual Metrics (Notch Aware) */
    --mobile-side-panel-width-left: calc(100% - var(--rail-size-right));
    --mobile-side-panel-width-right: calc(100% - var(--rail-size-left));

    /* Legacy Layout Logic Compatibility */
    --panel-width: var(--panel-inner-width);
    --panel-full-size: var(--side-panel-width);

    /* Text System - Light Mode (Black + Opacity Pattern: 0.5, 0.75, 1, 1.5, 2) */
    /* Baseline (L3) is 0.5 opacity */
    --text-1: rgba(0, 0, 0, 0.25);
    --text-2: rgba(0, 0, 0, 0.375);
    --text-3: rgba(0, 0, 0, 0.5);
    --text-4: rgba(0, 0, 0, 0.75);
    --text-5: rgba(0, 0, 0, 1);

    --text-color: var(--text-5);
    --system-accent: var(--p1-3);

    /* Haptic Interaction System (Base - Light) */
    --haptic-highlight: rgba(0, 0, 0, 0.05);
    --haptic-dim: rgba(0, 0, 0, 0.1);

    /* Glass Effect System */
    --glass-blur: 20px;
    --glass-opacity: 50%;
    --glow-opacity: 60%;
    --rail-glass-bg: color-mix(in srgb, var(--bg-3), transparent var(--glass-opacity));
    --panel-glass-bg: color-mix(in srgb, var(--bg-2), transparent var(--glass-opacity));

    /* Morphism Engine (Base Defaults) */
    --m-shadow-stack: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-float: 0 15px 35px rgba(0,0,0,0.1), 0 5px 15px rgba(0,0,0,0.05);
    --m-blur: 0px;

    /* Skeleton Shimmer System */
    --skeleton-bg: var(--bg-3);
    --skeleton-shimmer: var(--bg-4);

    /* --- Industrial Motion System (Ground-Up Rebuild) --- */
    --m-fast: 0.15s;
    --m-normal: 0.4s;
    --m-slow: 0.6s;
    --m-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --m-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --m-standard: var(--m-normal) var(--m-ease);
    --m-haptic: var(--m-fast) var(--m-spring);

    /* Neumorphic Haptics - Light */
    --neumo-high: #ffffff;
    --neumo-low: rgba(163, 177, 198, 0.6);

    /* Depth Tier Definitions */
    --d1-s: 16px; --d2-s: 12px; --d3-s: 8px; --d4-s: 4px; --d5-s: 2px;
    --d1-b: 32px; --d2-b: 24px; --d3-b: 16px; --d4-b: 8px; --d5-b: 4px;
    --d-s: var(--d3-s);
    --d-b: var(--d3-b);

    /* Width System (Standard Industrial) */
    --w-1: 15rem;   /* Watch */
    --w-2: 20rem;   /* Mobile */
    --w-3: 60rem;   /* Tablet */
    --w-4: 80rem;  /* Desktop */
    --w-5: 240rem;  /* 4K/Bigger */

    /* System Colors (Enterprise Variant - 80% Saturation) */
    --red-h: 0; --yellow-h: 42; --green-h: 145; --blue-h: 215;
    --sys-s: 80%;

    --red-1: hsl(var(--red-h), var(--sys-s), 95%); --red-2: hsl(var(--red-h), var(--sys-s), 70%); --red-3: hsl(var(--red-h), var(--sys-s), 45%); --red-4: hsl(var(--red-h), var(--sys-s), 25%); --red-5: hsl(var(--red-h), var(--sys-s), 10%);
    --yellow-1: hsl(var(--yellow-h), var(--sys-s), 95%); --yellow-2: hsl(var(--yellow-h), var(--sys-s), 70%); --yellow-3: hsl(var(--yellow-h), var(--sys-s), 45%); --yellow-4: hsl(var(--yellow-h), var(--sys-s), 25%); --yellow-5: hsl(var(--yellow-h), var(--sys-s), 10%);
    --green-1: hsl(var(--green-h), var(--sys-s), 95%); --green-2: hsl(var(--green-h), var(--sys-s), 70%); --green-3: hsl(var(--green-h), var(--sys-s), 45%); --green-4: hsl(var(--green-h), var(--sys-s), 25%); --green-5: hsl(var(--green-h), var(--sys-s), 10%);
    --blue-1: hsl(var(--blue-h), var(--sys-s), 95%); --blue-2: hsl(var(--blue-h), var(--sys-s), 70%); --blue-3: hsl(var(--blue-h), var(--sys-s), 45%); --blue-4: hsl(var(--blue-h), var(--sys-s), 25%); --blue-5: hsl(var(--blue-h), var(--sys-s), 10%);

    /* Binary Subdivision Palette (The 1-80-45-25-70-95 Formula - Enterprise Variant) */
    --p1-h: 175; --p2-h: 260; --p3-h: 325; --p4-h: 75; --p5-h: 200; --p6-h: 290; --p7-h: 15;
    --p-s: 80%;

    /* P1 (Business - Emerald) */
    --p1-1: hsl(var(--p1-h), var(--p-s), 95%); --p1-2: hsl(var(--p1-h), var(--p-s), 70%); --p1-3: hsl(var(--p1-h), var(--p-s), 45%); --p1-4: hsl(var(--p1-h), var(--p-s), 25%); --p1-5: hsl(var(--p1-h), var(--p-s), 10%);
    /* P2 (Admin - Purple) */
    --p2-1: hsl(var(--p2-h), var(--p-s), 95%); --p2-2: hsl(var(--p2-h), var(--p-s), 70%); --p2-3: hsl(var(--p2-h), var(--p-s), 45%); --p2-4: hsl(var(--p2-h), var(--p-s), 25%); --p2-5: hsl(var(--p2-h), var(--p-s), 10%);
    /* P3 (Workforce - Magenta) */
    --p3-1: hsl(var(--p3-h), var(--p-s), 95%); --p3-2: hsl(var(--p3-h), var(--p-s), 70%); --p3-3: hsl(var(--p3-h), var(--p-s), 45%); --p3-4: hsl(var(--p3-h), var(--p-s), 25%); --p3-5: hsl(var(--p3-h), var(--p-s), 10%);
    /* P4-P7 (Extended Palette) */
    --p4-1: hsl(var(--p4-h), var(--p-s), 95%); --p4-2: hsl(var(--p4-h), var(--p-s), 70%); --p4-3: hsl(var(--p4-h), var(--p-s), 45%); --p4-4: hsl(var(--p4-h), var(--p-s), 25%); --p4-5: hsl(var(--p4-h), var(--p-s), 10%);
    --p5-1: hsl(var(--p5-h), var(--p-s), 95%); --p5-2: hsl(var(--p5-h), var(--p-s), 70%); --p5-3: hsl(var(--p5-h), var(--p-s), 45%); --p5-4: hsl(var(--p5-h), var(--p-s), 25%); --p5-5: hsl(var(--p5-h), var(--p-s), 10%);
    --p6-1: hsl(var(--p6-h), var(--p-s), 95%); --p6-2: hsl(var(--p6-h), var(--p-s), 70%); --p6-3: hsl(var(--p6-h), var(--p-s), 45%); --p6-4: hsl(var(--p6-h), var(--p-s), 25%); --p6-5: hsl(var(--p6-h), var(--p-s), 10%);
    --p7-1: hsl(var(--p7-h), var(--p-s), 95%); --p7-2: hsl(var(--p7-h), var(--p-s), 70%); --p7-3: hsl(var(--p7-h), var(--p-s), 45%); --p7-4: hsl(var(--p7-h), var(--p-s), 25%); --p7-5: hsl(var(--p7-h), var(--p-s), 10%);

    /* Extended Palette (P8-P16) */
    --p8-h: 120; --p9-h: 185; --p10-h: 215; --p11-h: 245; --p12-h: 275; --p13-h: 305; --p14-h: 345; --p15-h: 45; --p16-h: 90;

    --p8-1: hsl(var(--p8-h), var(--p-s), 95%); --p8-2: hsl(var(--p8-h), var(--p-s), 70%); --p8-3: hsl(var(--p8-h), var(--p-s), 45%); --p8-4: hsl(var(--p8-h), var(--p-s), 25%); --p8-5: hsl(var(--p8-h), var(--p-s), 10%);
    --p9-1: hsl(var(--p9-h), var(--p-s), 95%); --p9-2: hsl(var(--p9-h), var(--p-s), 70%); --p9-3: hsl(var(--p9-h), var(--p-s), 45%); --p9-4: hsl(var(--p9-h), var(--p-s), 25%); --p9-5: hsl(var(--p9-h), var(--p-s), 10%);
    --p10-1: hsl(var(--p10-h), var(--p-s), 95%); --p10-2: hsl(var(--p10-h), var(--p-s), 70%); --p10-3: hsl(var(--p10-h), var(--p-s), 45%); --p10-4: hsl(var(--p10-h), var(--p-s), 25%); --p10-5: hsl(var(--p10-h), var(--p-s), 10%);
    --p11-1: hsl(var(--p11-h), var(--p-s), 95%); --p11-2: hsl(var(--p11-h), var(--p-s), 70%); --p11-3: hsl(var(--p11-h), var(--p-s), 45%); --p11-4: hsl(var(--p11-h), var(--p-s), 25%); --p11-5: hsl(var(--p11-h), var(--p-s), 10%);
    --p12-1: hsl(var(--p12-h), var(--p-s), 95%); --p12-2: hsl(var(--p12-h), var(--p-s), 70%); --p12-3: hsl(var(--p12-h), var(--p-s), 45%); --p12-4: hsl(var(--p12-h), var(--p-s), 25%); --p12-5: hsl(var(--p12-h), var(--p-s), 10%);
    --p13-1: hsl(var(--p13-h), var(--p-s), 95%); --p13-2: hsl(var(--p13-h), var(--p-s), 70%); --p13-3: hsl(var(--p13-h), var(--p-s), 45%); --p13-4: hsl(var(--p13-h), var(--p-s), 25%); --p13-5: hsl(var(--p13-h), var(--p-s), 10%);
    --p14-1: hsl(var(--p14-h), var(--p-s), 95%); --p14-2: hsl(var(--p14-h), var(--p-s), 70%); --p14-3: hsl(var(--p14-h), var(--p-s), 45%); --p14-4: hsl(var(--p14-h), var(--p-s), 25%); --p14-5: hsl(var(--p14-h), var(--p-s), 10%);
    --p15-1: hsl(var(--p15-h), var(--p-s), 95%); --p15-2: hsl(var(--p15-h), var(--p-s), 70%); --p15-3: hsl(var(--p15-h), var(--p-s), 45%); --p15-4: hsl(var(--p15-h), var(--p-s), 25%); --p15-5: hsl(var(--p15-h), var(--p-s), 10%);
    --p16-1: hsl(var(--p16-h), var(--p-s), 95%); --p16-2: hsl(var(--p16-h), var(--p-s), 70%); --p16-3: hsl(var(--p16-h), var(--p-s), 45%); --p16-4: hsl(var(--p16-h), var(--p-s), 25%); --p16-5: hsl(var(--p16-h), var(--p-s), 10%);

    /* High-Intensity Semantic Core (P3 Wide Gamut) */
    @supports (color: color(display-p3 1 1 1)) {
        @media (color-gamut: p3) {
            --p1-3: oklch(65% 0.28 175); /* Business - Vibrant Emerald */
            --p2-3: oklch(65% 0.28 260); /* Admin - Deep Electric Purple */
            --p3-3: oklch(65% 0.28 325); /* Workforce - Hot Magenta */
            --p4-3: oklch(65% 0.28 75);  /* Lime Glow */
            --p5-3: oklch(65% 0.28 200); /* Cyan Flare */
            --p6-3: oklch(65% 0.28 290); /* Electric Violet */
            --p7-3: oklch(65% 0.28 15);  /* Vivid Orange-Red */
            --p8-3: oklch(65% 0.28 120); /* Pure Green */
            --p9-3: oklch(65% 0.28 185); /* Electric Teal */
            --p10-3: oklch(65% 0.28 215); /* Sky Blue */
            --p11-3: oklch(65% 0.28 245); /* Indigo Glow */
            --p12-3: oklch(65% 0.28 275); /* Deep Amethyst */
            --p13-3: oklch(65% 0.28 305); /* Hot Pink */
            --p14-3: oklch(65% 0.28 345); /* Crimson Flare */
            --p15-3: oklch(65% 0.28 45);  /* Safety Orange */
            --p16-3: oklch(65% 0.28 90);  /* Acid Lime */
        }
    }
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Shadow System - Dark Mode */
        --shadow-1: 0 0 10px 0 rgba(0, 0, 0, 0.2);
        --shadow-2: 0 0 15px 0 rgba(0, 0, 0, 0.3);
        --shadow-3: 0 0 20px 0 rgba(0, 0, 0, 0.4);
        --shadow-4: 0 0 30px 0 rgba(0, 0, 0, 0.6);
        --shadow-5: 0 0 40px 0 rgba(0, 0, 0, 0.8);

        /* Background System - Dark Mode */
        --bg-1: #0d0d0d;
        --bg-2: #131313;
        --bg-3: #1a1a1a;
        --bg-4: #262626;
        --bg-5: #333333;

        /* Text System - Dark Mode */
        --text-1: rgba(255, 255, 255, 0.25);
        --text-2: rgba(255, 255, 255, 0.375);
        --text-3: rgba(255, 255, 255, 0.5);
        --text-4: rgba(255, 255, 255, 0.75);
        --text-5: rgba(255, 255, 255, 1);

        --text-color: var(--text-5);

        /* Haptic Interaction System (Base - Dark) */
        --haptic-highlight: rgba(255, 255, 255, 0.08);
        --haptic-dim: rgba(0, 0, 0, 0.3);

        /* System Colors - Dark Mode (Inverted Lightness) */
        --red-1: hsl(var(--red-h), var(--sys-s), 10%); --red-2: hsl(var(--red-h), var(--sys-s), 25%); --red-3: hsl(var(--red-h), var(--sys-s), 45%); --red-4: hsl(var(--red-h), var(--sys-s), 70%); --red-5: hsl(var(--red-h), var(--sys-s), 95%);
        --yellow-1: hsl(var(--yellow-h), var(--sys-s), 10%); --yellow-2: hsl(var(--yellow-h), var(--sys-s), 25%); --yellow-3: hsl(var(--yellow-h), var(--sys-s), 45%); --yellow-4: hsl(var(--yellow-h), var(--sys-s), 70%); --yellow-5: hsl(var(--yellow-h), var(--sys-s), 95%);
        --green-1: hsl(var(--green-h), var(--sys-s), 10%); --green-2: hsl(var(--green-h), var(--sys-s), 25%); --green-3: hsl(var(--green-h), var(--sys-s), 45%); --green-4: hsl(var(--green-h), var(--sys-s), 70%); --green-5: hsl(var(--green-h), var(--sys-s), 95%);
        --blue-1: hsl(var(--blue-h), var(--sys-s), 10%); --blue-2: hsl(var(--blue-h), var(--sys-s), 25%); --blue-3: hsl(var(--blue-h), var(--sys-s), 45%); --blue-4: hsl(var(--blue-h), var(--sys-s), 70%); --blue-5: hsl(var(--blue-h), var(--sys-s), 95%);
    }
}

:root[data-theme="dark"] {
    --bg-1: #0d0d0d; --bg-2: #131313; --bg-3: #1a1a1a; --bg-4: #262626; --bg-5: #333333;
    --text-1: rgba(255, 255, 255, 0.25); --text-2: rgba(255, 255, 255, 0.375); --text-3: rgba(255, 255, 255, 0.5); --text-4: rgba(255, 255, 255, 0.75); --text-5: rgba(255, 255, 255, 1);

    --skeleton-bg: var(--bg-4);
    --skeleton-shimmer: rgba(255, 255, 255, 0.1);
}

[data-animations="off"], [data-animations="off"] * {
    transition: none;
    animation: none;
}