/* © 2025 iPrime | TokensFixed.css — Fixed structural design tokens */
/* 
   This file defines ALL fixed size-related design tokens (no colors).
   Fluid/responsive tokens are in TokensFluid.css.
   Colors are in TokensOklchDark.css (or theme-specific files).
   Base HTML styles are in Foundation.css.
   
   Token Naming Convention:
   - Generic tokens: --token-{category}-{value}
   - Numerical tokens: Name = pixel equivalent, Value = rem (for scalability)
   - Special tokens: Semantic names (e.g., --token-ease-smooth)
   
   Example: --token-space-16 = 1rem (represents 16px at base 16px)
*/

:root {
    /* =========================================================================
       TYPOGRAPHY — Font Families, Sizes, Weights, Line Heights, Letter Spacing
       ========================================================================= */
    
    /* Font Families */
    --token-font-primary: 'Plus Jakarta Sans', system-ui, sans-serif;
    --token-font-heading: 'Syne', system-ui, sans-serif;
    --token-font-mono: 'JetBrains Mono', 'Courier New', monospace;
    
    /* Font Sizes (Pixel-named, REM values) - Complete scale 10px to 128px */
    --token-text-10: 0.625rem;        /* 10px */
    --token-text-11: 0.6875rem;       /* 11px */
    --token-text-12: 0.75rem;         /* 12px */
    --token-text-13: 0.8125rem;       /* 13px */
    --token-text-14: 0.875rem;        /* 14px */
    --token-text-15: 0.9375rem;       /* 15px */
    --token-text-16: 1rem;            /* 16px */
    --token-text-17: 1.0625rem;       /* 17px */
    --token-text-18: 1.125rem;        /* 18px */
    --token-text-19: 1.1875rem;       /* 19px */
    --token-text-20: 1.25rem;         /* 20px */
    --token-text-21: 1.3125rem;       /* 21px */
    --token-text-22: 1.375rem;        /* 22px */
    --token-text-23: 1.4375rem;       /* 23px */
    --token-text-24: 1.5rem;          /* 24px */
    --token-text-26: 1.625rem;        /* 26px */
    --token-text-28: 1.75rem;         /* 28px */
    --token-text-30: 1.875rem;        /* 30px */
    --token-text-32: 2rem;            /* 32px */
    --token-text-36: 2.25rem;         /* 36px */
    --token-text-40: 2.5rem;          /* 40px */
    --token-text-48: 3rem;            /* 48px */
    --token-text-56: 3.5rem;          /* 56px */
    --token-text-64: 4rem;            /* 64px */
    --token-text-72: 4.5rem;          /* 72px */
    --token-text-80: 5rem;            /* 80px */
    --token-text-96: 6rem;            /* 96px */
    --token-text-128: 8rem;           /* 128px */
    
    /* =========================================================================
       FLUID TOKENS — Now in TokensFluid.css
       See TokensFluid.css for:
       - --token-text-fluid-*     (fluid typography)
       - --token-space-fluid-*    (fluid spacing/gap)
       - --token-padding-fluid-*  (fluid padding)
       - --token-margin-fluid-*   (fluid margin)
       - --token-radius-fluid-*   (fluid border radius)
       - --token-height-fluid-*   (fluid heights)
       - --token-icon-fluid-*     (fluid icon sizes)
       - --token-avatar-fluid-*   (fluid avatar sizes)
       - --token-max-width-fluid-* (fluid max widths)
       - --token-gap-fluid-*      (additional fluid gaps)
       ========================================================================= */
    
    /* Font Weights (Pure numbers - 100 to 900) */
    --token-weight-100: 100;
    --token-weight-200: 200;
    --token-weight-300: 300;
    --token-weight-400: 400;
    --token-weight-500: 500;
    --token-weight-600: 600;
    --token-weight-700: 700;
    --token-weight-800: 800;
    --token-weight-900: 900;
    
    /* Line Heights (Number-named: 100 = 1.0, 105 = 1.05, etc. | Equal 0.05 increments) */
    --token-leading-100: 1;
    --token-leading-105: 1.05;
    --token-leading-110: 1.1;
    --token-leading-115: 1.15;
    --token-leading-120: 1.2;
    --token-leading-125: 1.25;
    --token-leading-130: 1.3;
    --token-leading-135: 1.35;
    --token-leading-140: 1.4;
    --token-leading-145: 1.45;
    --token-leading-150: 1.5;
    --token-leading-155: 1.55;
    --token-leading-160: 1.6;
    --token-leading-165: 1.65;
    --token-leading-170: 1.7;
    --token-leading-175: 1.75;
    --token-leading-180: 1.8;
    --token-leading-185: 1.85;
    --token-leading-190: 1.9;
    --token-leading-195: 1.95;
    --token-leading-200: 2;
    
    /* Letter Spacing */
    --token-tracking-tighter: -0.05em;
    --token-tracking-tight: -0.025em;
    --token-tracking-normal: 0;
    --token-tracking-wide: 0.025em;
    --token-tracking-wider: 0.05em;
    --token-tracking-widest: 0.1em;
    
    /* =========================================================================
       SPACING — Complete scale 0-256px (Pixel-named, REM values)
       Purpose: Gap between elements (flex-gap, grid-gap)
       Note: For padding use --token-padding-*, for margin use --token-margin-*
       ========================================================================= */
    
    /* Fine Control: 0-32px (every 1px) */
    --token-space-0: 0;                   /* 0px */
    --token-space-1: 0.0625rem;           /* 1px */
    --token-space-2: 0.125rem;            /* 2px */
    --token-space-3: 0.1875rem;           /* 3px */
    --token-space-4: 0.25rem;             /* 4px */
    --token-space-5: 0.3125rem;           /* 5px */
    --token-space-6: 0.375rem;            /* 6px */
    --token-space-7: 0.4375rem;           /* 7px */
    --token-space-8: 0.5rem;              /* 8px */
    --token-space-9: 0.5625rem;           /* 9px */
    --token-space-10: 0.625rem;           /* 10px */
    --token-space-11: 0.6875rem;          /* 11px */
    --token-space-12: 0.75rem;            /* 12px */
    --token-space-13: 0.8125rem;          /* 13px */
    --token-space-14: 0.875rem;           /* 14px */
    --token-space-15: 0.9375rem;          /* 15px */
    --token-space-16: 1rem;               /* 16px */
    --token-space-17: 1.0625rem;          /* 17px */
    --token-space-18: 1.125rem;           /* 18px */
    --token-space-19: 1.1875rem;          /* 19px */
    --token-space-20: 1.25rem;            /* 20px */
    --token-space-21: 1.3125rem;          /* 21px */
    --token-space-22: 1.375rem;           /* 22px */
    --token-space-23: 1.4375rem;          /* 23px */
    --token-space-24: 1.5rem;             /* 24px */
    --token-space-25: 1.5625rem;          /* 25px */
    --token-space-26: 1.625rem;           /* 26px */
    --token-space-27: 1.6875rem;          /* 27px */
    --token-space-28: 1.75rem;            /* 28px */
    --token-space-29: 1.8125rem;          /* 29px */
    --token-space-30: 1.875rem;           /* 30px */
    --token-space-31: 1.9375rem;          /* 31px */
    --token-space-32: 2rem;               /* 32px */
    
    /* Medium Control: 36-64px (every 4px) */
    --token-space-36: 2.25rem;            /* 36px */
    --token-space-40: 2.5rem;             /* 40px */
    --token-space-44: 2.75rem;            /* 44px */
    --token-space-48: 3rem;               /* 48px */
    --token-space-52: 3.25rem;            /* 52px */
    --token-space-56: 3.5rem;             /* 56px */
    --token-space-60: 3.75rem;            /* 60px */
    --token-space-64: 4rem;               /* 64px */
    
    /* Large Control: 72-128px (every 8px) */
    --token-space-72: 4.5rem;             /* 72px */
    --token-space-80: 5rem;               /* 80px */
    --token-space-88: 5.5rem;             /* 88px */
    --token-space-96: 6rem;               /* 96px */
    --token-space-104: 6.5rem;            /* 104px */
    --token-space-112: 7rem;              /* 112px */
    --token-space-120: 7.5rem;            /* 120px */
    --token-space-128: 8rem;              /* 128px */
    
    /* Extra Large: 144-256px (every 16px) */
    --token-space-144: 9rem;              /* 144px */
    --token-space-160: 10rem;             /* 160px */
    --token-space-176: 11rem;             /* 176px */
    --token-space-192: 12rem;             /* 192px */
    --token-space-208: 13rem;             /* 208px */
    --token-space-224: 14rem;             /* 224px */
    --token-space-240: 15rem;             /* 240px */
    --token-space-256: 16rem;             /* 256px */
    
    /* =========================================================================
       PADDING — Complete scale 0-256px (Pixel-named, REM values)
       Purpose: Internal spacing inside elements
       ========================================================================= */
    
    /* Fine Control: 0-32px (every 1px) */
    --token-padding-0: 0;                 /* 0px */
    --token-padding-1: 0.0625rem;         /* 1px */
    --token-padding-2: 0.125rem;          /* 2px */
    --token-padding-3: 0.1875rem;         /* 3px */
    --token-padding-4: 0.25rem;           /* 4px */
    --token-padding-5: 0.3125rem;         /* 5px */
    --token-padding-6: 0.375rem;          /* 6px */
    --token-padding-7: 0.4375rem;         /* 7px */
    --token-padding-8: 0.5rem;            /* 8px */
    --token-padding-9: 0.5625rem;         /* 9px */
    --token-padding-10: 0.625rem;         /* 10px */
    --token-padding-11: 0.6875rem;        /* 11px */
    --token-padding-12: 0.75rem;          /* 12px */
    --token-padding-13: 0.8125rem;        /* 13px */
    --token-padding-14: 0.875rem;         /* 14px */
    --token-padding-15: 0.9375rem;        /* 15px */
    --token-padding-16: 1rem;             /* 16px */
    --token-padding-17: 1.0625rem;        /* 17px */
    --token-padding-18: 1.125rem;         /* 18px */
    --token-padding-19: 1.1875rem;        /* 19px */
    --token-padding-20: 1.25rem;          /* 20px */
    --token-padding-21: 1.3125rem;        /* 21px */
    --token-padding-22: 1.375rem;         /* 22px */
    --token-padding-23: 1.4375rem;        /* 23px */
    --token-padding-24: 1.5rem;           /* 24px */
    --token-padding-25: 1.5625rem;        /* 25px */
    --token-padding-26: 1.625rem;         /* 26px */
    --token-padding-27: 1.6875rem;        /* 27px */
    --token-padding-28: 1.75rem;          /* 28px */
    --token-padding-29: 1.8125rem;        /* 29px */
    --token-padding-30: 1.875rem;         /* 30px */
    --token-padding-31: 1.9375rem;        /* 31px */
    --token-padding-32: 2rem;             /* 32px */
    
    /* Medium Control: 36-64px (every 4px) */
    --token-padding-36: 2.25rem;          /* 36px */
    --token-padding-40: 2.5rem;           /* 40px */
    --token-padding-44: 2.75rem;          /* 44px */
    --token-padding-48: 3rem;             /* 48px */
    --token-padding-52: 3.25rem;          /* 52px */
    --token-padding-56: 3.5rem;           /* 56px */
    --token-padding-60: 3.75rem;          /* 60px */
    --token-padding-64: 4rem;             /* 64px */
    
    /* Large Control: 72-128px (every 8px) */
    --token-padding-72: 4.5rem;           /* 72px */
    --token-padding-80: 5rem;             /* 80px */
    --token-padding-88: 5.5rem;           /* 88px */
    --token-padding-96: 6rem;             /* 96px */
    --token-padding-104: 6.5rem;          /* 104px */
    --token-padding-112: 7rem;            /* 112px */
    --token-padding-120: 7.5rem;          /* 120px */
    --token-padding-128: 8rem;            /* 128px */
    
    /* Extra Large: 144-256px (every 16px) */
    --token-padding-144: 9rem;            /* 144px */
    --token-padding-160: 10rem;           /* 160px */
    --token-padding-176: 11rem;           /* 176px */
    --token-padding-192: 12rem;           /* 192px */
    --token-padding-208: 13rem;           /* 208px */
    --token-padding-224: 14rem;           /* 224px */
    --token-padding-240: 15rem;           /* 240px */
    --token-padding-256: 16rem;           /* 256px */
    
    /* =========================================================================
       MARGIN — Complete scale 0-256px (Pixel-named, REM values)
       Purpose: External spacing between elements
       ========================================================================= */
    
    /* Fine Control: 0-32px (every 1px) */
    --token-margin-0: 0;                  /* 0px */
    --token-margin-1: 0.0625rem;          /* 1px */
    --token-margin-2: 0.125rem;           /* 2px */
    --token-margin-3: 0.1875rem;          /* 3px */
    --token-margin-4: 0.25rem;            /* 4px */
    --token-margin-5: 0.3125rem;          /* 5px */
    --token-margin-6: 0.375rem;           /* 6px */
    --token-margin-7: 0.4375rem;          /* 7px */
    --token-margin-8: 0.5rem;             /* 8px */
    --token-margin-9: 0.5625rem;          /* 9px */
    --token-margin-10: 0.625rem;          /* 10px */
    --token-margin-11: 0.6875rem;         /* 11px */
    --token-margin-12: 0.75rem;           /* 12px */
    --token-margin-13: 0.8125rem;         /* 13px */
    --token-margin-14: 0.875rem;          /* 14px */
    --token-margin-15: 0.9375rem;         /* 15px */
    --token-margin-16: 1rem;              /* 16px */
    --token-margin-17: 1.0625rem;         /* 17px */
    --token-margin-18: 1.125rem;          /* 18px */
    --token-margin-19: 1.1875rem;         /* 19px */
    --token-margin-20: 1.25rem;           /* 20px */
    --token-margin-21: 1.3125rem;         /* 21px */
    --token-margin-22: 1.375rem;          /* 22px */
    --token-margin-23: 1.4375rem;         /* 23px */
    --token-margin-24: 1.5rem;            /* 24px */
    --token-margin-25: 1.5625rem;         /* 25px */
    --token-margin-26: 1.625rem;          /* 26px */
    --token-margin-27: 1.6875rem;         /* 27px */
    --token-margin-28: 1.75rem;           /* 28px */
    --token-margin-29: 1.8125rem;         /* 29px */
    --token-margin-30: 1.875rem;          /* 30px */
    --token-margin-31: 1.9375rem;         /* 31px */
    --token-margin-32: 2rem;              /* 32px */
    
    /* Medium Control: 36-64px (every 4px) */
    --token-margin-36: 2.25rem;           /* 36px */
    --token-margin-40: 2.5rem;            /* 40px */
    --token-margin-44: 2.75rem;           /* 44px */
    --token-margin-48: 3rem;              /* 48px */
    --token-margin-52: 3.25rem;           /* 52px */
    --token-margin-56: 3.5rem;            /* 56px */
    --token-margin-60: 3.75rem;           /* 60px */
    --token-margin-64: 4rem;              /* 64px */
    
    /* Large Control: 72-128px (every 8px) */
    --token-margin-72: 4.5rem;            /* 72px */
    --token-margin-80: 5rem;              /* 80px */
    --token-margin-88: 5.5rem;            /* 88px */
    --token-margin-96: 6rem;              /* 96px */
    --token-margin-104: 6.5rem;           /* 104px */
    --token-margin-112: 7rem;             /* 112px */
    --token-margin-120: 7.5rem;           /* 120px */
    --token-margin-128: 8rem;             /* 128px */
    
    /* Extra Large: 144-256px (every 16px) */
    --token-margin-144: 9rem;             /* 144px */
    --token-margin-160: 10rem;            /* 160px */
    --token-margin-176: 11rem;            /* 176px */
    --token-margin-192: 12rem;            /* 192px */
    --token-margin-208: 13rem;            /* 208px */
    --token-margin-224: 14rem;            /* 224px */
    --token-margin-240: 15rem;            /* 240px */
    --token-margin-256: 16rem;            /* 256px */
    
    /* =========================================================================
       BORDER RADIUS — Complete scale 0-48px (Pixel-named, REM values)
       ========================================================================= */
    
    /* Fine Control: 0-24px (every 1px) */
    --token-radius-0: 0;                  /* 0px */
    --token-radius-1: 0.0625rem;          /* 1px */
    --token-radius-2: 0.125rem;           /* 2px */
    --token-radius-3: 0.1875rem;          /* 3px */
    --token-radius-4: 0.25rem;            /* 4px */
    --token-radius-5: 0.3125rem;          /* 5px */
    --token-radius-6: 0.375rem;           /* 6px */
    --token-radius-7: 0.4375rem;          /* 7px */
    --token-radius-8: 0.5rem;             /* 8px */
    --token-radius-9: 0.5625rem;          /* 9px */
    --token-radius-10: 0.625rem;          /* 10px */
    --token-radius-11: 0.6875rem;         /* 11px */
    --token-radius-12: 0.75rem;           /* 12px */
    --token-radius-13: 0.8125rem;         /* 13px */
    --token-radius-14: 0.875rem;          /* 14px */
    --token-radius-15: 0.9375rem;         /* 15px */
    --token-radius-16: 1rem;              /* 16px */
    --token-radius-17: 1.0625rem;         /* 17px */
    --token-radius-18: 1.125rem;          /* 18px */
    --token-radius-19: 1.1875rem;         /* 19px */
    --token-radius-20: 1.25rem;           /* 20px */
    --token-radius-21: 1.3125rem;         /* 21px */
    --token-radius-22: 1.375rem;          /* 22px */
    --token-radius-23: 1.4375rem;         /* 23px */
    --token-radius-24: 1.5rem;            /* 24px */
    
    /* Medium Control: 26-48px (every 2px) */
    --token-radius-26: 1.625rem;          /* 26px */
    --token-radius-28: 1.75rem;           /* 28px */
    --token-radius-30: 1.875rem;          /* 30px */
    --token-radius-32: 2rem;              /* 32px */
    --token-radius-34: 2.125rem;          /* 34px */
    --token-radius-36: 2.25rem;           /* 36px */
    --token-radius-38: 2.375rem;          /* 38px */
    --token-radius-40: 2.5rem;            /* 40px */
    --token-radius-42: 2.625rem;          /* 42px */
    --token-radius-44: 2.75rem;           /* 44px */
    --token-radius-46: 2.875rem;          /* 46px */
    --token-radius-48: 3rem;              /* 48px */
    
    /* Special: Full circle */
    --token-radius-full: 9999px;          /* Perfect circle */
    
    /* =========================================================================
       BORDER WIDTH — Complete scale 0-10px (Pixel-named, PX values)
       Note: Border widths use px (not rem) for precision
       ========================================================================= */
    
    --token-border-0: 0;                  /* 0px */
    --token-border-1: 1px;                /* 1px */
    --token-border-2: 2px;                /* 2px */
    --token-border-3: 3px;                /* 3px */
    --token-border-4: 4px;                /* 4px */
    --token-border-5: 5px;                /* 5px */
    --token-border-6: 6px;                /* 6px */
    --token-border-7: 7px;                /* 7px */
    --token-border-8: 8px;                /* 8px */
    --token-border-9: 9px;                /* 9px */
    --token-border-10: 10px;              /* 10px */
    
    /* =========================================================================
       BLUR — Complete scale 0-64px (Pixel-named, PX values)
       Note: Blur uses px (not rem) as it doesn't benefit from scaling
       ========================================================================= */
    
    /* Fine Control: 0-16px (every 1px) */
    --token-blur-0: 0;                    /* 0px */
    --token-blur-1: 1px;                  /* 1px */
    --token-blur-2: 2px;                  /* 2px */
    --token-blur-3: 3px;                  /* 3px */
    --token-blur-4: 4px;                  /* 4px */
    --token-blur-5: 5px;                  /* 5px */
    --token-blur-6: 6px;                  /* 6px */
    --token-blur-7: 7px;                  /* 7px */
    --token-blur-8: 8px;                  /* 8px */
    --token-blur-9: 9px;                  /* 9px */
    --token-blur-10: 10px;                /* 10px */
    --token-blur-11: 11px;                /* 11px */
    --token-blur-12: 12px;                /* 12px */
    --token-blur-13: 13px;                /* 13px */
    --token-blur-14: 14px;                /* 14px */
    --token-blur-15: 15px;                /* 15px */
    --token-blur-16: 16px;                /* 16px */
    
    /* Medium Control: 18-32px (every 2px) */
    --token-blur-18: 18px;                /* 18px */
    --token-blur-20: 20px;                /* 20px */
    --token-blur-22: 22px;                /* 22px */
    --token-blur-24: 24px;                /* 24px */
    --token-blur-26: 26px;                /* 26px */
    --token-blur-28: 28px;                /* 28px */
    --token-blur-30: 30px;                /* 30px */
    --token-blur-32: 32px;                /* 32px */
    
    /* Large Control: 36-64px (every 4px) */
    --token-blur-36: 36px;                /* 36px */
    --token-blur-40: 40px;                /* 40px */
    --token-blur-44: 44px;                /* 44px */
    --token-blur-48: 48px;                /* 48px */
    --token-blur-52: 52px;                /* 52px */
    --token-blur-56: 56px;                /* 56px */
    --token-blur-60: 60px;                /* 60px */
    --token-blur-64: 64px;                /* 64px */
    
    /* =========================================================================
       OPACITY — Complete scale 0-100 (percentage)
       ========================================================================= */
    
    --token-opacity-00: 0;
    --token-opacity-05: 0.05;
    --token-opacity-10: 0.1;
    --token-opacity-15: 0.15;
    --token-opacity-20: 0.2;
    --token-opacity-25: 0.25;
    --token-opacity-30: 0.3;
    --token-opacity-35: 0.35;
    --token-opacity-40: 0.4;
    --token-opacity-45: 0.45;
    --token-opacity-50: 0.5;
    --token-opacity-55: 0.55;
    --token-opacity-60: 0.6;
    --token-opacity-65: 0.65;
    --token-opacity-70: 0.7;
    --token-opacity-75: 0.75;
    --token-opacity-80: 0.8;
    --token-opacity-85: 0.85;
    --token-opacity-90: 0.9;
    --token-opacity-95: 0.95;
    --token-opacity-100: 1;
    
    /* =========================================================================
       TRANSITIONS & ANIMATIONS — Durations, Easings
       ========================================================================= */
    
    /* Duration (UI interactions) */
    --token-duration-instant: 0s;
    --token-duration-fast: 0.15s;
    --token-duration-base: 0.3s;
    --token-duration-slow: 0.5s;
    --token-duration-slower: 0.8s;
    --token-duration-slowest: 1.2s;
    
    /* Duration (Ambient animations) */
    --token-duration-ambient-short: 3s;
    --token-duration-ambient-medium: 6s;
    --token-duration-ambient-long: 10s;
    --token-duration-ambient-extra-long: 20s;
    
    /* Easing Functions */
    --token-ease-linear: linear;
    --token-ease-in: ease-in;
    --token-ease-out: ease-out;
    --token-ease-in-out: ease-in-out;
    --token-ease-default: ease;
    --token-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --token-ease-smooth-in: cubic-bezier(0.4, 0, 1, 1);
    --token-ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
    --token-ease-smooth-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --token-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --token-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --token-ease-snap: cubic-bezier(0.4, 0, 0, 1);
    
    /* =========================================================================
       Z-INDEX — Layering system
       ========================================================================= */
    
    --token-z-below: -1;
    --token-z-base: 0;
    --token-z-above: 1;
    --token-z-nav: 10;
    --token-z-sidebar: 20;
    --token-z-header: 30;
    --token-z-dropdown: 1000;
    --token-z-sticky: 1020;
    --token-z-fixed: 1030;
    --token-z-overlay: 1040;
    --token-z-modal: 1050;
    --token-z-popover: 1060;
    --token-z-tooltip: 1070;
    --token-z-toast: 1080;
    --token-z-notification: 1090;
    --token-z-cursor: 9999;
    --token-z-debug: 10000;
    
    /* =========================================================================
       BREAKPOINTS — Responsive design
       ========================================================================= */
    
    --token-breakpoint-xs: 480px;         /* Extra small devices (phones portrait) */
    --token-breakpoint-sm: 640px;         /* Small devices (phones landscape) */
    --token-breakpoint-md: 768px;         /* Medium devices (tablets) */
    --token-breakpoint-lg: 1024px;        /* Large devices (laptops) */
    --token-breakpoint-xl: 1280px;        /* Extra large devices (desktops) */
    --token-breakpoint-2xl: 1536px;       /* 2X large devices (large desktops) */
    --token-breakpoint-3xl: 1920px;       /* 3X large devices (ultra wide) */
    
    /* =========================================================================
       SIZING — Width, Height, Min/Max constraints
       ========================================================================= */
    
    /* Max Widths (Pixel-named, REM values) */
    --token-max-width-240: 15rem;         /* 240px */
    --token-max-width-280: 17.5rem;       /* 280px */
    --token-max-width-320: 20rem;         /* 320px */
    --token-max-width-360: 22.5rem;       /* 360px */
    --token-max-width-400: 25rem;         /* 400px */
    --token-max-width-448: 28rem;         /* 448px */
    --token-max-width-480: 30rem;         /* 480px */
    --token-max-width-500: 31.25rem;      /* 500px */
    --token-max-width-560: 35rem;         /* 560px */
    --token-max-width-600: 37.5rem;       /* 600px */
    --token-max-width-640: 40rem;         /* 640px */
    --token-max-width-700: 43.75rem;      /* 700px */
    --token-max-width-720: 45rem;         /* 720px */
    --token-max-width-768: 48rem;         /* 768px */
    --token-max-width-800: 50rem;         /* 800px */
    --token-max-width-900: 56.25rem;      /* 900px */
    --token-max-width-960: 60rem;         /* 960px */
    --token-max-width-1024: 64rem;        /* 1024px */
    --token-max-width-1120: 70rem;        /* 1120px */
    --token-max-width-1200: 75rem;        /* 1200px */
    --token-max-width-1280: 80rem;        /* 1280px */
    --token-max-width-1400: 87.5rem;      /* 1400px */
    --token-max-width-1440: 90rem;        /* 1440px */
    --token-max-width-1536: 96rem;        /* 1536px */
    --token-max-width-1600: 100rem;       /* 1600px */
    --token-max-width-1920: 120rem;       /* 1920px */
    --token-max-width-2560: 160rem;       /* 2560px */
    --token-max-width-full: 100%;         /* No constraint */
    
    /* Min Widths (Pixel-named, REM values) */
    --token-min-width-200: 12.5rem;       /* 200px */
    --token-min-width-240: 15rem;         /* 240px */
    --token-min-width-280: 17.5rem;       /* 280px */
    --token-min-width-320: 20rem;         /* 320px */
    --token-min-width-360: 22.5rem;       /* 360px */
    --token-min-width-400: 25rem;         /* 400px */
    --token-min-width-480: 30rem;         /* 480px */
    --token-min-width-560: 35rem;         /* 560px */
    --token-min-width-640: 40rem;         /* 640px */
    --token-min-width-768: 48rem;         /* 768px */
    --token-min-width-1024: 64rem;        /* 1024px */
    
    /* Heights (Pixel-named, REM values) */
    --token-height-24: 1.5rem;            /* 24px */
    --token-height-28: 1.75rem;           /* 28px */
    --token-height-32: 2rem;              /* 32px */
    --token-height-36: 2.25rem;           /* 36px */
    --token-height-40: 2.5rem;            /* 40px */
    --token-height-44: 2.75rem;           /* 44px */
    --token-height-48: 3rem;              /* 48px */
    --token-height-52: 3.25rem;           /* 52px */
    --token-height-56: 3.5rem;            /* 56px */
    --token-height-60: 3.75rem;           /* 60px */
    --token-height-64: 4rem;              /* 64px */
    --token-height-72: 4.5rem;            /* 72px */
    --token-height-80: 5rem;              /* 80px */
    --token-height-88: 5.5rem;            /* 88px */
    --token-height-96: 6rem;              /* 96px */
    --token-height-112: 7rem;             /* 112px */
    --token-height-128: 8rem;             /* 128px */
    --token-height-144: 9rem;             /* 144px */
    --token-height-160: 10rem;            /* 160px */
    --token-height-192: 12rem;            /* 192px */
    --token-height-224: 14rem;            /* 224px */
    --token-height-256: 16rem;            /* 256px */
    --token-height-320: 20rem;            /* 320px */
    --token-height-384: 24rem;            /* 384px */
    --token-height-448: 28rem;            /* 448px */
    --token-height-512: 32rem;            /* 512px */
    --token-height-640: 40rem;            /* 640px */
    
    /* Min Heights (Pixel-named, REM values) */
    --token-min-height-24: 1.5rem;        /* 24px */
    --token-min-height-28: 1.75rem;       /* 28px */
    --token-min-height-32: 2rem;          /* 32px */
    --token-min-height-36: 2.25rem;       /* 36px */
    --token-min-height-40: 2.5rem;        /* 40px */
    --token-min-height-44: 2.75rem;       /* 44px */
    --token-min-height-48: 3rem;          /* 48px */
    --token-min-height-52: 3.25rem;       /* 52px */
    --token-min-height-56: 3.5rem;        /* 56px */
    --token-min-height-60: 3.75rem;       /* 60px */
    --token-min-height-64: 4rem;          /* 64px */
    --token-min-height-72: 4.5rem;        /* 72px */
    --token-min-height-80: 5rem;          /* 80px */
    --token-min-height-88: 5.5rem;        /* 88px */
    --token-min-height-96: 6rem;          /* 96px */
    --token-min-height-112: 7rem;         /* 112px */
    --token-min-height-128: 8rem;         /* 128px */
    --token-min-height-144: 9rem;         /* 144px */
    --token-min-height-160: 10rem;        /* 160px */
    --token-min-height-192: 12rem;        /* 192px */
    --token-min-height-224: 14rem;        /* 224px */
    --token-min-height-256: 16rem;        /* 256px */
    --token-min-height-320: 20rem;        /* 320px */
    --token-min-height-384: 24rem;        /* 384px */
    --token-min-height-448: 28rem;        /* 448px */
    --token-min-height-512: 32rem;        /* 512px */
    --token-min-height-640: 40rem;        /* 640px */
    
    /* Viewport-based Heights */
    --token-height-screen: 100vh;         /* Full viewport height */
    --token-height-screen-90: 90vh;       /* 90% viewport */
    --token-height-screen-80: 80vh;       /* 80% viewport */
    --token-height-screen-75: 75vh;       /* 75% viewport */
    --token-height-screen-50: 50vh;       /* 50% viewport */
    --token-height-screen-25: 25vh;       /* 25% viewport */
    
    /* Dynamic Viewport Heights (Modern - better mobile support) */
    --token-height-dvh: 100dvh;           /* Dynamic viewport height */
    --token-height-dvh-90: 90dvh;
    --token-height-dvh-80: 80dvh;
    --token-height-dvh-75: 75dvh;
    --token-height-dvh-50: 50dvh;
    --token-height-dvh-25: 25dvh;
    
    /* =========================================================================
       ICON SIZES — Standardized icon dimensions
       ========================================================================= */
    
    --token-icon-12: 0.75rem;             /* 12px - Tiny icons */
    --token-icon-14: 0.875rem;            /* 14px - Small icons */
    --token-icon-16: 1rem;                /* 16px - Default icons */
    --token-icon-18: 1.125rem;            /* 18px - Medium-small icons */
    --token-icon-20: 1.25rem;             /* 20px - Medium icons */
    --token-icon-24: 1.5rem;              /* 24px - Standard icons */
    --token-icon-28: 1.75rem;             /* 28px - Large-medium icons */
    --token-icon-32: 2rem;                /* 32px - Large icons */
    --token-icon-36: 2.25rem;             /* 36px - Extra large icons */
    --token-icon-40: 2.5rem;              /* 40px - Hero icons */
    --token-icon-48: 3rem;                /* 48px - Feature icons */
    --token-icon-56: 3.5rem;              /* 56px - Extra feature icons */
    --token-icon-64: 4rem;                /* 64px - Jumbo icons */
    
    /* =========================================================================
       AVATAR SIZES — User avatar dimensions
       ========================================================================= */
    
    --token-avatar-24: 1.5rem;            /* 24px - Tiny avatar */
    --token-avatar-32: 2rem;              /* 32px - Small avatar */
    --token-avatar-40: 2.5rem;            /* 40px - Default avatar */
    --token-avatar-48: 3rem;              /* 48px - Medium avatar */
    --token-avatar-56: 3.5rem;            /* 56px - Large avatar */
    --token-avatar-64: 4rem;              /* 64px - Extra large avatar */
    --token-avatar-80: 5rem;              /* 80px - Profile avatar */
    --token-avatar-96: 6rem;              /* 96px - Hero avatar */
    --token-avatar-128: 8rem;             /* 128px - Feature avatar */
    
    /* =========================================================================
       ASPECT RATIOS — Common image/video aspect ratios
       ========================================================================= */
    
    --token-aspect-square: 1 / 1;         /* 1:1 - Square */
    --token-aspect-landscape: 4 / 3;      /* 4:3 - Standard landscape */
    --token-aspect-video: 16 / 9;         /* 16:9 - Video content */
    --token-aspect-widescreen: 16 / 9;    /* 16:9 - Widescreen displays */
    --token-aspect-ultrawide: 21 / 9;     /* 21:9 - Ultrawide */
    --token-aspect-photo: 3 / 2;          /* 3:2 - Photo */
    --token-aspect-banner: 2 / 1;         /* 2:1 - Banner */
    --token-aspect-portrait: 3 / 4;       /* 3:4 - Portrait */
    --token-aspect-vertical: 9 / 16;      /* 9:16 - Vertical video */
    
    /* =========================================================================
       TRANSFORM SCALE — Zoom and scale values
       ========================================================================= */
    
    --token-scale-0: 0;                   /* Invisible */
    --token-scale-50: 0.5;                /* 50% */
    --token-scale-75: 0.75;               /* 75% */
    --token-scale-90: 0.9;                /* 90% */
    --token-scale-95: 0.95;               /* 95% */
    --token-scale-100: 1;                 /* 100% - Default */
    --token-scale-105: 1.05;              /* 105% - Subtle hover */
    --token-scale-110: 1.1;               /* 110% - Medium hover */
    --token-scale-125: 1.25;              /* 125% */
    --token-scale-150: 1.5;               /* 150% */
    --token-scale-200: 2;                 /* 200% - Double size */
    
    /* =========================================================================
       ROTATION DEGREES — Transform rotation angles
       ========================================================================= */
    
    --token-rotate-0: 0deg;               /* No rotation */
    --token-rotate-45: 45deg;             /* 45° */
    --token-rotate-90: 90deg;             /* 90° - Quarter turn */
    --token-rotate-135: 135deg;           /* 135° */
    --token-rotate-180: 180deg;           /* 180° - Half turn */
    --token-rotate-225: 225deg;           /* 225° */
    --token-rotate-270: 270deg;           /* 270° - Three-quarter turn */
    --token-rotate-315: 315deg;           /* 315° */
    --token-rotate-360: 360deg;           /* 360° - Full rotation */
    --token-rotate-neg-45: -45deg;        /* -45° */
    --token-rotate-neg-90: -90deg;        /* -90° */
    --token-rotate-neg-135: -135deg;      /* -135° */
    --token-rotate-neg-180: -180deg;      /* -180° */
    
    /* =========================================================================
       PERCENTAGE VALUES — Common percentage values
       ========================================================================= */
    
    --token-percent-0: 0%;
    --token-percent-10: 10%;
    --token-percent-20: 20%;
    --token-percent-25: 25%;
    --token-percent-30: 30%;
    --token-percent-33: 33.333333%;       /* 1/3 */
    --token-percent-40: 40%;
    --token-percent-50: 50%;
    --token-percent-60: 60%;
    --token-percent-66: 66.666667%;       /* 2/3 */
    --token-percent-70: 70%;
    --token-percent-75: 75%;
    --token-percent-80: 80%;
    --token-percent-90: 90%;
    --token-percent-100: 100%;
    
    /* =========================================================================
       LINE CLAMP — Text truncation after N lines
       ========================================================================= */
    
    --token-line-clamp-1: 1;
    --token-line-clamp-2: 2;
    --token-line-clamp-3: 3;
    --token-line-clamp-4: 4;
    --token-line-clamp-5: 5;
    --token-line-clamp-6: 6;
    --token-line-clamp-8: 8;
    --token-line-clamp-10: 10;
    
    /* =========================================================================
       GRID COLUMNS — Column count for grid layouts
       ========================================================================= */
    
    --token-columns-1: 1;
    --token-columns-2: 2;
    --token-columns-3: 3;
    --token-columns-4: 4;
    --token-columns-5: 5;
    --token-columns-6: 6;
    --token-columns-7: 7;
    --token-columns-8: 8;
    --token-columns-9: 9;
    --token-columns-10: 10;
    --token-columns-11: 11;
    --token-columns-12: 12;
    --token-columns-auto: auto;
    
    /* =========================================================================
       ORDER VALUES — Flexbox/Grid order property
       ========================================================================= */
    
    --token-order-first: -1;
    --token-order-none: 0;
    --token-order-1: 1;
    --token-order-2: 2;
    --token-order-3: 3;
    --token-order-4: 4;
    --token-order-5: 5;
    --token-order-10: 10;
    --token-order-last: 99;
    
    /* =========================================================================
       MODULE-SPECIFIC SIZE TOKENS — Navbar
       ========================================================================= */
    
    --token-navbar-bubble-duration: 0.28s;
    --token-navbar-bubble-easing: cubic-bezier(0.22, 1, 0.36, 1);
    --token-navbar-avatar-rotate-duration: 0.6s;
    --token-navbar-avatar-rotate-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
    --token-navbar-container-max-width: 87.5rem;              /* 1400px */
    --token-navbar-mobile-menu-max-width: 25rem;              /* 400px */
    --token-navbar-close-btn-size: 2.5rem;                    /* 40px */
    --token-navbar-breakpoint-mobile: 768px;
    --token-navbar-breakpoint-desktop: 74.9375rem;            /* 1199px */
    --token-navbar-cursor-size: 0.75rem;                      /* 12px */
    
    /* =========================================================================
       MODULE-SPECIFIC SIZE TOKENS — Modal
       ========================================================================= */
    
    --token-modal-max-width: 28rem;                           /* 448px */
    --token-modal-width-mobile: 90%;
    
    /* =========================================================================
       MODULE-SPECIFIC SIZE TOKENS — Cards
       ========================================================================= */
    
    --token-card-padding: 1.5rem;                             /* 24px */
    --token-card-gap: 1rem;                                   /* 16px */
    --token-card-radius: 1.25rem;                             /* 20px */
    --token-card-hover-lift: -2px;
    --token-card-icon-size: 2.5rem;                           /* 40px */
    --token-card-header-border-width: 2px;
    
    /* =========================================================================
       MODULE-SPECIFIC SIZE TOKENS — Buttons
       ========================================================================= */
    
    --token-btn-padding-x: 1.5rem;                            /* 24px */
    --token-btn-padding-y: 0.75rem;                           /* 12px */
    --token-btn-radius: 1rem;                                 /* 16px */
    --token-btn-font-size: 0.875rem;                          /* 14px */
    --token-btn-font-weight: 700;
    --token-btn-hover-lift: -2px;
    
    /* =========================================================================
       MODULE-SPECIFIC SIZE TOKENS — Inputs
       ========================================================================= */
    
    --token-input-padding-x: 1rem;                            /* 16px */
    --token-input-padding-y: 0.75rem;                         /* 12px */
    --token-input-radius: 0.75rem;                            /* 12px */
    --token-input-border-width: 1px;
    --token-input-font-size: 1rem;                            /* 16px */
    --token-input-height: 2.75rem;                            /* 44px */
    
    /* =========================================================================
       MODULE-SPECIFIC SIZE TOKENS — Badges
       ========================================================================= */
    
    --token-badge-padding-x: 1rem;                            /* 16px */
    --token-badge-padding-y: 0.5rem;                          /* 8px */
    --token-badge-radius: 9999px;
    --token-badge-font-size: 0.75rem;                         /* 12px */
    --token-badge-font-weight: 600;
    
    /* =========================================================================
       MODULE-SPECIFIC SIZE TOKENS — Dropdown
       ========================================================================= */
    
    --token-dropdown-padding: 0.5rem;                         /* 8px */
    --token-dropdown-radius: 1rem;                            /* 16px */
    --token-dropdown-min-width: 200px;
    --token-dropdown-item-padding-x: 1rem;                    /* 16px */
    --token-dropdown-item-padding-y: 0.75rem;                 /* 12px */
    
    /* =========================================================================
       MODULE-SPECIFIC SIZE TOKENS — Sidebar
       ========================================================================= */
    
    --token-sidebar-width: 280px;
    --token-sidebar-collapsed-width: 64px;
    --token-sidebar-transition-duration: 0.3s;
    
    /* =========================================================================
       MODULE-SPECIFIC SIZE TOKENS — Dashboard
       ========================================================================= */
    
    --token-dashboard-padding: 1.5rem;                        /* 24px */
    --token-dashboard-gap: 1.5rem;                            /* 24px */
    --token-dashboard-grid-columns: 6;
    --token-dashboard-card-min-height: 200px;
    
    /* =========================================================================
       RESPONSIVE GRID — Auto-fit column sizes for CSS Grid
       Usage: grid-template-columns: repeat(auto-fit, minmax(var(--token-grid-min-*), 1fr))
       Name = MIN px width for each grid item
       ========================================================================= */
    
    --token-grid-min-150: 150px;    /* Tiny cards, icons */
    --token-grid-min-200: 200px;    /* Small cards */
    --token-grid-min-250: 250px;    /* Medium-small cards */
    --token-grid-min-280: 280px;    /* Medium cards (default) */
    --token-grid-min-320: 320px;    /* Medium-large cards */
    --token-grid-min-350: 350px;    /* Large cards */
    --token-grid-min-400: 400px;    /* Extra large cards */
    --token-grid-min-450: 450px;    /* Extra extra large cards */
    
    /* =========================================================================
       CONTAINER QUERY BREAKPOINTS — For @container rules
       Usage: @container (min-width: 400px) { }
       Name = px breakpoint value
       ========================================================================= */
    
    --token-container-200: 200px;
    --token-container-300: 300px;
    --token-container-400: 400px;
    --token-container-500: 500px;
    --token-container-600: 600px;
    --token-container-700: 700px;
    --token-container-800: 800px;
    --token-container-900: 900px;
    --token-container-1000: 1000px;
    --token-container-1200: 1200px;
}

/* =============================================================================
   END OF SIZE TOKEN SYSTEM
   ============================================================================= */