/**
 * GLOBAL DESIGN SYSTEM
 * Logistics Solution - Design Tokens & Standards
 * 
 * This file contains all design tokens, variables, and base styles
 * that define the visual language of the application.
 */

/* ============================================
   DESIGN TOKENS - COLORS
   ============================================ */
:root {
    /* Brand Colors - Primary Palette */
    --color-primary: #232D85;           /* Dark Blue/Navy - Primary text, headings, buttons */
    --color-primary-dark: #1A2368;      /* Darker shade for hover states */
    --color-primary-light: #2D3A9E;     /* Lighter shade for accents */
    --color-accent: #CFA64E;            /* Golden Yellow - Highlights, accents, CTAs */
    --color-accent-dark: #B8923F;       /* Darker golden for hover */
    --color-accent-light: #E5B85F;      /* Lighter golden for subtle accents */
    
    /* Neutral Colors */
    --color-white: #FFFFFF;             /* Primary background */
    --color-gray-50: #FAFAFA;           /* Lightest gray */
    --color-gray-100: #F5F5F5;          /* Light gray - Secondary background */
    --color-gray-200: #E8E8E8;          /* Border color */
    --color-gray-300: #D3D3D3;          /* Disabled elements */
    --color-gray-400: #A8A8A8;          /* Placeholder text */
    --color-gray-500: #888888;          /* Secondary text */
    --color-gray-600: #666666;          /* Text light variant */
    --color-gray-700: #444444;          /* Body text */
    --color-gray-800: #333333;          /* Deep grey - Contrast accent */
    --color-gray-900: #222222;          /* Darkest gray */
    
    /* Semantic Colors */
    --color-success: #10B981;           /* Success states */
    --color-error: #EF4444;             /* Error states */
    --color-warning: #F59E0B;           /* Warning states */
    --color-info: #3B82F6;              /* Informational states */
    
    /* Background Colors */
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-100);
    --bg-accent: var(--color-accent);
    --bg-dark: var(--color-primary);
    
    /* Text Colors */
    --text-primary: var(--color-gray-800);
    --text-secondary: var(--color-gray-600);
    --text-light: var(--color-gray-500);
    --text-inverse: var(--color-white);
    --text-link: var(--color-primary);
    --text-link-hover: var(--color-accent);
    
    /* Border Colors */
    --border-color: var(--color-gray-200);
    --border-color-dark: var(--color-gray-300);
    --border-color-accent: var(--color-accent);
}

/* ============================================
   DESIGN TOKENS - TYPOGRAPHY
   ============================================ */
:root {
    /* Font Families */
    --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Font Sizes - Type Scale */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --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 */
    --font-size-6xl: 3.75rem;     /* 60px */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* Letter Spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
}

/* ============================================
   DESIGN TOKENS - SPACING
   ============================================ */
:root {
    /* Base spacing unit - 4px */
    --spacing-unit: 4px;
    
    /* Spacing Scale */
    --spacing-0: 0;
    --spacing-1: calc(var(--spacing-unit) * 1);   /* 4px */
    --spacing-2: calc(var(--spacing-unit) * 2);   /* 8px */
    --spacing-3: calc(var(--spacing-unit) * 3);   /* 12px */
    --spacing-4: calc(var(--spacing-unit) * 4);   /* 16px */
    --spacing-5: calc(var(--spacing-unit) * 5);   /* 20px */
    --spacing-6: calc(var(--spacing-unit) * 6);   /* 24px */
    --spacing-8: calc(var(--spacing-unit) * 8);   /* 32px */
    --spacing-10: calc(var(--spacing-unit) * 10); /* 40px */
    --spacing-12: calc(var(--spacing-unit) * 12); /* 48px */
    --spacing-16: calc(var(--spacing-unit) * 16); /* 64px */
    --spacing-20: calc(var(--spacing-unit) * 20); /* 80px */
    --spacing-24: calc(var(--spacing-unit) * 24); /* 96px */
    
    /* Semantic Spacing */
    --spacing-xs: var(--spacing-2);
    --spacing-sm: var(--spacing-4);
    --spacing-md: var(--spacing-6);
    --spacing-lg: var(--spacing-8);
    --spacing-xl: var(--spacing-12);
    --spacing-2xl: var(--spacing-16);
    --spacing-3xl: var(--spacing-24);
}

/* ============================================
   DESIGN TOKENS - BORDERS & RADIUS
   ============================================ */
:root {
    /* Border Width */
    --border-width: 1px;
    --border-width-2: 2px;
    --border-width-3: 3px;
    --border-width-4: 4px;
    
    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-base: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;
    
    /* Border Style */
    --border-style: solid;
}

/* ============================================
   DESIGN TOKENS - SHADOWS
   ============================================ */
:root {
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-base: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/* ============================================
   DESIGN TOKENS - TRANSITIONS & ANIMATIONS
   ============================================ */
:root {
    /* Transition Durations */
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;
    
    /* Transition Timing Functions */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Standard Transitions */
    --transition-base: all var(--duration-base) var(--ease-in-out);
    --transition-fast: all var(--duration-fast) var(--ease-out);
    --transition-slow: all var(--duration-slow) var(--ease-in-out);
}

/* ============================================
   DESIGN TOKENS - BREAKPOINTS
   ============================================ */
:root {
    --breakpoint-xs: 480px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* Container Max Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
}

/* ============================================
   DESIGN TOKENS - Z-INDEX SCALE
   ============================================ */
:root {
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
}

/* ============================================
   BASE STYLES & RESET
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* ============================================
   GLOBAL TYPOGRAPHY SYSTEM
   ============================================ */

/* ============================================
   HEADINGS - Hierarchical Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-6);
    letter-spacing: var(--letter-spacing-tight);
}

h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tighter);
    margin-bottom: var(--spacing-6);
}

h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-5);
}

h3 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-5);
}

h4 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-4);
}

h5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-4);
}

h6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-4);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Heading Group - Remove bottom margin from last heading */
.heading-group h1:last-child,
.heading-group h2:last-child,
.heading-group h3:last-child,
.heading-group h4:last-child,
.heading-group h5:last-child,
.heading-group h6:last-child {
    margin-bottom: 0;
}

/* ============================================
   BODY TEXT & PARAGRAPHS
   ============================================ */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
}

/* Lead/Intro Text - Larger introductory paragraph */
.lead,
p.lead {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-6);
}

/* Small Text */
small,
.small {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

/* Tiny Text */
.text-tiny {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

/* ============================================
   LINKS
   ============================================ */
a {
    color: var(--text-link);
    text-decoration: none;
    transition: var(--transition-base);
    cursor: pointer;
}

a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

a:active {
    color: var(--color-primary-dark);
}

/* Link Variations */
.link-primary {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

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

.link-accent {
    color: var(--color-accent);
    font-weight: var(--font-weight-medium);
}

.link-accent:hover {
    color: var(--color-accent-dark);
}

.link-secondary {
    color: var(--text-secondary);
}

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

.link-underline {
    text-decoration: underline;
    text-decoration-color: var(--color-gray-300);
    text-underline-offset: 3px;
}

.link-underline:hover {
    text-decoration-color: var(--color-accent);
}

.link-no-underline {
    text-decoration: none;
}

.link-no-underline:hover {
    text-decoration: underline;
}

/* ============================================
   EMPHASIS & STRONG
   ============================================ */
em,
.italic {
    font-style: italic;
}

strong,
b,
.bold {
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

mark,
.mark {
    background-color: var(--color-accent-light);
    color: var(--color-primary);
    padding: 0 var(--spacing-1);
    border-radius: var(--radius-sm);
}

/* ============================================
   LISTS
   ============================================ */
ul,
ol {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
    padding-left: var(--spacing-6);
    line-height: var(--line-height-relaxed);
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    margin-bottom: var(--spacing-2);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
}

li > ul,
li > ol {
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

/* List Unstyled */
.list-unstyled {
    list-style: none;
    padding-left: 0;
}

.list-unstyled li {
    margin-bottom: var(--spacing-3);
}

/* List Inline */
.list-inline {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
}

/* Definition Lists */
dl {
    margin-top: 0;
    margin-bottom: var(--spacing-4);
}

dt {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-1);
}

dd {
    margin-left: var(--spacing-6);
    margin-bottom: var(--spacing-4);
    color: var(--text-primary);
}

/* ============================================
   BLOCKQUOTES
   ============================================ */
blockquote {
    margin: var(--spacing-6) 0;
    padding: var(--spacing-4) var(--spacing-6);
    border-left: var(--border-width-4) solid var(--color-accent);
    background-color: var(--bg-secondary);
    border-radius: var(--radius-base);
    font-size: var(--font-size-lg);
    font-style: italic;
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
}

blockquote p {
    margin-bottom: var(--spacing-2);
}

blockquote p:last-child {
    margin-bottom: 0;
}

blockquote cite {
    display: block;
    margin-top: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-style: normal;
    color: var(--text-light);
}

blockquote cite::before {
    content: '— ';
}

/* ============================================
   CODE & PRE
   ============================================ */
code,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: var(--spacing-1) var(--spacing-2);
    background-color: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-base);
    color: var(--color-primary);
}

pre {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    padding: var(--spacing-4);
    margin: var(--spacing-4) 0;
    background-color: var(--bg-secondary);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    color: var(--text-primary);
}

pre code {
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
}

kbd {
    background-color: var(--color-gray-800);
    color: var(--text-inverse);
    border-color: var(--color-gray-800);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ============================================
   HORIZONTAL RULE
   ============================================ */
hr {
    border: none;
    border-top: var(--border-width) solid var(--border-color);
    margin: var(--spacing-8) 0;
    background: none;
}

hr.divider-accent {
    border-top-color: var(--color-accent);
    border-top-width: var(--border-width-2);
}

hr.divider-primary {
    border-top-color: var(--color-primary);
    border-top-width: var(--border-width-2);
}

/* ============================================
   ABBREVIATIONS & ADDRESS
   ============================================ */
abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: none;
}

address {
    font-style: normal;
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
}

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

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

/* Font Size Utilities */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }
.text-6xl { font-size: var(--font-size-6xl) !important; }

/* Font Weight Utilities */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Font Style Utilities */
.italic { font-style: italic !important; }
.not-italic { font-style: normal !important; }

/* Text Color Utilities */
.text-primary { color: var(--color-primary) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-light { color: var(--text-light) !important; }
.text-inverse { color: var(--text-inverse) !important; }
.text-success { color: var(--color-success) !important; }
.text-error { color: var(--color-error) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }

/* Text Alignment Utilities */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Line Height Utilities */
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-snug { line-height: var(--line-height-snug) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }
.leading-loose { line-height: var(--line-height-loose) !important; }

/* Letter Spacing Utilities */
.tracking-tighter { letter-spacing: var(--letter-spacing-tighter) !important; }
.tracking-tight { letter-spacing: var(--letter-spacing-tight) !important; }
.tracking-normal { letter-spacing: var(--letter-spacing-normal) !important; }
.tracking-wide { letter-spacing: var(--letter-spacing-wide) !important; }
.tracking-wider { letter-spacing: var(--letter-spacing-wider) !important; }
.tracking-widest { letter-spacing: var(--letter-spacing-widest) !important; }

/* Text Transform Utilities */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* Text Decoration Utilities */
.underline { text-decoration: underline !important; }
.line-through { text-decoration: line-through !important; }
.no-underline { text-decoration: none !important; }

/* Text Truncation */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Text Selection */
::selection {
    background-color: var(--color-accent-light);
    color: var(--color-primary);
}

::-moz-selection {
    background-color: var(--color-accent-light);
    color: var(--color-primary);
}

/* Word Break */
.break-normal { word-break: normal; overflow-wrap: normal; }
.break-words { overflow-wrap: break-word; word-break: break-word; }
.break-all { word-break: break-all; }

/* Whitespace */
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */
@media (max-width: 1024px) {
    h1 { font-size: var(--font-size-4xl); }
    h2 { font-size: var(--font-size-3xl); }
    h3 { font-size: var(--font-size-2xl); }
}

@media (max-width: 768px) {
    h1 { 
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-5);
    }
    h2 { 
        font-size: var(--font-size-2xl);
        margin-bottom: var(--spacing-4);
    }
    h3 { 
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-4);
    }
    h4 { font-size: var(--font-size-lg); }
    h5 { font-size: var(--font-size-base); }
    h6 { font-size: var(--font-size-sm); }
    
    .lead,
    p.lead {
        font-size: var(--font-size-lg);
    }
    
    p {
        margin-bottom: var(--spacing-3);
    }
}

@media (max-width: 640px) {
    h1 { font-size: var(--font-size-2xl); }
    h2 { font-size: var(--font-size-xl); }
    h3 { font-size: var(--font-size-lg); }
    
    body {
        font-size: var(--font-size-sm);
    }
}

/* Spacing Utilities */
.m-0 { margin: var(--spacing-0); }
.m-1 { margin: var(--spacing-1); }
.m-2 { margin: var(--spacing-2); }
.m-3 { margin: var(--spacing-3); }
.m-4 { margin: var(--spacing-4); }
.m-6 { margin: var(--spacing-6); }
.m-8 { margin: var(--spacing-8); }

.p-0 { padding: var(--spacing-0); }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

.mb-0 { margin-bottom: var(--spacing-0); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }

.mt-0 { margin-top: var(--spacing-0); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }

/* Display Utilities */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none; }

/* Flexbox Utilities */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }

/* Border Utilities */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-base); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow Utilities */
.shadow-none { box-shadow: none; }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-base); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }