/* ========================================
   BPI360 Design Tokens CSS Variables
   Runtime mirror of the FD token catalogue (bpi360-devkit):
   docs/fd-design-tokens/design-tokens.json
   Change JSON first, then update this file — no compile step required.
   ======================================== */

/* ========================================
   TYPOGRAPHY SYSTEM DOCUMENTATION
   ========================================
   
   USAGE GUIDELINES:
   
   1. Always use CSS variables, never hardcoded values
   2. Use semantic classes when available (.fd-heading-page, .fd-body-base)
   3. Font sizes scale responsively - test on multiple screen sizes
   4. Line heights: pair with size role (meta/secondary→16, body→20, title/section→24, display→32)
   5. Font weights: normal (400) for body, semibold (600) for headings, bold (700) for emphasis
   
   TYPE LADDER — 2pt system @ 13px html root (scales with --fd-ui-scale):
   Canonical absolute steps: 11 · 12 · 13 · 16 · 18 · 24  (prefer semantic roles below)

   - Meta:       --font-size-meta (11px) — badges, chips, calendar meta only
   - Secondary:  --font-size-secondary (12px) — labels, chrome controls, page subtitle
   - Body:       --font-size-body (13px) — body copy, form values, primary table text
   - Title:      --font-size-title (16px) — page / topbar title
   - Section:    --font-size-section (18px) — section headings
   - Display:    --font-size-display (24px) — KPI / metric values

   Chrome (buttons / tab strips / search / filter selects): --fd-control-font-size
   (= secondary — 12px; body is 13px at this root).

   Legacy aliases map onto the ladder (xs/caption/micro→meta, sm/subtitle→secondary,
   base/compact/card-title→body, heading/lg→section, kpi/2xl→display).

   SCALE: html { font-size: calc(13px * var(--fd-ui-scale, 1)) } in fd-bootstrap-bridge;
   fd-ui-scale.js sets --fd-ui-scale. All type tokens are rem so they track the slider.
   Keep 1px borders / shadows / breakpoints in px.
   
   ======================================== */

:root {
  /* ========================================
     COLOR TOKENS
     ======================================== */
  
  /* Primary Colors */
  --color-primary-0: #3fa9f5;
  --color-primary-1: #3fa9f5a6;
  --color-primary-2: #3fa9f5;
  /* Pulse-aligned primary tints (focus ring, subtle fills) */
  --color-blue-100: #d5effd;
  
  /* Neutral Colors */
  --color-white: #ffffffff;
  --color-white-90: rgb(255 255 255 / 0.90);
  --color-dark: #273240ff;
  
  /* Grey Scale */
  /* Text greys — +5% darker again 2026-08-13 (surfaces unchanged) */
  --color-grey-01: #454e5aff;  /* secondary — was #49525f */
  --color-grey-02: #4e5460ff;  /* tertiary — was #525865 */
  --color-grey-03: #8f8f8fff;  /* muted — was #979797 */
  --color-grey-04: #dedede;
  --color-grey-50: #f8fafc;
  --color-grey-100: #f1f5f9;
  --color-grey-700: #2e3846ff;   /* primary body/table — was #303b4a */
  
  /* Soft Colors */
  --color-soft-01: #edf2f6ff;
  --color-soft-02: #f2f6fcff;
  --color-soft-03: #e2e8f0ff;
  --color-bpi-softblue: #dff1ff; /* was #e3f2fdff */
  
  /* Accent Colors */
  --color-green: #32d16dff;
  --color-orange: #ff8723ff;
  --color-red: #f43d3dff;

  /* Trade group colour bands (Defect Summary / builders reports) */
  --fd-trade-group-1: #E65100;  /* Structure */
  --fd-trade-group-2: #4A6572;  /* Lock-Up */
  --fd-trade-group-3: #F9A825;  /* Rough-In */
  --fd-trade-group-4: #C89D7C;  /* Linings */
  --fd-trade-group-5: #00ACC1;  /* Finishes */
  --fd-trade-group-6: #7B1FA2;  /* Fitout */
  --fd-trade-group-7: #43A047;  /* External */
  --fd-trade-group-8: #00897B;  /* Cleaning */
  --fd-trade-group-9: #607D8B;  /* Admin */
  --fd-trade-group-10: #C62828; /* Incidents */
  --fd-trade-group-0: #9E9E9E;  /* Generic */
  
  /* ========================================
     GRADIENT TOKENS
     ======================================== */
  
  /* Accent Gradient */
  --gradient-accent: linear-gradient(133.21deg, #3fa9f5 0%, #3fa9f59e 100%);
  
  /* ========================================
     SHADOW TOKENS
     Flat trial (2026-07-28): resting elevation = none.
     Hover lift kept via --shadow-hover-*.
     Focus rings + stroke-inset (sidebar paint) unchanged.
     ======================================== */

  /* Preserved elevation recipes — hover / interaction only */
  --shadow-hover-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-hover-md: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-hover-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-hover-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-hover-card-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-hover-card-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* Resting elevation — flat */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Legacy aliases — prefer --shadow-sm / --shadow-md in new code */
  --shadow-01: none;
  --shadow-02: none;
  --shadow-03: none;

  /* Card shadows — flat at rest */
  --shadow-card: none;
  --shadow-card-md: none;
  --shadow-card-lg: none;

  /* Focus ring — solid light blue (Pulse: 0 0 0 3px var(--blue-100)) */
  --shadow-focus: 0 0 0 3px var(--color-blue-100);
  --shadow-focus-sm: 0 0 0 2px var(--color-blue-100);
  
  /* ========================================
     SEMANTIC COLOR MAPPINGS
     ======================================== */
  
  /* Background Colors — primary surfaces use 90% white over workspace blue */
  --bg-primary: var(--color-white-90);
  --bg-primary-hover: var(--color-white); /* solid 1.0 — card hover (no lift) */
  /* Same blue edge as Job Orders chrome search hover (primary @ 50% — focus stays full) */
  --bg-primary-hover-border: color-mix(in srgb, var(--interactive-primary) 50%, transparent);
  --bg-primary-hover-ring: inset 0 0 0 var(--stroke-hairline) var(--bg-primary-hover-border);
  --bg-secondary: var(--color-soft-02);
  --bg-tertiary: var(--color-soft-01);
  --bg-accent: var(--color-bpi-softblue);

  /* Table row surfaces — odd/even/hover (datatable parity) */
  --table-row-base: var(--color-white);
  --table-row-stripe: color-mix(in srgb, var(--color-white) 35%, var(--color-grey-50));
  --table-row-hover: var(--color-blue-100);
  
  /* Text Colors — primary = grey-700 (dimmer than color-dark; not as light as secondary) */
  --text-primary: var(--color-grey-700);
  --text-secondary: var(--color-grey-01);
  --text-tertiary: var(--color-grey-02);
  --text-muted: var(--color-grey-03);
  --text-inverse: var(--color-white);
  
  /* Border Colors — solid hex for Safari/Chrome parity (was rgb(0 0 0 / 0.08);
     Safari paints translucent black + subpixel hairlines heavier than Chrome) */
  --border-primary: #ebebeb;
  --border-grid: #efefef; /* calendar gridlines — 20% lighter than --border-primary (#ebebeb) */
  --border-secondary: var(--color-soft-01);
  --border-accent: var(--color-primary-0);

  /* Stroke — paint only, not spacing (2026-07-24/25).
     Hybrid policy (TYPE-SPACE §2.1):
     - Fluid cards / controls / dividers → border: var(--stroke-hairline) …
       (border-box keeps outer on grid; accept ~0.8px inner inset)
     - Dense grids (calendar) → border-width: var(--stroke-grid) (1px) + --border-grid
       so Safari does not round 0.8px up and look darker
     - Locked-width chrome (sidebar 256/84, equal-track panels that must keep
       inner on 4pt) → box-shadow: var(--stroke-inset…) — zero layout cost
     - Do NOT compensate hairlines with +3px gaps to “make 4px” */
  --stroke-hairline: 0.8px;
  --stroke-grid: 1px; /* browser-stable gridlines (calendar FC scrollgrid) */
  --stroke-inset: inset 0 0 0 var(--stroke-hairline) var(--border-primary);
  --stroke-inset-inline-end: inset calc(-1 * var(--stroke-hairline)) 0 0 0 var(--border-primary);

  /* Sidebar — rail uses inset paint so 256/84 inner stays on 4pt (no soft elevation). */
  --shadow-sidebar: var(--stroke-inset-inline-end);
  
  /* Interactive Colors */
  --interactive-primary: var(--color-primary-0);
  --interactive-primary-hover: var(--color-primary-2);
  --interactive-primary-active: var(--color-primary-1);
  
  /* Status Colors */
  --status-success: var(--color-green);
  --status-warning: var(--color-orange);
  --status-error: var(--color-red);
  /* Compatibility aliases — prefer core --text-* / --status-* in new code */
  --text-on-primary: var(--text-inverse);
  --text-success: var(--status-success);
  --interactive-success: var(--status-success); /* legacy alias */
  --status-warning-text: var(--status-warning);
  --status-success-text: var(--status-success);
  --status-danger-text: var(--status-error);
  --status-error-text: var(--status-error);

  /* Status background tints (Pulse parity — job cards, badges) */
  --color-success-bg: #ecfdf5;
  --color-warning-bg: #fff8e1;
  --color-error-bg: #fef2f2;
  --status-success-bg: var(--color-success-bg);
  --status-warning-bg: var(--color-warning-bg);
  --status-error-bg: var(--color-error-bg);
  --status-primary-bg: var(--bg-accent);
  --fd-pill-bg-alpha: 0.10;
  --fd-pill-bg-mix: 10%; /* color-mix % — mirrors --fd-pill-bg-alpha for status/chip pills */
  
  /* ========================================
     SPACING TOKENS
     ========================================

     Rhythm (2026-07-24): **4pt system overall**; **2px micro** only when needed.

     - Base step = 4px (`--inset-xs` and up: 4 · 8 · 12 · 16 · 20 · 24)
     - Layout gaps stay on 8pt multiples of that (`--layout-gap-*`: 8 · 16 · 24 · 32 · 40 · 48 · 64)
     - Micro = `--inset-2xs` (2px) — icon clusters, track hairline insets, optical tighten
     - Do NOT invent 3 / 5 / 6 / 7 / 9 / 10px or odd rem (0.35rem, 0.375rem, …)
     - Hairline borders / dividers → `var(--stroke-hairline)` (**0.8px**) — not a spacing step
     - Locked-width edge paint → `var(--stroke-inset)` / `--stroke-inset-inline-end` (not +3px gap hacks)

     Families:
     - --layout-gap-*  Page/section/grid gaps — 8pt multiples
     - --inset-*       Component internals — 4pt (+ optional 2px micro)
     - --space-*       Legacy — do not use in new code

     Usage:
     - Between sections, page padding, card stacks → var(--layout-gap-*)
     - Button padding, icon gaps, field insets   → var(--inset-*)
     - Tight optical gaps only                   → var(--inset-2xs)

     Spec: docs/fd-type-space/TYPE-SPACE-POLICY.md §2
     ======================================== */

  /* Legacy scale — true px @ 12px root via calc(N/12*1rem); do not use in new code */
  --space-xs: calc(4 / 13 * 1rem);     /* 4px */
  --space-sm: calc(8 / 13 * 1rem);     /* 8px */
  --space-md: calc(16 / 13 * 1rem);    /* 16px */
  --space-lg: calc(24 / 13 * 1rem);    /* 24px */
  --space-xl: calc(32 / 13 * 1rem);    /* 32px */
  --space-2xl: calc(48 / 13 * 1rem);   /* 48px */
  --space-3xl: calc(64 / 13 * 1rem);   /* 64px */

  /* Layout gaps — 8pt multiples; true px @ 12px root */
  --layout-gap-xs: var(--space-sm);     /* 8px */
  --layout-gap-sm: var(--space-md);     /* 16px */
  --layout-gap-md: var(--space-lg);     /* 24px */
  --layout-gap-lg: var(--space-xl);     /* 32px */
  --layout-gap-xl: calc(40 / 13 * 1rem); /* 40px */
  --layout-gap-2xl: var(--space-2xl);   /* 48px */
  --layout-gap-3xl: var(--space-3xl);   /* 64px */

  /* Component insets — 4pt + optional 2px micro; true px @ 12px root */
  --inset-2xs: calc(2 / 13 * 1rem);     /* 2px — micro only */
  --inset-xs: var(--space-xs);          /* 4px */
  --inset-sm: var(--space-sm);          /* 8px */
  --inset-md: calc(12 / 13 * 1rem);     /* 12px */
  --inset-lg: var(--space-md);          /* 16px */
  --inset-xl: calc(20 / 13 * 1rem);     /* 20px */
  --inset-2xl: var(--space-lg);         /* 24px */
  
  /* ========================================
     NAVIGATION TOKENS (sidebar)
     ========================================
     Outer inset = shell gutter (L3); section gaps = content-group (L2).
     Widths 256/84 (DEC-PULSE-01 amended 2026-07-24 → 256px expanded).
     ======================================== */

  /* Navigation — shell-aligned outer; denser item stack inside */
  --nav-section-gap: var(--content-group-gap);             /* L2 — between nav groups */
  --nav-section-gap-collapsed: var(--inset-md);            /* 12px — collapsed icon rail */
  --nav-item-margin-bottom: var(--content-related-gap);    /* L1 — 8 — was 4; match in-card related */
  --nav-item-min-height: calc(36 / 13 * 1rem);             /* 36px — 9×4pt */
  --nav-icon-width: calc(20 / 13 * 1rem);                  /* 20px — 5×4pt */
  --nav-icon-size: var(--font-size-base);
  --nav-link-font-size: var(--font-size-body);              /* 13px — sidebar nav label text */
  /* Collapse choreography — retain icon Y when section labels animate away */
  --nav-section-header-expanded-height: calc(var(--inset-sm) * 2 + var(--inset-xs) + var(--line-height-meta)); /* pad + 11→16 band */
  /* 16px band — hairline is painted inside (not +1px) so collapse rhythm stays on 4pt */
  --nav-section-header-divider-height: var(--space-md);
  --nav-section-header-offset: calc(var(--nav-section-header-expanded-height) - var(--nav-section-header-divider-height));
  --nav-icon-size-collapsed: calc(20 / 13 * 1rem);         /* 20px */
  --nav-collapsed-pill-size: var(--nav-item-min-height);   /* 36px */
  --nav-link-margin-x-expanded: var(--shell-gutter);       /* edge → pill = shell gutter */
  --nav-link-pad-x-expanded: var(--inset-lg);              /* 16 — pill inner (control-like) */
  /* Nested submenu pill — parent margin + icon column + L1 gap */
  --nav-link-nested-margin-start: calc(
    var(--nav-link-margin-x-expanded) + var(--nav-icon-width) + var(--inset-sm)
  );
  --nav-link-margin-x-collapsed: calc((var(--sidebar-width-collapsed) - var(--nav-collapsed-pill-size)) / 2);
  --nav-link-pad-x-collapsed: 0;                           /* icon pill — no extra inline pad */
  --nav-icon-collapse-scale: 1.1;
  --nav-icon-proximity-focus-scale: 1.56;
  --nav-icon-proximity-near-scale: 1.12;
  --nav-icon-proximity-press-scale: 1.06;
  --nav-icon-settle-duration: 0.32s;
  /* Logo — 64px mark; X pad = shell gutter (aligns with nav); Y centers in header-height */
  --logo-mark-size: calc(64px * var(--fd-ui-scale, 1));
  --logo-header-pad-y-expanded: calc((var(--header-height) - var(--logo-mark-size)) / 2);
  --logo-header-pad-y-collapsed: var(--logo-header-pad-y-expanded);
  --logo-expanded-height: var(--logo-mark-size);
  --logo-expanded-width: calc(132 / 13 * 1rem);             /* 132px — 33×4pt */
  --logo-collapsed-size: var(--logo-mark-size);
  --logo-header-pad-x-expanded: var(--shell-gutter);       /* was 40 — now shell gutter */
  /* Collapsed mark is 64 in 84 rail — pad must be (rail − mark)/2, not pill margin (24) */
  --logo-header-pad-x-collapsed: calc(
    (var(--sidebar-width-collapsed) - var(--logo-collapsed-size)) / 2
  );
  --logo-fade-duration: 0.22s;
  --logo-fade-stagger: 0.06s;
  --transition-content-enter: 0.26s cubic-bezier(0.33, 1, 0.68, 1);
  --nav-arrow-size: var(--font-size-sm);

  /* Dropdown specific values */
  --dropdown-max-height: 360px;
  --dropdown-padding: var(--inset-xs);                     /* 4 — L0 open-menu Y */
  --dropdown-margin-left: 0;                               /* nested links own indent */

  /* Sidebar specific values */
  --sidebar-mobile-max-width: 280px;                       /* 70×4pt */
  --sidebar-mobile-z-index: var(--z-modal);
  
  /* ========================================
     TYPOGRAPHY TOKENS
     ======================================== */
  
  /* Font Families */
  --font-family-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', Arial, sans-serif;
  --font-family-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  
  /* Font sizes — 2pt ladder @ 13px root; rem tracks --fd-ui-scale
     Canonical absolute: 11 · 12 · 13 · 16 · 18 · 24 (+ optional larger display steps) */

  /* Semantic roles (prefer these in new work) */
  --font-size-meta: calc(11 / 13 * 1rem);       /* 11px — badges, chips, calendar meta */
  --font-size-secondary: calc(12 / 13 * 1rem);  /* 12px — labels, dense secondary, chrome controls */
  --font-size-body: 1rem;                       /* 13px — body copy, form values, primary table text */
  --font-size-title: calc(16 / 13 * 1rem);      /* 16px — page / topbar title */
  --font-size-section: calc(18 / 13 * 1rem);    /* 18px — section headings */
  --font-size-display: calc(24 / 13 * 1rem);    /* 24px — KPI / display */

  /* Ladder aliases — existing names map onto the 2pt system */
  --font-size-xs: var(--font-size-meta);
  --font-size-sm: var(--font-size-secondary);
  --font-size-base: var(--font-size-body);
  --font-size-compact: var(--font-size-body);   /* was 13px → 14 */
  --font-size-caption: var(--font-size-meta);
  --font-size-micro: var(--font-size-meta);
  --font-size-subtitle: var(--font-size-secondary);
  --font-size-heading: var(--font-size-section); /* was 17px → 18 */
  --font-size-kpi: var(--font-size-display);     /* was 26px → 24 */
  --font-size-card-title: var(--font-size-body);
  --font-size-page-title: var(--font-size-title);
  --font-size-page-subtitle: var(--font-size-secondary);
  --font-size-dashboard-title: var(--font-size-title);
  --font-size-body-text: 1em;

  /* Shared chrome type — buttons, tab strips, search, filter selects (12px secondary) */
  --fd-control-font-size: var(--font-size-secondary);

  /* Extended display steps (still rem-scaled; even px @ 13px root) */
  --font-size-lg: var(--font-size-section);     /* 18px */
  --font-size-xl: calc(20 / 13 * 1rem);          /* 20px optional */
  --font-size-2xl: var(--font-size-display);    /* 24px */
  --font-size-3xl: calc(30 / 13 * 1rem);         /* 30px empty states */
  --font-size-4xl: calc(36 / 13 * 1rem);         /* 36px */
  --font-size-5xl: calc(48 / 13 * 1rem);         /* 48px hero */
  --font-size-display-sm: calc(32 / 13 * 1rem);  /* 32px large icons */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Line heights — role-paired to 4pt boxes (scale with rem / --fd-ui-scale).
     Prefer --line-height-{meta|secondary|body|title|section|xl|display} with the
     matching --font-size-* role. Absolute calc keeps text boxes on the same grid
     as padding/gaps (unitless 1.25/1.5 often yielded 15/17.5/18/21/30).
     Pairs: 11→16 · 12→16 · 14→20 · 16→24 · 18→24 · 20→28 · 24→32 · 32→40 */
  --line-height-meta: calc(16 / 13 * 1rem);       /* with --font-size-meta (11) */
  --line-height-secondary: calc(16 / 13 * 1rem);  /* with --font-size-secondary (12) */
  --line-height-body: calc(20 / 13 * 1rem);       /* with --font-size-body (13) */
  --line-height-title: calc(24 / 13 * 1rem);      /* with --font-size-title (16) */
  --line-height-section: calc(24 / 13 * 1rem);    /* with --font-size-section (18) */
  --line-height-xl: calc(28 / 13 * 1rem);         /* with --font-size-xl (20) */
  --line-height-display: calc(32 / 13 * 1rem);    /* with --font-size-display (24) */
  --line-height-display-lg: calc(40 / 13 * 1rem); /* with --font-size-display-sm (32) */
  --line-height-prose: calc(28 / 13 * 1rem);      /* long body copy (12→28) */

  /* Legacy names → 4pt role defaults (new code: use role tokens above) */
  --line-height-none: 1;                                    /* icons / single-line chrome */
  --line-height-tight: var(--line-height-title);            /* was 1.25 — prefer role token when size ≠ 16 */
  --line-height-snug: var(--line-height-secondary);         /* was 1.35 */
  --line-height-normal: var(--line-height-body);            /* was 1.5 → 21px */
  --line-height-relaxed: var(--line-height-prose);          /* was 1.75 → 24.5px */
  
  /* ========================================
     BORDER RADIUS TOKENS
     True px @ 12px root via calc(N/12*1rem). Scale steps stay 4pt (2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40).
     Semantic stack (amended 2026-08-12): card 16 · panel/dropdown 16 · control 8 · track inner 8
     ======================================== */
  
  --radius-none: 0;
  --radius-xs: calc(2 / 13 * 1rem);   /* 2px — micro */
  --radius-sm: calc(4 / 13 * 1rem);   /* 4px */
  --radius-md: calc(8 / 13 * 1rem);   /* 8px — control / track inner */
  --radius-lg: calc(12 / 13 * 1rem);  /* 12px — scale step */
  --radius-xl: calc(16 / 13 * 1rem);  /* 16px — card + panel / dropdown */
  --radius-2xl: calc(20 / 13 * 1rem); /* 20px — scale step */
  --radius-3xl: calc(24 / 13 * 1rem); /* 24px — scale step (was card) */
  --radius-4xl: calc(32 / 13 * 1rem); /* 32px */
  --radius-5xl: calc(40 / 13 * 1rem); /* 40px */
  --radius-button: var(--radius-md);  /* 8px — control tier */
  --fd-btn-icon-round-size: calc(36 / 13 * 1rem); /* 36px — 9×4pt */
  --fd-toolbar-icon-size: calc(28 / 13 * 1rem);   /* 28px — 7×4pt (hit target, not radius) */
  --fd-user-avatar-size: calc(40 / 13 * 1rem);    /* 40px — 10×4pt */
  --radius-card: var(--radius-xl); /* 16px — card/stat surfaces (was 24) */
  --radius-full: 9999px;
  
  /* ========================================
     LAYOUT TOKENS
     ======================================== */
  
  /* Container Widths (tuned for 16:10 laptops) */
  --container-sm: 40rem;   /* 640px */
  --container-md: 48rem;   /* 768px */
  --container-lg: 64rem;   /* 1024px */
  --container-xl: 75rem;   /* 1200px */
  --container-2xl: 90rem;  /* 1440px */
  
  /* UI scale — default 1; fd-ui-scale.js overrides via hash or localStorage */
  --fd-ui-scale: 1;

  /* Sidebar — base px at 100% scale (DEC-PULSE-01 amended 2026-07-24: 256px) */
  --sidebar-width: calc(256px * var(--fd-ui-scale, 1));
  --sidebar-width-collapsed: calc(84px * var(--fd-ui-scale, 1));
  
  /* Content Body — base values for responsive shell gutter */
  --content-padding-horizontal: var(--layout-gap-md);              /* 24 — desktop shell gutter */
  --content-padding-horizontal-mobile: var(--layout-gap-sm);       /* 16 — mobile shell gutter */

  /* Shell + nested gap ladder (2026-07-25) — 3:2:1 @ desktop:
     L3 shell 24 · L2 content-group 16 · L1 related 8 · L0 control 4/2
     Outer shell pad stays X=Y; page stack steps down (not 1:1 with gutter).
     Topbar height = 2×gutter + control-track (64 @ 16 / 80 @ 24). */
  --shell-gutter: var(--content-padding-horizontal-mobile); /* 16 mobile-first; 24 ≥768 — L3 */
  --shell-gutter-x: var(--shell-gutter);
  --shell-gutter-y: var(--shell-gutter);
  --shell-gap: var(--shell-gutter);                           /* L3 — topbar zones, footer links */
  --content-group-gap: var(--layout-gap-sm);                  /* L2 — 16 — between major content blocks */
  --content-related-gap: var(--inset-sm);                     /* L1 — 8 — siblings inside a card/strip */
  --page-stack-gap: var(--content-group-gap);                 /* KPI → filters → table */
  --shell-body-gap: var(--content-group-gap);
  --shell-topbar-gap: var(--shell-gap);                       /* chrome stays L3 */
  --fd-page-grid-gap: var(--content-group-gap);               /* columns / in-row siblings */
  --shell-body-pad-y: var(--shell-gutter-y);                  /* alias — body uses gutter Y */
  --shell-page-pad-bottom: var(--shell-gutter-y);             /* floor = gutter (no extra stack) */
  --sidebar-inset-x: var(--shell-gutter);                     /* footer / rails — same as content gutter */
  --sidebar-content-pad-y: var(--shell-gutter);               /* nav scroll area vertical */

  /* Header / footer — same shell gutter on all sides; height fits gutter + control */
  --header-height: calc(var(--shell-gutter-y) * 2 + var(--control-track-height));
  --footer-height: auto; /* grows with shell-gutter pad; legacy token kept */
  --header-padding-vertical: var(--shell-gutter-y);
  --footer-padding-vertical: var(--shell-gutter-y);
  --header-padding-horizontal: var(--shell-gutter-x);
  --footer-padding-horizontal: var(--shell-gutter-x);

  /* Content Card Padding - asymmetric zones (PULSE-06); 4pt ladder values
     Shell card: header 24/16 + body (after divider top = 16) / sides 24 / bottom 24
     Nested panel / inset: --content-card-padding-sm (16) — Site/Notes/Contacts, checklists */
  --content-card-pad-x: var(--layout-gap-md);              /* 24px — horizontal inset all zones */
  --content-card-header-pad-top: var(--layout-gap-md);     /* 24px — outer top */
  --content-card-header-pad-bottom: var(--content-group-gap); /* L2 — 16 — header → body/table */
  --content-card-body-pad-y: var(--layout-gap-md);         /* 24px — body when no header / headerless */
  --content-card-body-pad-top-after-header: var(--content-card-header-pad-bottom); /* 16 — under divider */
  --content-card-padding: var(--content-card-body-pad-y); /* legacy alias — vertical body rhythm */
  --content-card-padding-sm: var(--inset-lg);   /* 16px — nested panels, in-card insets, compact empty */
  --content-card-padding-xs: var(--inset-sm);   /* 8px - tight toolbars */
  --content-card-toolbar-pad-top: var(--content-related-gap); /* L1 — divider → toolbar */
  --content-card-toolbar-gap: var(--content-related-gap);     /* L1 — 8 — toolbar → table / related in-card */
  --content-card-body-pad-bottom: var(--content-group-gap);   /* L2 — 16 — last row → footer border (NOT card floor) */
  --content-card-footer-pad-top: var(--content-group-gap);    /* L2 — 16 — table → footer (matches header bottom) */
  --content-card-footer-pad-bottom: var(--layout-gap-md);  /* 24px — outer card floor (matches header pad-top) */
  --content-card-footer-pad-y: var(--content-card-footer-pad-top); /* legacy alias — prefer top/bottom */

  /* In-card toolbar tracks — Pulse .tab-group / .icon-btn-cluster */
  --tab-track-fill: var(--bg-secondary);
  --tab-track-border: var(--border-primary);
  --tab-active-bg: var(--bg-primary);
  --tab-active-shadow: none;
  --toolbar-action-gap: var(--inset-xs);        /* 4px — was 6px off-grid */

  /* Concentric control tracks (tab groups, icon clusters, segmented controls) */
  --control-track-radius: var(--radius-button);   /* 8px — matches fields + primary buttons */
  --control-track-pad: var(--inset-2xs);          /* 2px inset — strip ↔ tab / icon */
  --control-track-inner-radius: var(--radius-md); /* 8px — same as control (no optical exception) */
  --control-track-gap: var(--inset-2xs);          /* 2px */
  --control-track-item-height: var(--fd-toolbar-icon-size); /* 28px — 7×4pt */
  --control-track-height: calc(var(--control-track-pad) * 2 + var(--control-track-item-height)); /* 32px — 8×4pt */
  /* Tab/segment pills: same 2px strip inset as icon clusters → pill = 28 */
  --control-track-tab-item-height: calc(var(--control-track-height) - var(--control-track-pad) * 2); /* 28px — 7×4pt */
  --control-track-btn-pad-x: var(--inset-lg);     /* 16px — 4×4pt */

  /* Legacy aliases — prefer --control-track-* */
  --toolbar-icon-cluster-pad: var(--control-track-pad);
  --toolbar-icon-cluster-gap: var(--control-track-gap);

  /* Stat / metric card — symmetric inset (Pulse .stat-card pattern; 1.5rem = 21px @ 12px root) */
  --metric-card-pad: var(--layout-gap-md);
  --stat-icon-radius: var(--radius-button);   /* 8px — control tier */

  /* Calendar grid — Pulse-aligned dimensions (no glass, structural only) */
  --cal-slot-height: calc(12 * var(--space-xs)); /* 48px — 4pt grid (12×4); 30-min row → 1h = 96px */
  --cal-now-indicator-color: var(--status-error); /* Red now-line (Pulse uses --danger) */
  --cal-event-border-radius: var(--radius-button); /* 8px — control tier */
  --cal-event-card-width: 98%; /* timegrid job card — inset from column edge */
  /* Event card left status accent — 0 = none, 1px–2px = thin, 3px = original */
  --cal-event-accent-width: 2px; /* left status bar */
  /* Event card text — ladder roles (builder/details = body, type = title) */
  --cal-event-title-weight: var(--font-weight-medium);  /* 500 — builder name */
  --cal-event-title-size: var(--font-size-secondary);   /* 12px — builder name */
  --cal-event-type-weight: var(--font-weight-normal);   /* 400 — inspection type */
  --cal-event-type-size: var(--font-size-secondary);    /* 12px — inspection type */
  --cal-event-detail-size: var(--font-size-secondary); /* 12px — time, address, meta */
  --cal-event-badge-weight: var(--font-weight-normal);
  --cal-event-value-line-height: var(--line-height-snug); /* primary detail values */
  --cal-event-detail-line-height: var(--line-height-snug); /* meta secondary lines */
  --cal-event-card-line-height: var(--line-height-snug);   /* job card text stack */
  --cal-cell-hover-bg: var(--bg-accent);          /* Grid cell hover tint */
  --cal-weekend-bg: #fbfbfb;                      /* Month view Sat/Sun cells only */
  --cal-today-col-bg: #f4f8ff;                    /* Week view today column only */
  --cal-toolbar-btn-height: var(--control-track-height); /* align with FD chrome control track */
  --cal-toolbar-date-label-width: 8.571rem;        /* 120px */

  /* Glass / frosted surface — Pulse Pro .glass-card */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-blur: 12px;
  --glass-border: var(--stroke-hairline) solid rgba(255, 255, 255, 0.25);

  /* Modal overlay — frosted glass backdrop */
  --glass-overlay-bg: rgba(0, 0, 0, 0.35);
  --glass-overlay-blur: 10px;
  --glass-overlay-saturate: 195%;
  /* Modal panel — Pulse Pro .panel frosted surface */
  --glass-panel-bg: rgba(255, 255, 255, 0.86);
  --glass-panel-border: rgba(255, 255, 255, 0.5);
  --glass-panel-shadow: 0 0 0 0 transparent; /* flat — no soft elevation; composers may still add inset */

  /* Form fields — Pulse Pro .form-input / .form-field-float parity */
  --form-field-radius: var(--radius-button);              /* 8px — not pill; matches control-track */
  /* Surface zones — card 16 · panel/dropdown 16 · control 8 */
  --form-group-panel-radius: var(--radius-xl);            /* 16px — .fd-form-group-panel / .fd-card-nested */
  /* Floating menus / pickers / filter lists — same panel tier as cards */
  --dropdown-panel-radius: var(--form-group-panel-radius); /* 16px — multiselect, filter select, Bootstrap menus, flatpickr */
  /* DataTable thead — control radius; weight normal (label hierarchy via meta/uppercase, not bold) */
  --table-header-radius: var(--radius-button); /* 8px */
  --table-header-weight: var(--font-weight-normal); /* 400 */
  --radius-card-inset-inner: var(--radius-button);      /* 8px — media/controls inside inset panels */
  --radius-control: var(--radius-button);               /* 8px — alias used by labs / reports */
  --radius-panel: var(--form-group-panel-radius);       /* 16px — alias used by labs */
  --fd-order-insp-date-width: 11.8rem;                    /* native date — +15% vs prior 10.25rem */
  --fd-order-insp-invoice-width: calc(16ch + 2 * var(--form-float-label-inset-x));
  --fd-order-insp-amount-width: calc(8ch + 2 * var(--space-sm));
  --fd-order-insp-gst-width: calc(8ch + 2 * var(--space-sm));
  --fd-order-insp-type-min-width: 10.5rem;                /* idle “Inspection Type” label */
  --fd-order-insp-type-max-width: 30rem;                  /* catalog longest (~45 chars) single line */
  --fd-order-insp-notes-min-width: 12rem;                 /* flex: wrap Notes when leftover < this */
  --fd-order-insp-type-field-height-2l: calc(
    var(--form-float-value-padding-top) +
    (var(--form-field-font-size) * 1.25 * 2) +
    var(--form-float-value-padding-bottom)
  );
  --form-field-font-size: var(--font-size-body);            /* 13px value text */
  --form-field-value-weight: var(--font-weight-normal);     /* 400 — same as body text */
  --form-label-idle-size: var(--font-size-body);            /* 13px inline label */
  --form-label-idle-weight: var(--font-weight-normal);      /* 400 — placeholder-like idle */
  --form-label-idle-color: var(--text-tertiary);            /* core ladder — resting float label */
  /* Typed value = one step darker than idle label (secondary); floated label stays muted */
  --form-field-value-color: var(--text-secondary);
  --form-label-floated-size: var(--font-size-secondary);    /* 12px floated label */
  --form-label-floated-weight: var(--font-weight-light);    /* 300 — recedes when value is present */
  --form-label-floated-color: var(--text-muted);            /* was raw grey-03 — same step */
  --form-field-stack-gap: var(--layout-gap-sm);             /* 16px — matches mb-2 field rhythm on add user/builder pages */
  --form-static-label-size: var(--font-size-secondary);     /* 12px .form-label above field */
  --form-static-label-weight: var(--font-weight-medium);
  --form-static-label-color: var(--text-secondary);         /* core ladder */
  --form-hint-size: var(--font-size-secondary);             /* 12px hints / inline errors */
  /* Disabled / waiting — between enabled --bg-primary and legacy --bg-secondary (visible but not heavy) */
  --form-field-disabled-bg: color-mix(in srgb, var(--bg-primary) 76%, var(--color-soft-01));
  --form-field-disabled-border: var(--border-secondary);
  --form-field-disabled-color: var(--text-tertiary);        /* core ladder — was grey-02 */
  --form-field-disabled-label-color: var(--text-tertiary);
  --form-action-disabled-bg: color-mix(in srgb, var(--interactive-primary) 38%, var(--bg-primary));
  --form-action-disabled-border: color-mix(in srgb, var(--interactive-primary) 28%, var(--border-secondary));
  --form-action-disabled-color: color-mix(in srgb, var(--interactive-primary) 55%, var(--text-tertiary));
  --form-preview-placeholder-color: var(--text-tertiary);

  /* Shared control text insets (2026-07-25) — chrome search, filter pills, form float.
     Left always --control-pad-x (12). Right: same when no icon; --control-pad-x-end-icon (32) with chevron. */
  --control-pad-x: var(--inset-md);                         /* 12px */
  --control-pad-x-end-icon: var(--layout-gap-lg);           /* 32px — trailing chevron/icon */

  /* Dropdown / submenu spacing recipe (LOCKED 2026-07-26; after control-pad so item-x resolves).
     One content column: panel pad → search border + option highlight share X;
     search text + option text both use --dropdown-item-pad-x (= control-pad-x). */
  --dropdown-panel-pad: var(--inset-md);                   /* 12 — outer chrome (was 8 — head looked flush) */
  --dropdown-section-gap: var(--inset-sm);                 /* 8 — head → search → list */
  --dropdown-item-pad-y: var(--inset-sm);                  /* 8 — option row Y */
  --dropdown-item-pad-x: var(--control-pad-x);             /* 12 — search text + option text */
  --dropdown-item-min-height: var(--control-track-height); /* 32 — chrome track */
  --dropdown-item-gap: var(--inset-2xs);                   /* 2 — between option rows */
  --dropdown-scrollbar-gutter: 8px;                        /* list-scroll stable gutter — search pad matches */
  /* Menu container chrome (2026-08-12) — recessed inset + hairline; shared by
     fd-select / fd-multiselect / Bootstrap dropdown / context menus / flatpickr. */
  --dropdown-menu-border: var(--stroke-hairline) solid var(--border-primary);
  --dropdown-menu-shadow: inset 2px 2px 8px -2px color-mix(in srgb, var(--color-grey-04) 19%, transparent);
  --dropdown-menu-blur: 4px; /* frost behind translucent control menus — not modal --glass-blur */
  /* Trailing caret — hint weight, not accent (select / multiselect / inspector) */
  --dropdown-chevron-size: 0.4rem;
  --dropdown-chevron-stroke: 1.5px;
  --dropdown-chevron-color: var(--text-muted);

  /* Inline page-chrome filter pills (Builder, Report Type, …) — width only; height = control-track.
     Base = 64+24+16+8+2 on ladder (114px tier); +2 L2 steps (--layout-gap-sm) for current width. */
  --filter-toolbar-select-width-base: calc(
    var(--layout-gap-3xl) + var(--layout-gap-md) + var(--layout-gap-sm) + var(--layout-gap-xs) + var(--inset-2xs)
  );
  --filter-toolbar-select-width: calc(
    var(--filter-toolbar-select-width-base) + (2 * var(--layout-gap-sm))
  );
  --filter-toolbar-select-min-width: calc(
    var(--filter-toolbar-select-width) - var(--layout-gap-md) - var(--layout-gap-xs) - var(--inset-xs)
  );
  --filter-toolbar-select-max-width: calc(
    var(--filter-toolbar-select-width) + var(--layout-gap-sm) + var(--inset-2xs)
  );
  /* Date pills — select width + one L2 step for From:/To: prefix */
  --filter-toolbar-date-width: calc(
    var(--filter-toolbar-select-width) + var(--layout-gap-md)
  );
  --filter-toolbar-date-min-width: calc(
    var(--filter-toolbar-select-min-width) + var(--layout-gap-sm)
  );
  --filter-toolbar-date-max-width: calc(
    var(--filter-toolbar-select-max-width) + var(--layout-gap-md)
  );

  /* Shell chrome controls on tinted page ground (--color-bpi-softblue).
     Shared by Job Orders search/filters + Calendar toolbar pills (LOCKED 2026-07-26). */
  --shell-control-bg: rgba(255, 255, 255, 0.4);            /* rest */
  --shell-control-bg-hover: rgba(255, 255, 255, 0.6);      /* hover */
  --shell-control-bg-active: rgba(255, 255, 255, 0.8);     /* focus / open / has-value */

  /* Control heights — two tiers (do not collapse):
     Chrome (search, filter pills, labeled buttons, tabs) → --control-track-height (32)
     Form float (label + value stack) → --form-float-field-height (52 = 24+20+8 on 4pt) */

  /* Pulse .form-field-float geometry (filter card + inline-label forms) */
  --form-float-label-top: var(--inset-sm);                  /* 8px — 4pt ladder */
  --form-float-label-gap: var(--inset-xs);                  /* 4px — was 6px off-grid */
  --form-float-label-inset-x: var(--control-pad-x);         /* 12 — alias shared control pad */
  --form-float-value-padding-top: calc(var(--form-float-label-top) + var(--form-label-floated-size) + var(--form-float-label-gap));
  --form-float-value-padding-bottom: var(--inset-sm);       /* 8px */
  /* Body LH 20 — was font*1.5 (21) which made field height 53 off-grid */
  --form-float-value-row-height: var(--line-height-body);   /* 20px */
  --form-float-field-height: calc(
    var(--form-float-value-padding-top) +
    var(--form-float-value-row-height) +
    var(--form-float-value-padding-bottom)
  ); /* 52px — 13×4pt */
  /* Alias of content-first height — was Pulse 2.75rem @ 16px root (unused) */
  --form-float-field-min-height: var(--form-float-field-height);
  --form-float-textarea-3l-height: calc(
    var(--form-float-value-padding-top) +
    var(--form-float-value-padding-bottom) +
    (var(--form-float-value-row-height) * 3)
  );
  /* Shared fixed height — inputs and selects must match or native select text looks high */
  --form-float-select-padding-top: var(--form-float-value-padding-top);
  --form-float-select-padding-bottom: var(--form-float-value-padding-bottom);
  --form-float-select-line-height: var(--form-float-value-row-height);
  --form-float-select-chevron-inset: var(--control-pad-x-end-icon); /* 32 — alias shared end-icon pad */
  --form-checkbox-size: var(--inset-xl);                    /* 20px — was 21px off-ladder */
  --form-float-icon-color: var(--text-tertiary);             /* idle calendar icon */
  --form-float-icon-color-active: var(--text-secondary);      /* filled / focused icon */
  
  /* ========================================
     Z-INDEX TOKENS
     ======================================== */
  
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ========================================
     TRANSITION TOKENS
     ======================================== */
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-sidebar: 0.42s cubic-bezier(0.33, 1, 0.68, 1);
  --transition-slow: 0.5s ease;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-control: 0.22s var(--transition-ease);
  --transition-control-fast: 0.18s var(--transition-ease);
  --transition-fade: 0.32s ease-out;
  /* Pulse-aligned hover motion — explicit properties only (never transition: all) */
  --hover-transition: background-color 0.2s var(--transition-ease), color 0.2s var(--transition-ease), border-color 0.2s var(--transition-ease), box-shadow 0.22s var(--transition-ease), transform 0.22s var(--transition-ease);
  --transition-surface: transform 0.22s var(--transition-ease), box-shadow 0.24s var(--transition-ease);
  
  /* ========================================
     BREAKPOINT TOKENS (for reference)
     ======================================== */
  
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* ========================================
     ICON TOKENS
     ======================================== */
  
  /* Icon Sizes - Using em for better scaling */
  --icon-size-xs: 0.75em;     /* Scales with parent font size */
  --icon-size-sm: 1em;        /* 1em = same as parent font size */
  --icon-size-md: 1.25em;     /* 1.25x parent font size */
  --icon-size-lg: 1.5em;      /* 1.5x parent font size */
  --icon-size-xl: 2em;        /* 2x parent font size */
  --icon-size-2xl: 3em;       /* 3x parent font size */
  --icon-size-3xl: 4em;       /* 4x parent font size */
  
  /* Icon Colors */
  --icon-color-primary: var(--interactive-primary);
  --icon-color-secondary: var(--text-secondary);
  --icon-color-success: var(--status-success);
  --icon-color-warning: var(--status-warning);
  --icon-color-error: var(--status-error);
  --icon-color-muted: var(--text-muted);
  --icon-color-inverse: var(--text-inverse);

  /* Phosphor duotone semantics — fg = detail layer (:after), bg = fill layer (:before) */
  --duotone-fg-primary: var(--interactive-primary);
  --duotone-bg-primary: var(--color-blue-100);
  --duotone-fg-calendar: #5b7cfa;
  --duotone-bg-calendar: #e8eeff;
  --duotone-fg-inspection: #0d9ecf;
  --duotone-bg-inspection: #d5f0fc;
  --duotone-fg-people: #7c5cbf;
  --duotone-bg-people: #ede8f7;
  --duotone-fg-warning: var(--status-warning);
  --duotone-bg-warning: rgba(255, 135, 35, 0.28);
  --duotone-fg-success: var(--status-success);
  --duotone-bg-success: rgba(50, 209, 109, 0.22);
  --duotone-fg-notify: #e67e22;
  --duotone-bg-notify: rgba(255, 135, 35, 0.22);
  --duotone-fg-error: var(--status-error);
  --duotone-bg-error: rgba(239, 68, 68, 0.22);
  --duotone-fg-muted: var(--text-secondary);
  --duotone-bg-muted: var(--color-soft-01);
  /* Sidebar idle nav — stronger duotone on --bg-secondary pills */
  --nav-idle-duotone-fg-primary: color-mix(in srgb, var(--duotone-fg-primary) 85%, var(--text-primary));
  --nav-idle-duotone-bg-primary: color-mix(in srgb, var(--duotone-fg-primary) 32%, var(--bg-secondary));
  --nav-idle-duotone-fg-calendar: color-mix(in srgb, var(--duotone-fg-calendar) 85%, var(--text-primary));
  --nav-idle-duotone-bg-calendar: color-mix(in srgb, var(--duotone-fg-calendar) 32%, var(--bg-secondary));
  --nav-idle-duotone-fg-inspection: color-mix(in srgb, var(--duotone-fg-inspection) 85%, var(--text-primary));
  --nav-idle-duotone-bg-inspection: color-mix(in srgb, var(--duotone-fg-inspection) 32%, var(--bg-secondary));
  --nav-idle-duotone-fg-people: color-mix(in srgb, var(--duotone-fg-people) 85%, var(--text-primary));
  --nav-idle-duotone-bg-people: color-mix(in srgb, var(--duotone-fg-people) 32%, var(--bg-secondary));
  --nav-idle-duotone-fg-warning: color-mix(in srgb, var(--duotone-fg-warning) 88%, var(--text-primary));
  --nav-idle-duotone-bg-warning: color-mix(in srgb, var(--duotone-fg-warning) 34%, var(--bg-secondary));
  --nav-idle-duotone-fg-notify: color-mix(in srgb, var(--duotone-fg-notify) 88%, var(--text-primary));
  --nav-idle-duotone-bg-notify: color-mix(in srgb, var(--duotone-fg-notify) 34%, var(--bg-secondary));
  --nav-idle-duotone-fg-muted: color-mix(in srgb, var(--duotone-fg-muted) 78%, var(--text-primary));
  --nav-idle-duotone-bg-muted: color-mix(in srgb, var(--text-secondary) 24%, var(--bg-secondary));
  --nav-idle-duotone-fg-reports: color-mix(in srgb, var(--duotone-fg-success) 85%, var(--text-primary));
  --nav-idle-duotone-bg-reports: color-mix(in srgb, var(--duotone-fg-success) 32%, var(--bg-secondary));
  /* Order document category — legacy hues; stronger tint slot + white glyph for contrast */
  --doc-type-hue-purchase-order: #479BE6;
  --doc-type-hue-working-drawings: #26D06D;
  --doc-type-hue-engineering: #E6B800;
  --doc-type-hue-additional-info: #F65F54;
  --doc-type-hue-pci: #EB5B9D;
  --doc-type-hue-photos: #7E58C2;
  --doc-type-hue-std-incl: #3EC9D6;
  --doc-type-hue-other: #E67E22;
  --doc-type-hue-default: #94a3b8;
  --doc-type-icon-on-slot: #ffffff;
  --doc-type-icon-secondary-on-slot: rgba(255, 255, 255, 0.4);
  /* Saturated slot wash — readable category colour, still slightly softened vs flat hex */
  --doc-type-slot-purchase-order: color-mix(in srgb, var(--doc-type-hue-purchase-order) 88%, var(--bg-secondary));
  --doc-type-slot-working-drawings: color-mix(in srgb, var(--doc-type-hue-working-drawings) 88%, var(--bg-secondary));
  --doc-type-slot-engineering: color-mix(in srgb, var(--doc-type-hue-engineering) 88%, var(--bg-secondary));
  --doc-type-slot-additional-info: color-mix(in srgb, var(--doc-type-hue-additional-info) 88%, var(--bg-secondary));
  --doc-type-slot-pci: color-mix(in srgb, var(--doc-type-hue-pci) 88%, var(--bg-secondary));
  --doc-type-slot-photos: color-mix(in srgb, var(--doc-type-hue-photos) 88%, var(--bg-secondary));
  --doc-type-slot-std-incl: color-mix(in srgb, var(--doc-type-hue-std-incl) 88%, var(--bg-secondary));
  --doc-type-slot-other: color-mix(in srgb, var(--doc-type-hue-other) 88%, var(--bg-secondary));
  --doc-type-slot-default: color-mix(in srgb, var(--doc-type-hue-default) 82%, var(--bg-secondary));
  /* White duotone glyph on coloured slot */
  --duotone-fg-doc-purchase-order: var(--doc-type-icon-on-slot);
  --duotone-bg-doc-purchase-order: var(--doc-type-icon-secondary-on-slot);
  --duotone-fg-doc-working-drawings: var(--doc-type-icon-on-slot);
  --duotone-bg-doc-working-drawings: var(--doc-type-icon-secondary-on-slot);
  --duotone-fg-doc-engineering: var(--doc-type-icon-on-slot);
  --duotone-bg-doc-engineering: var(--doc-type-icon-secondary-on-slot);
  --duotone-fg-doc-additional-info: var(--doc-type-icon-on-slot);
  --duotone-bg-doc-additional-info: var(--doc-type-icon-secondary-on-slot);
  --duotone-fg-doc-pci: var(--doc-type-icon-on-slot);
  --duotone-bg-doc-pci: var(--doc-type-icon-secondary-on-slot);
  --duotone-fg-doc-photos: var(--doc-type-icon-on-slot);
  --duotone-bg-doc-photos: var(--doc-type-icon-secondary-on-slot);
  --duotone-fg-doc-std-incl: var(--doc-type-icon-on-slot);
  --duotone-bg-doc-std-incl: var(--doc-type-icon-secondary-on-slot);
  --duotone-fg-doc-other: var(--doc-type-icon-on-slot);
  --duotone-bg-doc-other: var(--doc-type-icon-secondary-on-slot);
  --duotone-fg-doc-default: var(--doc-type-icon-on-slot);
  --duotone-bg-doc-default: var(--doc-type-icon-secondary-on-slot);
  --duotone-fg-active: var(--text-inverse);
  --duotone-bg-active: var(--text-inverse);
  --duotone-bg-active-opacity: 0.35;
  
  /* Icon Spacing */
  --icon-spacing-xs: var(--space-xs);
  --icon-spacing-sm: var(--space-sm);
  --icon-spacing-md: var(--space-md);
  --icon-spacing-lg: var(--space-lg);
  
  /* Icon Background Sizes - Using em for better scaling */
  --icon-bg-size-xs: 1.5em;    /* Scales with parent font size */
  --icon-bg-size-sm: 2em;      /* 2x parent font size */
  --icon-bg-size-md: 2.5em;    /* 2.5x parent font size */
  --icon-bg-size-lg: 3em;      /* 3x parent font size */
  --icon-bg-size-xl: 4em;      /* 4x parent font size */
}

/* Shell gutter — 16px mobile, 24px from tablet up (X=Y; topbar height follows) */
@media (min-width: 768px) {
  :root {
    --shell-gutter: var(--content-padding-horizontal);
  }
}

/* ========================================
   DARK MODE TOKENS (Future Enhancement)
   ======================================== */

/* Dark mode support - uncomment and customize as needed
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: var(--color-dark);
    --text-primary: var(--color-white);
  }
}
*/

/* ========================================
   UTILITY CLASSES FOR TOKENS
   ======================================== */

/* Background Colors */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }
.bg-accent { background-color: var(--bg-accent); }

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }

/* Border Colors */
.border-primary { border-color: var(--border-primary); }
.border-secondary { border-color: var(--border-secondary); }
.border-accent { border-color: var(--border-accent); }

/* Interactive States */
.interactive-primary {
  color: var(--interactive-primary);
  transition: color var(--transition-fast);
}

.interactive-primary:hover {
  color: var(--interactive-primary-hover);
}

.interactive-primary:active {
  color: var(--interactive-primary-active);
}

/* Status Colors */
.status-success { color: var(--status-success); }
.status-warning { color: var(--status-warning); }
.status-error { color: var(--status-error); }

/* Shadows */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-01 { box-shadow: var(--shadow-01); }
.shadow-02 { box-shadow: var(--shadow-02); }
.shadow-sidebar { box-shadow: var(--shadow-sidebar); }
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-card-md { box-shadow: var(--shadow-card-md); }
.shadow-card-lg { box-shadow: var(--shadow-card-lg); }
.shadow-focus { box-shadow: var(--shadow-focus); }
.shadow-focus-sm { box-shadow: var(--shadow-focus-sm); }

/* Font Families */
.font-primary { font-family: var(--font-family-primary); }
.font-secondary { font-family: var(--font-family-secondary); }
.font-mono { font-family: var(--font-family-mono); }

/* Font Weights */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

/* ========================================
   TYPOGRAPHY SIZE UTILITY CLASSES
   ======================================== */

.fd-text-xs { font-size: var(--font-size-xs); }
.fd-text-sm { font-size: var(--font-size-sm); }
.fd-text-base { font-size: var(--font-size-base); }
.fd-text-lg { font-size: var(--font-size-lg); }
.fd-text-xl { font-size: var(--font-size-xl); }
.fd-text-2xl { font-size: var(--font-size-2xl); }
.fd-text-3xl { font-size: var(--font-size-3xl); }
.fd-text-4xl { font-size: var(--font-size-4xl); }

/* ========================================
   SPACING UTILITY CLASSES
   Canonical home per TYPE-SPACE-POLICY §3–4.
   Scale: *-1 inset-xs (4px) … *-5 layout-gap-2xl (48px)
   ======================================== */

.fd-mb-0 { margin-bottom: 0; }
.fd-mb-1 { margin-bottom: var(--inset-xs); }
.fd-mb-2 { margin-bottom: var(--inset-sm); }
.fd-mb-3 { margin-bottom: var(--layout-gap-sm); }
.fd-mb-4 { margin-bottom: var(--layout-gap-md); }
.fd-mb-5 { margin-bottom: var(--layout-gap-2xl); }

.fd-mt-0 { margin-top: 0; }
.fd-mt-1 { margin-top: var(--inset-xs); }
.fd-mt-2 { margin-top: var(--inset-sm); }
.fd-mt-3 { margin-top: var(--layout-gap-sm); }
.fd-mt-4 { margin-top: var(--layout-gap-md); }
.fd-mt-5 { margin-top: var(--layout-gap-2xl); }

.fd-p-0 { padding: 0; }
.fd-p-1 { padding: var(--inset-xs); }
.fd-p-2 { padding: var(--inset-sm); }
.fd-p-3 { padding: var(--layout-gap-sm); }
.fd-p-4 { padding: var(--layout-gap-md); }
.fd-p-5 { padding: var(--layout-gap-2xl); }

/* ========================================
   SEMANTIC TYPOGRAPHY CLASSES
   ======================================== */

.fd-heading-display {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-display-lg); /* 36→ prefer next 4pt band; 40 ok for display */
  color: var(--text-primary);
}

.fd-heading-page {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-title); /* 16→24 */
  color: var(--text-primary);
}

.fd-heading-section {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-section); /* 18→24 */
  color: var(--text-primary);
}

.fd-heading-subsection {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xl); /* 20→28 */
  color: var(--text-primary);
}

.fd-body-large {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-section); /* 18→24 */
  color: var(--text-primary);
}

.fd-body-base {
  font-size: var(--font-size-base);
  line-height: var(--line-height-body); /* 14→20 */
  color: var(--text-primary);
}

.fd-body-small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-secondary); /* 12→16 */
  color: var(--text-primary);
}

.fd-caption {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-meta); /* 11→16 */
  color: var(--text-secondary);
}

/* Border Radius */
.radius-none { border-radius: var(--radius-none); }
.radius-xs { border-radius: var(--radius-xs); }
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }
.radius-2xl { border-radius: var(--radius-2xl); }
.radius-3xl { border-radius: var(--radius-3xl); }
.radius-4xl { border-radius: var(--radius-4xl); }
.radius-5xl { border-radius: var(--radius-5xl); }
.radius-full { border-radius: var(--radius-full); }

/* ========================================
   ICON UTILITY CLASSES
   ======================================== */

/* Icon Size Classes */
.icon-xs { 
  font-size: var(--icon-size-xs); 
  line-height: var(--line-height-none);
  vertical-align: middle;
}
.icon-sm { 
  font-size: var(--icon-size-sm); 
  line-height: var(--line-height-none);
  vertical-align: middle;
}
.icon-md { 
  font-size: var(--icon-size-md); 
  line-height: var(--line-height-none);
  vertical-align: middle;
}
.icon-lg { 
  font-size: var(--icon-size-lg); 
  line-height: var(--line-height-none);
  vertical-align: middle;
}
.icon-xl { 
  font-size: var(--icon-size-xl); 
  line-height: var(--line-height-none);
  vertical-align: middle;
}
.icon-2xl { 
  font-size: var(--icon-size-2xl); 
  line-height: var(--line-height-none);
  vertical-align: middle;
}
.icon-3xl { 
  font-size: var(--icon-size-3xl); 
  line-height: var(--line-height-none);
  vertical-align: middle;
}

/* Tabler Icons Base Styling */
.ti {
  line-height: var(--line-height-none);
  vertical-align: middle;
  display: inline-block;
}

/* Icon Color Classes */
.icon-primary { color: var(--icon-color-primary); }
.icon-secondary { color: var(--icon-color-secondary); }
.icon-success { color: var(--icon-color-success); }
.icon-warning { color: var(--icon-color-warning); }
.icon-error { color: var(--icon-color-error); }
.icon-muted { color: var(--icon-color-muted); }
.icon-inverse { color: var(--icon-color-inverse); }

/* Icon Spacing Classes */
.icon-spacing-xs { margin-right: var(--icon-spacing-xs); }
.icon-spacing-sm { margin-right: var(--icon-spacing-sm); }
.icon-spacing-md { margin-right: var(--icon-spacing-md); }
.icon-spacing-lg { margin-right: var(--icon-spacing-lg); }

/* Icon Background Classes */
.icon-bg-xs { 
  width: var(--icon-bg-size-xs); 
  height: var(--icon-bg-size-xs); 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: var(--radius-full); 
}
.icon-bg-sm { 
  width: var(--icon-bg-size-sm); 
  height: var(--icon-bg-size-sm); 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: var(--radius-full); 
}
.icon-bg-md { 
  width: var(--icon-bg-size-md); 
  height: var(--icon-bg-size-md); 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: var(--radius-full); 
}
.icon-bg-lg { 
  width: var(--icon-bg-size-lg); 
  height: var(--icon-bg-size-lg); 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: var(--radius-full); 
}
.icon-bg-xl { 
  width: var(--icon-bg-size-xl); 
  height: var(--icon-bg-size-xl); 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: var(--radius-full); 
}

/* Icon Background Color Classes */
.icon-bg-primary { background-color: var(--bg-accent); }
.icon-bg-secondary { background-color: var(--bg-secondary); }
.icon-bg-success { background-color: rgba(50, 209, 109, 0.1); }
.icon-bg-warning { background-color: rgba(255, 135, 35, 0.1); }
.icon-bg-error { background-color: rgba(244, 61, 61, 0.1); }
.icon-bg-muted { background-color: var(--bg-tertiary); }

/* Icon Hover Effects */
.icon-hover-primary:hover { color: var(--interactive-primary-hover); }
.icon-hover-secondary:hover { color: var(--text-primary); }
.icon-hover-scale:hover { transform: scale(1.1); transition: transform var(--transition-fast); }
.icon-hover-rotate:hover { transform: rotate(90deg); transition: transform var(--transition-normal); }

/* Icon Button Base */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.icon-button:hover {
  background-color: var(--bg-secondary);
}

.icon-button:focus {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
}

.icon-button:active {
  transform: scale(0.95);
}

/* ========================================
   SEMANTIC ICON CLASSES
   ======================================== */

/* Navigation Icons */
.icon-nav {
  color: var(--icon-color-secondary);
  font-size: var(--icon-size-md);
  transition: color var(--transition-fast);
}

.icon-nav:hover {
  color: var(--icon-color-primary);
}

.icon-nav-active {
  color: var(--icon-color-primary);
  font-weight: var(--font-weight-medium);
}

/* Action Icons */
.icon-action {
  color: var(--icon-color-primary);
  font-size: var(--icon-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.icon-action:hover {
  color: var(--interactive-primary-hover);
  transform: scale(1.05);
}

.icon-action:active {
  transform: scale(0.95);
}

/* Status Icons */
.icon-status-success {
  color: var(--icon-color-success);
  font-size: var(--icon-size-sm);
}

.icon-status-warning {
  color: var(--icon-color-warning);
  font-size: var(--icon-size-sm);
}

.icon-status-error {
  color: var(--icon-color-error);
  font-size: var(--icon-size-sm);
}

.icon-status-info {
  color: var(--icon-color-primary);
  font-size: var(--icon-size-sm);
}

/* Decorative Icons */
.icon-decorative {
  color: var(--icon-color-muted);
  opacity: 0.6;
  font-size: var(--icon-size-3xl);
  pointer-events: none;
}

.icon-decorative-large {
  color: var(--icon-color-muted);
  opacity: 0.3;
  font-size: var(--icon-size-3xl);
  pointer-events: none;
}

/* Metric/Stat Icons */
.icon-metric {
  color: var(--icon-color-primary);
  font-size: var(--icon-size-sm);
  margin-right: var(--icon-spacing-sm);
}

.icon-metric-large {
  color: var(--icon-color-primary);
  font-size: var(--icon-size-lg);
  margin-right: var(--icon-spacing-md);
}

/* Form Icons */
.icon-form {
  color: var(--icon-color-secondary);
  font-size: var(--icon-size-sm);
  margin-right: var(--icon-spacing-sm);
}

.icon-form-error {
  color: var(--icon-color-error);
  font-size: var(--icon-size-sm);
  margin-right: var(--icon-spacing-sm);
}

.icon-form-success {
  color: var(--icon-color-success);
  font-size: var(--icon-size-sm);
  margin-right: var(--icon-spacing-sm);
}

/* Button Icons */
.icon-btn {
  font-size: var(--icon-size-sm);
  margin-right: var(--icon-spacing-xs);
  vertical-align: middle;
}

.icon-btn-only {
  font-size: var(--icon-size-md);
  margin: 0;
}

/* Header Icons */
.icon-header {
  color: var(--icon-color-secondary);
  font-size: var(--icon-size-lg);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.icon-header:hover {
  color: var(--icon-color-primary);
}

/* Sidebar Icons */
.icon-sidebar {
  color: var(--icon-color-secondary);
  font-size: var(--icon-size-md);
  margin-right: var(--icon-spacing-sm);
  transition: color var(--transition-fast);
}

.icon-sidebar:hover {
  color: var(--icon-color-primary);
}

.icon-sidebar-active {
  color: var(--icon-color-primary);
  font-weight: var(--font-weight-medium);
}

/* Search Icons */
.icon-search {
  color: var(--icon-color-secondary);
  font-size: var(--icon-size-sm);
  pointer-events: none;
}

/* Notification Icons */
.icon-notification {
  color: var(--icon-color-secondary);
  font-size: var(--icon-size-md);
  position: relative;
}

.icon-notification::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background-color: var(--icon-color-error);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-primary);
}

/* Loading Icons — canonical spin keyframe: fd-spin (DRY-05) */
.icon-loading {
  animation: fd-spin 1s linear infinite;
  color: var(--icon-color-primary);
}

/* Toggle Icons */
.icon-toggle {
  transition: transform var(--transition-normal);
  cursor: pointer;
}

.icon-toggle-rotated {
  transform: rotate(180deg);
}

/* Breadcrumb Icons */
.icon-breadcrumb {
  color: var(--icon-color-muted);
  font-size: var(--icon-size-xs);
  margin: 0 var(--icon-spacing-xs);
}

/* Card Icons */
.icon-card {
  color: var(--icon-color-primary);
  font-size: var(--icon-size-lg);
  margin-bottom: var(--icon-spacing-sm);
}

/* List Icons */
.icon-list {
  color: var(--icon-color-secondary);
  font-size: var(--icon-size-sm);
  margin-right: var(--icon-spacing-sm);
  flex-shrink: 0;
}

/* Dropdown Icons */
.icon-dropdown {
  color: var(--icon-color-secondary);
  font-size: var(--icon-size-xs);
  transition: transform var(--transition-fast);
}

.icon-dropdown-open {
  transform: rotate(180deg);
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Screen Reader Only Text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus Management for Icon Buttons */
.icon-button:focus-visible {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
  background-color: var(--bg-secondary);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .icon-primary { color: #0000ff; }
  .icon-secondary { color: #000000; }
  .icon-success { color: #008000; }
  .icon-warning { color: #ff8c00; }
  .icon-error { color: #ff0000; }
  .icon-muted { color: #666666; }
}

/* Focus Indicators for Interactive Icons */
.icon-action:focus-visible,
.icon-nav:focus-visible,
.icon-header:focus-visible,
.icon-sidebar:focus-visible {
  outline: 2px solid var(--interactive-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Icon with Text Combinations */
.icon-with-text {
  display: inline-flex;
  align-items: center;
  gap: var(--icon-spacing-sm);
}

.icon-with-text .sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Decorative Icon Hiding */
.icon-decorative,
.icon-decorative-large {
  position: relative;
}

.icon-decorative::before,
.icon-decorative-large::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Status Icon Accessibility */
.icon-status-success::before {
  content: 'Success: ';
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon-status-warning::before {
  content: 'Warning: ';
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon-status-error::before {
  content: 'Error: ';
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Loading State Accessibility */
.icon-loading[aria-label]::after {
  content: attr(aria-label);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Notification Badge Accessibility */
.icon-notification[aria-label]::before {
  content: attr(aria-label);
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

  /* Icon Size Accessibility - Ensure minimum touch target */
  .ti-dashboard {
    font-size: 1.25em; /* Example: 25% larger than parent */
  }
  /* Tabler nav icons only — Phosphor duotone layers must stay same font-size */
  .fd-nav-link > i.ti:before,
  .fd-nav-dropdown-trigger > i.ti:before {
   font-size:1.5em;
  }
/* Touch target for standalone icon buttons only - nav/header/sidebar icons are inside parent links */
.icon-button,
.icon-action {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Skip Link for Icon Navigation */
.icon-skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--interactive-primary);
  color: var(--text-inverse);
  padding: var(--inset-sm);
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: 1000;
}

.icon-skip-link:focus {
  top: 6px;
}

/* Icon Group Accessibility */
.icon-group {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.icon-group[role="group"] {
  border: var(--stroke-hairline) solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-xs);
}

.icon-group[role="group"]:focus-within {
  border-color: var(--interactive-primary);
  background-color: var(--bg-secondary);
}

/* Icon Tooltip Accessibility */
.icon-tooltip {
  position: relative;
}

.icon-tooltip::after {
  content: attr(aria-label);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-dark);
  color: var(--text-inverse);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 1000;
}

.icon-tooltip:hover::after,
.icon-tooltip:focus::after {
  opacity: 1;
}

/* Icon State Indicators */
.icon-state-active {
  position: relative;
}

.icon-state-active::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--interactive-primary);
  border-radius: var(--radius-full);
}

/* Icon Error State */
.icon-error-state {
  position: relative;
}

.icon-error-state::after {
  content: '!';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  background: var(--icon-color-error);
  color: var(--text-inverse);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Icon Font Loading Optimization */
@font-face {
  font-family: 'tabler-icons';
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* Improves loading performance */
  src: url('fonts/tabler/tabler-icons.woff2') format('woff2'),
       url('fonts/tabler/tabler-icons.woff') format('woff');
}

/* Critical Icon Preloading */
.icon-preload {
  position: absolute;
  left: -9999px;
  top: -9999px;
  visibility: hidden;
  pointer-events: none;
}

/* Icon Lazy Loading States */
.icon-lazy {
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.icon-lazy.loaded {
  opacity: 1;
}

.icon-lazy.error {
  opacity: 0.5;
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

/* Icon Skeleton Loading — canonical pulse keyframe: fd-skeleton-pulse (DRY-05) */
.icon-skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: fd-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* Icon Caching Optimization */
.icon-cached {
  will-change: transform;
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Icon Bundle Optimization - use @font-face font-display in font definition for critical vs non-critical icons */

/* Icon Size Optimization */
.icon-optimized {
  contain: layout style paint;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Icon Memory Optimization */
.icon-memory-optimized {
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Icon Network Optimization */
.icon-network-optimized {
  /* Use system fonts when icon fonts fail to load */
  font-family: 'tabler-icons', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Icon Critical Path - preload above-fold icons via <link rel="preload">; lazy-load below-fold via JS Intersection Observer */

/* Icon Resource Hints - add <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin> in HTML */

/* Icon Compression Optimization */
.icon-compressed {
  /* Optimized for compressed delivery */
  font-feature-settings: "liga" 1, "kern" 1;
  text-rendering: optimizeSpeed;
}

/* Icon Rendering Optimization */
.icon-render-optimized {
  /* Optimize rendering performance */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Icon Viewport Optimization */
.icon-viewport-optimized {
  /* Only render icons in viewport */
  content-visibility: auto;
  contain-intrinsic-size: 1rem;
}

/* Icon Intersection Observer Optimization */
.icon-observer {
  /* For lazy loading with Intersection Observer */
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-normal);
}

.icon-observer.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Icon Service Worker - configure cache-control/etag in service worker config */

/* Icon Bundle Splitting - configure in build tool (webpack/vite); use dynamic import for feature icons */

/* Icon Tree Shaking - configure in build tool to include only used icons */

/* Icon Compression - configure gzip/brotli on server/CDN */

/* ========================================
   MOTION KEYFRAMES (canonical — DRY-05)
   Single source for spin and skeleton pulse.
   ======================================== */

@keyframes fd-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fd-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========================================
   REDUCED MOTION (canonical — DRY-05)
   Single global block; do not duplicate in feature CSS.
   !important ensures override despite fd-tokens loading first.
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  /* Animations off */
  .icon-loading,
  .fd-nav-link.loading::after,
  .fd-section--loading::after,
  .fd-skeleton-row,
  .fd-page-loader::before,
  .fd-page-loader::after,
  .fd-datatable-loading::after,
  .fd-progress-fill::after,
  .fd-chart-animate,
  .fd-chart-skeleton {
    animation: none !important;
  }

  /* Icon interactions */
  .icon-hover-scale:hover,
  .icon-hover-rotate:hover {
    transform: none !important;
  }

  .icon-toggle,
  .icon-dropdown,
  .icon-nav,
  .icon-action,
  .icon-header,
  .icon-sidebar {
    transition: none !important;
  }

  /* Layout / shell */
  .fd-content-header,
  .fd-btn,
  .fd-user-button,
  .fd-search-input,
  .fd-mobile-menu-toggle,
  .fd-sidebar-toggle,
  .fd-skip-to-main,
  .fd-header-skip-link,
  .fd-toggle-icon,
  .fd-sidebar,
  .fd-layout-container,
  .fd-nav-text,
  .fd-nav-arrow,
  .fd-nav-section-title {
    transition: none !important;
  }

  /* Cards / modals */
  .fd-card-borderless,
  .fd-modal-dialog,
  .fd-modal-backdrop {
    transition: none !important;
  }

  /* Universal sections */
  .fd-section {
    transition: none !important;
  }

  /* Legacy reset catch-all */
  .fd-skin *,
  .fd-skin.fd-datatable-wrapper .dt-buttons .dt-button {
    transition: none !important;
  }

  /* Datatable controls */
  .fd-datatable-controls .fd-datatable-search input,
  .fd-skin .sort-icon,
  .fd-skin .dataTables_wrapper table thead th.sorting::after,
  .fd-datatable-controls .fd-datatable-length select,
  .fd-filter-select,
  .fd-datatable-controls .fd-date-range-dropdown .fd-date-range-btn,
  .fd-datatable-controls .fd-btn,
  .fd-skin.fd-datatable-wrapper .dataTables_filter input,
  .fd-skin.fd-datatable-wrapper .dt-buttons .dt-button,
  .fd-skin.fd-datatable-wrapper table tbody td .btn:not(.fd-action-btn),
  .fd-skin .fd-card,
  .fd-skin .fd-btn,
  .fd-skin .dataTables_length select,
  .fd-skin .dataTables_filter input,
  .fd-skin .dt-buttons .dt-button,
  .fd-skin .fd-datatable-footer .dataTables_length select,
  .fd-skin #tableFooter .dataTables_length select,
  .fd-skin .fd-inspector-dropdown li:first-child input,
  .fd-skin .fd-inspector-dropdown li:first-child input[type="text"],
  .fd-skin .fd-inspector-dropdown li:first-child input.form-control,
  .fd-skin .fd-inspector-dropdown li:first-child input.form-control-sm,
  .fd-skin .fd-inspector-dropdown li:first-child #searchInput {
    transition: none !important;
  }

  /* List pages — filter drawer */
  .fd-filter-drawer-overlay,
  .fd-filter-drawer,
  .fd-filter-drawer.fd-filter-drawer-open,
  .fd-filter-drawer-close,
  .fd-datatable-controls .dropdown-menu .dropdown-item,
  .fd-controls-container,
  .fd-controls-right {
    transition: none !important;
  }

  /* Calendar */
  #calendar-nav .fc_btn_round,
  #calendar-nav #prevBtn,
  #calendar-nav #nextBtn,
  .fc_btn_round:focus,
  .fc_btn_outline_primary:focus,
  .fc_btn_outline_secondary:focus,
  .fc_btn_round:active,
  .fc_btn_outline_primary:active,
  .fc_btn_outline_secondary:active,
  #custom-buttons .fd-btn,
  #calendar-nav .btn,
  #resource-buttons .btn,
  .fc_header_title,
  .context-menu li,
  .nav-pills .slider,
  .fd-skin .fd-inspector-dropdown li:first-child input,
  .fd-skin .fd-inspector-item,
  .fd-segment-btn {
    transition: none !important;
  }

  /* Charts */
  .fd-donut-segment,
  .fd-progress-fill,
  .fd-bar,
  .fd-line-path,
  .fd-line-dot {
    transition: none !important;
  }
}