/* ========================================
   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: tight (headings), normal (body), relaxed (long text)
   5. Font weights: normal (400) for body, semibold (600) for headings, bold (700) for emphasis
   
   TYPOGRAPHY HIERARCHY (@ 14px html root):
   - Display: 5xl (48px) - Hero/empty states; 4xl (36px) - Hero titles
   - Display SM: display-sm (32px) - Large icons, secondary display
   - KPI: kpi (26px) - Metric values (.fd-metric-value)
   - Page Title: title (16px / 1.143rem) - Main page headings (.fd-page-title)
   - Section: heading (17px / 1.214rem) - Section headings (.fd-section-title)
   - Card title: 1rem (14px) - Card headers (.fd-card-title)
   - Subsection: xl (20px) - Legacy subsection scale
   - Large Body: lg (18px) - Important body text
   - Base Body: base (14px) - Default body text
   - Small Body: sm (14px) - Secondary text, captions
   - Subtitle / label: subtitle (12px / 0.857rem) - Page subtitle, metric labels
   - Compact: compact (13px) - Status pill, compact UI
   - Extra Small: xs (12px) - Labels, metadata (scale token; prefer subtitle for 12px roles)
   
   ACCESSIBILITY: html font-size calc(14px * 1) in fd-bootstrap-bridge sets rem root;
   browser zoom still scales all rem-based tokens. body uses 1rem.
   
   ======================================== */

: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 */
  --color-grey-01: #737b8bff;
  --color-grey-02: #96a0afff;
  --color-grey-03: #c4c4c4ff;
  --color-grey-04: #dedede;
  --color-grey-50: #f8fafc;
  --color-grey-100: #f1f5f9;
  --color-grey-700: #334155;   /* Pulse Pro --grey-700 — form values, readable body on controls */
  
  /* Soft Colors */
  --color-soft-01: #edf2f6ff;
  --color-soft-02: #f2f6fcff;
  --color-soft-03: #e2e8f0ff;
  --color-bpi-softblue: #e3f2fdff;
  
  /* Accent Colors */
  --color-green: #32d16dff;
  --color-orange: #ff8723ff;
  --color-red: #f43d3dff;
  
  /* ========================================
     GRADIENT TOKENS
     ======================================== */
  
  /* Accent Gradient */
  --gradient-accent: linear-gradient(133.21deg, #3fa9f5 0%, #3fa9f59e 100%);
  
  /* ========================================
     SHADOW TOKENS
     Pulse-aligned layered scale (dual-stop, ~4–6% opacity).
     Legacy --shadow-01 / --shadow-02 alias into scale for existing CSS.
     ======================================== */

  /* Layered elevation scale (Pulse shadow-xs → shadow-lg) */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.06), 0 4px 6px -4px rgb(0 0 0 / 0.04);

  /* Legacy aliases — prefer --shadow-sm / --shadow-md in new code */
  --shadow-01: var(--shadow-sm);
  --shadow-02: var(--shadow-md);

  /* Sidebar */
  --shadow-sidebar: 4px 0 20px rgba(0, 0, 0, 0.08);

  /* Card shadows (unchanged — white surfaces) */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-card-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  /* 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-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 */
  --text-primary: var(--color-dark);
  --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 — alpha keeps dividers subtle on white surfaces (PULSE-06) */
  --border-primary: rgb(0 0 0 / 0.08);
  --border-secondary: var(--color-soft-01);
  --border-accent: var(--color-primary-0);
  
  /* 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);

  /* 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);
  
  /* ========================================
     SPACING TOKENS
     ========================================
     
     Hybrid spacing model (8pt layout + 4px component internals):
     
     - --layout-gap-*  Page/section/grid gaps — 8pt multiples only (8–64px)
     - --inset-*       Component internals — 4px granularity (4–24px, incl. 12/20)
     - --space-*       Legacy scale — unchanged; prefer layout-gap or inset in new code
     
     Usage:
     - Between sections, page padding, card stacks → var(--layout-gap-*)
     - Button padding, icon gaps, field insets   → var(--inset-*)
     
     Migrated in core CSS (Option B): fd-layout.css, fd-universal-sections.css,
     fd-list-pages.css, fd-components.css, fd-datatable-controls.css, fd-datatable-table.css
     ======================================== */
  
  /* Legacy scale (backward compatible) */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */

  /* Layout gaps — 8pt grid (page / section / column spacing) */
  --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: 2.5rem;              /* 40px */
  --layout-gap-2xl: var(--space-2xl);   /* 48px */
  --layout-gap-3xl: var(--space-3xl);   /* 64px */

  /* Component insets — 4px grid (buttons, forms, chips, icon gaps) */
  --inset-xs: var(--space-xs);          /* 4px */
  --inset-sm: var(--space-sm);          /* 8px */
  --inset-md: 0.75rem;                  /* 12px */
  --inset-lg: var(--space-md);          /* 16px */
  --inset-xl: 1.25rem;                  /* 20px */
  --inset-2xl: var(--space-lg);         /* 24px */
  
  /* ========================================
     NAVIGATION TOKENS
     ======================================== */
  
  /* Navigation specific spacing */
  --nav-section-gap: var(--layout-gap-md);           /* 24px — breathing room between nav groups */
  --nav-section-gap-collapsed: var(--inset-md);      /* 12px — collapsed icon rail */
  --nav-item-margin-bottom: 4px;
  --nav-item-min-height: 36px;
  --nav-icon-width: 20px;
  --nav-icon-size: var(--font-size-base);
  /* Collapse choreography — retain icon Y when section labels animate away */
  --nav-section-header-expanded-height: calc(var(--inset-sm) * 2 + var(--inset-xs) + var(--font-size-xs) * 1.5);
  --nav-section-header-divider-height: calc(var(--inset-sm) * 2 + 1px);
  --nav-section-header-offset: calc(var(--nav-section-header-expanded-height) - var(--nav-section-header-divider-height));
  --nav-icon-size-collapsed: 1.375rem;
  --nav-link-margin-x-expanded: var(--inset-lg);
  --nav-link-pad-x-expanded: var(--inset-2xl);
  --nav-link-margin-x-collapsed: var(--inset-sm);
  --nav-link-pad-x-collapsed: var(--inset-lg);
  --nav-icon-collapse-scale: 1.1;
  --nav-collapsed-pill-size: 36px;
  --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-expanded-height: 61px;
  --logo-expanded-width: 132px;
  --logo-collapsed-size: 68px;
  --logo-header-pad-y-expanded: calc((var(--header-height) - var(--logo-expanded-height)) / 2);
  --logo-header-pad-y-collapsed: calc((var(--header-height) - var(--logo-collapsed-size)) / 2);
  --logo-header-pad-x-expanded: calc(var(--inset-lg) + var(--inset-2xl));
  --logo-header-pad-x-collapsed: var(--inset-sm);
  --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: 300px;
  --dropdown-padding: var(--space-xs);
  --dropdown-margin-left: var(--space-lg);
  
  /* Sidebar specific values */
  --sidebar-mobile-max-width: 280px;
  --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 */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 14px @ 14px html root */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px - display/hero, empty states */
  --font-size-display-sm: 2rem;     /* 32px - large icons, secondary display */
  --font-size-compact: 0.929rem;   /* 13px @ 14px root — buttons, compact UI */
  --font-size-caption: 0.75rem;    /* 10.5px — Pulse Pro event meta, calendar labels */
  --font-size-micro: 0.714rem;     /* 10px — Pulse Pro event badge, dot labels */

  /* Semantic roles (PULSE-03 — Pulse parity @ 14px root) */
  --font-size-title: 1.143rem;        /* 16px - page / topbar title */
  --font-size-heading: 1.214rem;      /* 17px - section title */
  --font-size-subtitle: 0.857rem;     /* 12px - page subtitle, metric label */
  --font-size-kpi: 1.857rem;          /* 26px - metric value / KPI */

  /* Page title/subtitle - aliases of semantic roles */
  --font-size-page-title: var(--font-size-title);
  --font-size-page-subtitle: var(--font-size-subtitle);
  --font-size-dashboard-title: var(--font-size-title);
  --font-size-card-title: 1rem;       /* 14px - card titles */
  --font-size-body-text: 1em;         /* Body text */
  
  /* 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 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ========================================
     BORDER RADIUS TOKENS
     ======================================== */
  
  --radius-none: 0;
  --radius-xs: 0.125rem;  /* 2px */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.25rem;  /* 20px */
  --radius-3xl: 1.5rem;   /* 24px */
  --radius-4xl: 2rem;     /* 32px */
  --radius-5xl: 2.5rem;   /* 40px */
  --radius-button: 14px;  /* Pulse primary button radius (PULSE-05) */
  --fd-btn-icon-round-size: 36px; /* Icon-only circular actions (default) */
  --fd-toolbar-icon-size: 28px;   /* List card toolbar — Pulse .icon-btn.sm */
  --radius-card: 2rem;    /* 28px — Pulse parity card/stat surfaces (PULSE-06) */
  --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 */
  
  /* Sidebar — px values hold at 14px root (DEC reject #9: keep 264px) */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 84px;
  
  /* Header */
  --header-height: 80px;
  --header-padding-vertical: var(--space-md);
  
  /* Footer */
  --footer-height: 56px;
  --footer-padding-vertical: var(--space-md);
  
  /* Content Body */
  --content-padding-horizontal: 32px; /* Pulse desktop gutter — px not rem (14px root) */
  --content-padding-horizontal-mobile: var(--layout-gap-md);

  /* Shell layer spacing — sidebar / topbar / content share one horizontal gutter rail */
  --shell-gutter-x: var(--content-padding-horizontal-mobile); /* 24px — mobile-first */
  --shell-body-pad-y: var(--layout-gap-sm);                   /* 16px — content body vertical */
  --shell-body-gap: var(--layout-gap-sm);                     /* 16px — between content body children */
  --shell-topbar-gap: var(--inset-lg);                        /* 16px — topbar zone / tool gaps */
  --sidebar-inset-x: var(--inset-lg);                         /* 16px — sidebar footer (narrow column) */
  --sidebar-content-pad-y: var(--inset-lg);                   /* 16px — nav scroll area vertical */
  --page-stack-gap: var(--layout-gap-md);                     /* 24px — vertical gap between page-stack rows */

  /* Aliases — header/footer horizontal pad tracks shell gutter */
  --header-padding-horizontal: var(--shell-gutter-x);
  --footer-padding-horizontal: var(--shell-gutter-x);

  /* Content Card Padding - asymmetric zones (PULSE-06 / Pulse --card-* ) */
  --content-card-pad-x: 1.571rem;              /* 22px - horizontal inset all zones */
  --content-card-header-pad-top: 1.286rem;     /* 18px */
  --content-card-header-pad-bottom: 1rem;      /* 14px */
  --content-card-body-pad-y: 1.429rem;         /* 20px */
  --content-card-padding: var(--content-card-body-pad-y); /* legacy alias — vertical body rhythm */
  --content-card-padding-sm: var(--inset-lg);   /* 16px - compact cards, control bars */
  --content-card-padding-xs: var(--inset-sm);   /* 8px - tight toolbars */
  --content-card-toolbar-pad-top: var(--content-card-toolbar-gap); /* 16px — divider → toolbar; matches toolbar → table */
  --content-card-toolbar-gap: 1.143rem;             /* 16px @ 14px root — Pulse .data-toolbar */
  --content-card-body-pad-bottom: var(--content-card-toolbar-gap); /* 16px — last row → footer border */
  --content-card-footer-pad-y: 12px; /* Pulse --space-3 / .card-footer (px not rem — inset-md is 10.5px @ 14px root) */

  /* 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: 0 1px 2px rgba(0, 0, 0, 0.06);
  --toolbar-action-gap: 6px;           /* Pulse .data-toolbar-actions */

  /* Concentric control tracks (tab groups, icon clusters, segmented controls) */
  --control-track-radius: var(--radius-button);   /* 14px — matches primary buttons + card rhythm */
  --control-track-pad: var(--inset-xs);           /* 4px inset */
  --control-track-inner-radius: calc(var(--control-track-radius) - 2px); /* 12px inner pills */
  --control-track-gap: 2px;
  --control-track-item-height: var(--fd-toolbar-icon-size); /* 28px — aligns tabs + toolbar icons */
  --control-track-height: calc(var(--control-track-pad) * 2 + var(--control-track-item-height));
  --control-track-btn-pad-x: 14px;    /* Pulse .tab-btn horizontal pad */

  /* 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 @ 14px root) */
  --metric-card-pad: var(--layout-gap-md);
  --stat-icon-radius: var(--radius-button);   /* 14px — half of --radius-card (28px); Pulse .stat-icon-wrap */

  /* Calendar grid — Pulse-aligned dimensions (no glass, structural only) */
  --cal-slot-height: 28px;        /* 50% of Pulse HOUR_HEIGHT — compact timegrid rows */
  --cal-now-indicator-color: var(--status-error); /* Red now-line (Pulse uses --danger) */
  --cal-event-border-radius: var(--radius-button); /* Pulse parity: 14px rounded card */
  /* Event card left status accent — 0 = none, 1px–2px = thin, 3px = original */
  --cal-event-accent-width: 1px;
  /* Event card text — lighter than list/card titles for dense grid readability */
  --cal-event-title-weight: var(--font-weight-medium);
  --cal-event-title-size: var(--font-size-caption);
  --cal-event-badge-weight: var(--font-weight-normal);
  --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: 30px;                  /* Pulse-aligned (30px) */
  --cal-toolbar-date-label-width: 120px;           /* Pulse-aligned (120px) */

  /* Glass / frosted surface — Pulse Pro .glass-card */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-blur: 12px;
  --glass-border: 1px 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 8px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);

  /* Form fields — Pulse Pro .form-input / .form-field-float parity */
  --form-field-radius: var(--radius-button);              /* 14px — not pill; matches control-track rhythm */
  /* Inset form zones — one tier below --radius-card (28 → 20 → 14 point stack) */
  --form-group-panel-radius: var(--radius-2xl);           /* 20px — .fd-form-group-panel / .fd-card-nested */
  --radius-card-inset-inner: var(--radius-button);      /* 14px — media/controls inside inset panels */
  --fd-order-insp-amount-width: 6rem;                     /* fits 99999.99 in inspection line rows */
  --fd-order-insp-date-width: 10.25rem;                   /* native date control — column auto-fits content */
  --form-field-font-size: var(--font-size-compact);         /* 13px value text */
  --form-field-value-weight: var(--font-weight-normal);     /* 400 — same as body text */
  --form-field-value-color: var(--color-grey-700);          /* Pulse .form-input — softer than --text-primary */
  --form-label-idle-size: var(--font-size-compact);         /* 13px inline label */
  --form-label-idle-weight: var(--font-weight-normal);      /* 400 — placeholder-like idle */
  --form-label-idle-color: var(--text-tertiary);
  --form-label-floated-size: var(--font-size-subtitle);     /* 12px floated label */
  --form-label-floated-weight: var(--font-weight-light);    /* 300 — recedes when value is present */
  --form-label-floated-color: var(--color-grey-03);         /* #c4c4c4 — muted vs filled value */
  --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-subtitle);      /* 12px .form-label above field */
  --form-static-label-weight: var(--font-weight-medium);
  --form-static-label-color: var(--text-secondary);
  --form-hint-size: var(--font-size-xs);                    /* 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(--color-grey-02);
  --form-field-disabled-label-color: var(--color-grey-02);
  --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(--color-grey-02);

  /* Pulse .form-field-float geometry (filter card + inline-label forms) */
  --form-float-field-min-height: 2.75rem;                   /* 44px @ 16px — matches Pulse */
  --form-float-label-top: 8px;
  --form-float-label-gap: 6px;
  --form-float-label-inset-x: var(--inset-md);              /* 12px */
  --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 */
  --form-float-value-row-height: calc(var(--form-field-font-size) * 1.5);
  --form-float-field-height: calc(
    var(--form-float-value-padding-top) +
    var(--form-float-value-row-height) +
    var(--form-float-value-padding-bottom)
  );
  /* 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: 2.25rem;
  --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 colours (icon duotone — glyph still follows file extension) */
  --duotone-fg-doc-purchase-order: #0d6efd;
  --duotone-bg-doc-purchase-order: rgba(13, 110, 253, 0.22);
  --duotone-fg-doc-engineering: #dc3545;
  --duotone-bg-doc-engineering: rgba(220, 53, 69, 0.22);
  --duotone-fg-doc-pci: #6f42c1;
  --duotone-bg-doc-pci: rgba(111, 66, 193, 0.22);
  --duotone-fg-doc-working-drawings: #1e293b;
  --duotone-bg-doc-working-drawings: rgba(30, 41, 59, 0.16);
  --duotone-fg-doc-additional-info: #f59e0b;
  --duotone-bg-doc-additional-info: rgba(245, 158, 11, 0.24);
  --duotone-fg-doc-photos: #0d9ecf;
  --duotone-bg-doc-photos: rgba(13, 158, 207, 0.22);
  --duotone-fg-doc-std-incl: #06b6d4;
  --duotone-bg-doc-std-incl: rgba(6, 182, 212, 0.22);
  --duotone-fg-doc-other: #fd7e14;
  --duotone-bg-doc-other: rgba(253, 126, 20, 0.22);
  --duotone-fg-doc-default: #94a3b8;
  --duotone-bg-doc-default: rgba(148, 163, 184, 0.22);
  --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 — 24px mobile, 32px from tablet up (COMPONENT-BLUEPRINTS §1) */
@media (min-width: 768px) {
  :root {
    --shell-gutter-x: 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-tight);
  color: var(--text-primary);
}

.fd-heading-page {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

.fd-heading-section {
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
}

.fd-heading-subsection {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

.fd-body-large {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  color: var(--text-primary);
}

.fd-body-base {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

.fd-body-small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

.fd-caption {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  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: 1;
  vertical-align: middle;
}
.icon-sm { 
  font-size: var(--icon-size-sm); 
  line-height: 1;
  vertical-align: middle;
}
.icon-md { 
  font-size: var(--icon-size-md); 
  line-height: 1;
  vertical-align: middle;
}
.icon-lg { 
  font-size: var(--icon-size-lg); 
  line-height: 1;
  vertical-align: middle;
}
.icon-xl { 
  font-size: var(--icon-size-xl); 
  line-height: 1;
  vertical-align: middle;
}
.icon-2xl { 
  font-size: var(--icon-size-2xl); 
  line-height: 1;
  vertical-align: middle;
}
.icon-3xl { 
  font-size: var(--icon-size-3xl); 
  line-height: 1;
  vertical-align: middle;
}

/* Tabler Icons Base Styling */
.ti {
  line-height: 1;
  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: 8px;
  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: 1px 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-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;
  }
}