/**
 * Design Token System
 * Centralized design configuration for the application
 * 
 * This file contains all design decisions as CSS custom properties (design tokens)
 * that can be used throughout the application for consistent styling.
 */

:root {
    /* ============================================
       COLOR SYSTEM - Primary Palette
       ============================================ */
    
    /* Accent Blue - Primary Brand Color */
    --color-accent-blue: #355A86;
    --color-accent-blue-hover: #2a4a6e;
    --color-accent-blue-light: rgba(53, 90, 134, 0.1);
    --color-accent-blue-medium: rgba(53, 90, 134, 0.2);
    --color-accent-blue-dark: rgba(53, 90, 134, 0.3);
    
    /* Carbon Black - Primary Text */
    --color-primary: #0A0A0C;
    --color-primary-hover: #1A1A1D;
    
    /* Ivory - Secondary Background */
    --color-secondary: #F7F4F0;
    --color-secondary-hover: #EDE9E4;
    
    /* ============================================
       COLOR SYSTEM - Neutral Grays
       ============================================ */
    
    --color-gray-100: #F6F6F7;
    --color-gray-200: #E4E4E5;
    --color-gray-300: #C9C9CA;
    --color-gray-400: #A4A4A7;
    --color-gray-500: #6E6E71;
    
    /* Semantic naming for grays */
    --color-border: #E4E4E5;
    --color-border-secondary: #C9C9CA;
    --color-text-primary: #0A0A0C;
    --color-text-secondary: #6E6E71;
    --color-text-tertiary: #A4A4A7;
    --color-text-quaternary: #C9C9CA;
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F6F6F7;
    --color-bg-tertiary: #F7F4F0;
    
    /* ============================================
       COLOR SYSTEM - Semantic Colors
       ============================================ */
    
    /* Success */
    --color-success: #2DAA61;
    --color-success-bg: rgba(45, 170, 97, 0.1);
    --color-success-light: rgba(45, 170, 97, 0.05);
    
    /* Warning */
    --color-warning: #F5B93A;
    --color-warning-bg: rgba(245, 185, 58, 0.1);
    --color-warning-light: rgba(245, 185, 58, 0.05);
    
    /* Error/Danger */
    --color-error: #D64545;
    --color-error-bg: rgba(214, 69, 69, 0.1);
    --color-error-light: rgba(214, 69, 69, 0.05);
    
    /* Info */
    --color-info: #3C6FA6;
    --color-info-bg: rgba(60, 111, 166, 0.1);
    --color-info-light: rgba(60, 111, 166, 0.05);
    
    /* ============================================
       COLOR SYSTEM - Additional Colors
       ============================================ */
    
    --color-secondary-accent: #47C8ED;
    --color-tertiary-accent: #FF6B2C;
    --color-orange: #f76631;
    
    /* White */
    --color-white: #FFFFFF;
    
    /* ============================================
       TYPOGRAPHY - Font Families
       ============================================ */
    
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --font-inter: 'Inter', sans-serif;
    
    /* ============================================
       TYPOGRAPHY - Font Sizes
       ============================================ */
    
    /* Heading Sizes */
    --font-size-h1: 3.5rem;          /* 56px - Main Title */
    --font-size-h2: 2rem;            /* 32px - Title 2 */
    --font-size-h3: 2.5rem;          /* 40px - Title 3 */
    --font-size-h4: 1.75rem;         /* 28px - Title 4 */
    
    /* Subtitle Sizes */
    --font-size-subtitle-1: 1.5rem;  /* 24px */
    --font-size-subtitle-2: 1.25rem; /* 20px */
    --font-size-subtitle-3: 1.15rem; /* 18.4px */
    --font-size-subtitle-4: 1.125rem; /* 18px */
    
    /* Body Text Sizes */
    --font-size-lg: 1rem;            /* 16px */
    --font-size-base: 0.875rem;      /* 14px - Default */
    --font-size-sm: 0.75rem;         /* 12px */
    --font-size-xs: 0.625rem;        /* 10px */
    
    /* Special Sizes */
    --font-size-button: 0.875rem;    /* 14px */
    --font-size-button-md: 0.75rem;  /* 12px */
    --font-size-caption: 0.75rem;    /* 12px */
    --font-size-label: 0.75rem;      /* 12px */
    
    /* ============================================
       TYPOGRAPHY - Font Weights
       ============================================ */
    
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ============================================
       TYPOGRAPHY - Line Heights
       ============================================ */
    
    --line-height-tight: 1.125;
    --line-height-normal: 1.2;
    --line-height-relaxed: 1.375;
    --line-height-loose: 1.5;
    --line-height-base: 1.4;
    --line-height-sm: 1.33;
    --line-height-xs: 1.25;
    
    /* ============================================
       SPACING SYSTEM
       ============================================ */
    
    /* Base spacing unit */
    --spacing-unit: 4px;
    
    /* Spacing Scale */
    --spacing-0: 0;
    --spacing-1: 0.25rem;   /* 4px */
    --spacing-2: 0.5rem;    /* 8px */
    --spacing-3: 0.75rem;   /* 12px */
    --spacing-4: 1rem;      /* 16px */
    --spacing-5: 1.25rem;   /* 20px */
    --spacing-6: 1.5rem;    /* 24px */
    --spacing-8: 2rem;      /* 32px */
    --spacing-10: 2.5rem;   /* 40px */
    --spacing-12: 3rem;     /* 48px */
    --spacing-16: 4rem;     /* 64px */
    --spacing-20: 5rem;     /* 80px */
    --spacing-24: 6rem;     /* 96px */
    
    /* Padding */
    --padding-xs: 0.375rem 0.94rem;  /* 6px 15px */
    --padding-sm: 0.68rem 1.75rem;   /* 10.88px 28px */
    --padding-md: 1rem 2.25rem;      /* 16px 36px */
    --padding-lg: 1.5rem 2.5rem;     /* 24px 40px */
    --padding-xl: 2rem 3rem;         /* 32px 48px */
    
    /* Input Padding */
    --padding-input-sm: 12px 16px;
    --padding-input-md: 16px 20px;
    --padding-input-lg: 21px 32px;
    
    /* Section Padding */
    --padding-section-sm: 40px 0;
    --padding-section-md: 60px 0;
    --padding-section-lg: 100px 0;
    --padding-section-xl: 120px 0;
    
    /* ============================================
       BORDER RADIUS
       ============================================ */
    
    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 50%;
    --radius-pill: 37px;
    
    /* Semantic Border Radius */
    --radius-button: var(--radius-lg);      /* 12px */
    --radius-input: var(--radius-lg);       /* 12px */
    --radius-card: var(--radius-xl);        /* 16px */
    --radius-modal: var(--radius-xl);       /* 16px */
    --radius-badge: var(--radius-xs);       /* 4px */
    --radius-tag: var(--radius-pill);       /* 37px/48px */
    
    /* ============================================
       BORDERS
       ============================================ */
    
    --border-width-none: 0;
    --border-width-thin: 1px;
    --border-width-base: 2px;
    --border-width-thick: 3px;
    
    --border-style-solid: solid;
    --border-style-dashed: dashed;
    --border-style-dotted: dotted;
    
    --border-color-default: var(--color-border);
    --border-color-focus: var(--color-accent-blue);
    --border-color-error: var(--color-error);
    
    /* ============================================
       SHADOWS
       ============================================ */
    
    /* Subtle shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 6px 16px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 8px 24px rgba(0, 0, 0, 0.2);
    
    /* Colored shadows for accent */
    --shadow-accent-sm: 0 2px 8px rgba(53, 90, 134, 0.2);
    --shadow-accent-md: 0 4px 12px rgba(53, 90, 134, 0.3);
    --shadow-accent-lg: 0 6px 16px rgba(53, 90, 134, 0.4);
    
    /* Focus shadows */
    --shadow-focus: 0 0 0 3px rgba(53, 90, 134, 0.1);
    --shadow-focus-error: 0 0 0 3px rgba(214, 69, 69, 0.1);
    
    /* Hover shadows */
    --shadow-hover-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-hover-md: 0 6px 16px rgba(53, 90, 134, 0.3);
    
    /* ============================================
       TRANSITIONS & ANIMATIONS
       ============================================ */
    
    /* Duration */
    --duration-instant: 0ms;
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 500ms;
    
    /* Easing */
    --easing-linear: linear;
    --easing-ease-in: ease-in;
    --easing-ease-out: ease-out;
    --easing-ease-in-out: ease-in-out;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
    
    /* Standard Transitions */
    --transition-fast: all var(--duration-fast) var(--easing-ease-in-out);
    --transition-base: all var(--duration-base) var(--easing-ease-in-out);
    --transition-slow: all var(--duration-slow) var(--easing-ease-in-out);
    
    /* Specific Transitions */
    --transition-color: color var(--duration-base) var(--easing-ease-in-out);
    --transition-bg: background-color var(--duration-base) var(--easing-ease-in-out);
    --transition-transform: transform var(--duration-base) var(--easing-ease-in-out);
    --transition-shadow: box-shadow var(--duration-base) var(--easing-ease-in-out);
    --transition-opacity: opacity var(--duration-base) var(--easing-ease-in-out);
    
    /* ============================================
       TRANSFORMS
       ============================================ */
    
    --transform-hover-lift: translateY(-2px);
    --transform-hover-lift-sm: translateY(-1px);
    --transform-hover-scale: scale(1.05);
    --transform-hover-scale-sm: scale(1.02);
    --transform-active-scale: scale(0.98);
    
    /* ============================================
       BUTTON STYLES
       ============================================ */
    
    /* Primary Button */
    --button-primary-bg: var(--color-accent-blue);
    --button-primary-color: var(--color-white);
    --button-primary-border: var(--color-accent-blue);
    --button-primary-hover-bg: var(--color-accent-blue-hover);
    --button-primary-hover-color: var(--color-white);
    --button-primary-hover-border: var(--color-accent-blue-hover);
    --button-primary-shadow: var(--shadow-accent-sm);
    --button-primary-hover-shadow: var(--shadow-accent-md);
    
    /* Secondary/Outline Button */
    --button-secondary-bg: transparent;
    --button-secondary-color: var(--color-accent-blue);
    --button-secondary-border: var(--color-accent-blue);
    --button-secondary-hover-bg: var(--color-accent-blue);
    --button-secondary-hover-color: var(--color-white);
    --button-secondary-hover-border: var(--color-accent-blue);
    
    /* Button Sizes */
    --button-height-sm: 32px;
    --button-height-md: 40px;
    --button-height-lg: 50px;
    --button-padding-sm: var(--padding-xs);
    --button-padding-md: var(--padding-md);
    --button-padding-lg: var(--padding-lg);
    
    /* ============================================
       STATUS ACTION BUTTONS (Table Action Buttons)
       ============================================ */
    
    /* Base Status Action Button */
    --status-action-btn-display: inline-flex;
    --status-action-btn-align-items: center;
    --status-action-btn-justify-content: center;
    --status-action-btn-gap: var(--spacing-1, 4px);
    --status-action-btn-padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
    --status-action-btn-border-radius: 8px;
    --status-action-btn-font-size: var(--font-size-button-md, 0.75rem);
    --status-action-btn-font-weight: var(--font-weight-semibold, 600);
    --status-action-btn-font-family: var(--font-body, 'Inter', sans-serif);
    --status-action-btn-line-height: var(--line-height-tight, 1.2);
    --status-action-btn-white-space: nowrap;
    --status-action-btn-cursor: pointer;
    --status-action-btn-transition: var(--transition-base, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    --status-action-btn-user-select: none;
    --status-action-btn-border: none;
    --status-action-btn-text-decoration: none;
    --status-action-btn-min-width: 60px;
    --status-action-btn-min-height: 32px;
    --status-action-btn-box-sizing: border-box;
    --status-action-btn-icon-size: var(--font-size-sm, 0.75rem);
    --status-action-btn-hover-transform: var(--transform-hover-lift-sm, translateY(-1px));
    --status-action-btn-hover-shadow: var(--shadow-md, 0 4px 8px rgba(0,0,0,0.15));
    --status-action-btn-active-transform: translateY(0);
    
    /* Status View Button (Info Blue) */
    --status-view-btn-bg: linear-gradient(135deg, var(--color-info, #3C6FA6) 0%, rgba(60, 111, 166, 0.9) 100%);
    --status-view-btn-color: var(--color-white, #ffffff);
    --status-view-btn-shadow: var(--shadow-info-sm, 0 2px 6px rgba(60, 111, 166, 0.3));
    --status-view-btn-hover-bg: linear-gradient(135deg, rgba(60, 111, 166, 0.9) 0%, rgba(60, 111, 166, 0.85) 100%);
    --status-view-btn-hover-shadow: var(--shadow-info-md, 0 4px 12px rgba(60, 111, 166, 0.4));
    --status-view-btn-hover-color: var(--color-white, #ffffff);
    
    /* Status Delete Button (Error Red) */
    --status-delete-btn-bg: linear-gradient(135deg, var(--color-error, #D64545) 0%, rgba(214, 69, 69, 0.9) 100%);
    --status-delete-btn-color: var(--color-white, #ffffff);
    --status-delete-btn-shadow: var(--shadow-error-sm, 0 2px 6px rgba(214, 69, 69, 0.3));
    --status-delete-btn-hover-bg: linear-gradient(135deg, rgba(214, 69, 69, 0.9) 0%, rgba(214, 69, 69, 0.85) 100%);
    --status-delete-btn-hover-shadow: var(--shadow-error-md, 0 4px 12px rgba(214, 69, 69, 0.4));
    --status-delete-btn-hover-color: var(--color-white, #ffffff);
    
    /* Status Edit Button (Accent Blue) */
    --status-edit-btn-bg: linear-gradient(135deg, var(--color-accent-blue, #355A86) 0%, rgba(53, 90, 134, 0.9) 100%);
    --status-edit-btn-color: var(--color-white, #ffffff);
    --status-edit-btn-shadow: var(--shadow-accent-sm, 0 2px 6px rgba(53, 90, 134, 0.3));
    --status-edit-btn-hover-bg: linear-gradient(135deg, rgba(53, 90, 134, 0.9) 0%, rgba(53, 90, 134, 0.85) 100%);
    --status-edit-btn-hover-shadow: var(--shadow-accent-md, 0 4px 12px rgba(53, 90, 134, 0.4));
    --status-edit-btn-hover-color: var(--color-white, #ffffff);
    
    /* Status File Button (Info Blue - same as view) */
    --status-file-btn-bg: var(--status-view-btn-bg);
    --status-file-btn-color: var(--status-view-btn-color);
    --status-file-btn-shadow: var(--status-view-btn-shadow);
    --status-file-btn-hover-bg: var(--status-view-btn-hover-bg);
    --status-file-btn-hover-shadow: var(--status-view-btn-hover-shadow);
    --status-file-btn-hover-color: var(--status-view-btn-hover-color);
    
    /* Status Invoice Button (Accent Blue - same as edit) */
    --status-invoice-btn-bg: var(--status-edit-btn-bg);
    --status-invoice-btn-color: var(--status-edit-btn-color);
    --status-invoice-btn-shadow: var(--status-edit-btn-shadow);
    --status-invoice-btn-hover-bg: var(--status-edit-btn-hover-bg);
    --status-invoice-btn-hover-shadow: var(--status-edit-btn-hover-shadow);
    --status-invoice-btn-hover-color: var(--status-edit-btn-hover-color);
    
    /* ============================================
       STATUS TOGGLE BADGES (Status/Publishing Status Toggles)
       ============================================ */
    
    --status-toggle-badge-display: inline-flex;
    --status-toggle-badge-align-items: center;
    --status-toggle-badge-justify-content: center;
    --status-toggle-badge-padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
    --status-toggle-badge-border-radius: 8px;
    --status-toggle-badge-font-size: var(--font-size-button-md, 0.75rem);
    --status-toggle-badge-font-weight: var(--font-weight-semibold, 600);
    --status-toggle-badge-font-family: var(--font-body, 'Inter', sans-serif);
    --status-toggle-badge-line-height: var(--line-height-tight, 1.2);
    --status-toggle-badge-white-space: nowrap;
    --status-toggle-badge-cursor: pointer;
    --status-toggle-badge-transition: var(--transition-base, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    --status-toggle-badge-user-select: none;
    --status-toggle-badge-position: relative;
    --status-toggle-badge-overflow: hidden;
    --status-toggle-badge-min-width: 70px;
    --status-toggle-badge-min-height: 32px;
    --status-toggle-badge-box-sizing: border-box;
    --status-toggle-badge-text-align: center;
    
    /* Status Badge Success (Approved/Published) */
    --status-badge-success-bg: linear-gradient(135deg, var(--color-success, #2DAA61) 0%, rgba(45, 170, 97, 0.9) 100%);
    --status-badge-success-color: var(--color-white, #ffffff);
    --status-badge-success-shadow: var(--shadow-success-sm, 0 2px 6px rgba(45, 170, 97, 0.3));
    --status-badge-success-hover-bg: linear-gradient(135deg, rgba(45, 170, 97, 0.9) 0%, rgba(45, 170, 97, 0.85) 100%);
    --status-badge-success-hover-shadow: var(--shadow-success-md, 0 4px 12px rgba(45, 170, 97, 0.4));
    
    /* Status Badge Warning (Pending/Unpublished) */
    --status-badge-warning-bg: linear-gradient(135deg, var(--color-warning, #F5B93A) 0%, rgba(245, 185, 58, 0.9) 100%);
    --status-badge-warning-color: var(--color-white, #ffffff);
    --status-badge-warning-shadow: var(--shadow-warning-sm, 0 2px 6px rgba(245, 185, 58, 0.3));
    --status-badge-warning-hover-bg: linear-gradient(135deg, rgba(245, 185, 58, 0.9) 0%, rgba(245, 185, 58, 0.85) 100%);
    --status-badge-warning-hover-shadow: var(--shadow-warning-md, 0 4px 12px rgba(245, 185, 58, 0.4));
    
    /* ============================================
       BULK ACTION BUTTONS (Approve All, Publish All)
       ============================================ */
    
    --bulk-action-btn-display: inline-flex;
    --bulk-action-btn-align-items: center;
    --bulk-action-btn-gap: var(--spacing-1, 4px);
    --bulk-action-btn-padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
    --bulk-action-btn-border-radius: 8px;
    --bulk-action-btn-font-size: var(--font-size-button-md, 0.75rem);
    --bulk-action-btn-font-weight: var(--font-weight-semibold, 600);
    --bulk-action-btn-font-family: var(--font-body, 'Inter', sans-serif);
    --bulk-action-btn-line-height: var(--line-height-tight, 1.2);
    --bulk-action-btn-white-space: nowrap;
    --bulk-action-btn-cursor: pointer;
    --bulk-action-btn-transition: var(--transition-base, all 0.3s cubic-bezier(0.4, 0, 0.2, 1));
    --bulk-action-btn-user-select: none;
    --bulk-action-btn-border: none;
    --bulk-action-btn-text-decoration: none;
    --bulk-action-btn-min-width: 60px;
    --bulk-action-btn-min-height: 32px;
    --bulk-action-btn-box-sizing: border-box;
    --bulk-action-btn-margin-left: var(--spacing-2, 8px);
    --bulk-action-btn-icon-size: var(--font-size-sm, 0.75rem);
    --bulk-action-btn-hover-transform: var(--transform-hover-lift-sm, translateY(-1px));
    --bulk-action-btn-active-transform: translateY(0);
    
    /* Bulk Approve Button (Success Green) */
    --bulk-approve-btn-bg: linear-gradient(135deg, var(--color-success, #2DAA61) 0%, rgba(45, 170, 97, 0.9) 100%);
    --bulk-approve-btn-color: var(--color-white, #ffffff);
    --bulk-approve-btn-shadow: var(--shadow-success-sm, 0 2px 4px rgba(45, 170, 97, 0.3));
    --bulk-approve-btn-hover-bg: linear-gradient(135deg, rgba(45, 170, 97, 0.9) 0%, rgba(45, 170, 97, 0.85) 100%);
    --bulk-approve-btn-hover-shadow: var(--shadow-success-md, 0 4px 8px rgba(45, 170, 97, 0.4));
    
    /* Bulk Publish Button (Accent Blue) */
    --bulk-publish-btn-bg: linear-gradient(135deg, var(--color-accent-blue, #355A86) 0%, rgba(53, 90, 134, 0.9) 100%);
    --bulk-publish-btn-color: var(--color-white, #ffffff);
    --bulk-publish-btn-shadow: var(--shadow-accent-sm, 0 2px 4px rgba(53, 90, 134, 0.3));
    --bulk-publish-btn-hover-bg: linear-gradient(135deg, rgba(53, 90, 134, 0.9) 0%, rgba(53, 90, 134, 0.85) 100%);
    --bulk-publish-btn-hover-shadow: var(--shadow-accent-md, 0 4px 8px rgba(53, 90, 134, 0.4));
    
    /* ============================================
       FORM ELEMENTS
       ============================================ */
    
    /* Input */
    --input-height-sm: 40px;
    --input-height-md: 48px;
    --input-height-lg: 56px;
    --input-bg: var(--color-bg-primary);
    --input-border: var(--border-width-base) var(--border-style-solid) var(--color-border);
    --input-border-focus: var(--border-width-base) var(--border-style-solid) var(--color-accent-blue);
    --input-border-error: var(--border-width-base) var(--border-style-solid) var(--color-error);
    --input-radius: var(--radius-button);
    --input-padding: var(--padding-input-md);
    --input-color: var(--color-text-primary);
    --input-placeholder-color: var(--color-text-secondary);
    
    /* Select */
    --select-bg: var(--color-bg-primary);
    --select-border: var(--input-border);
    --select-radius: var(--input-radius);
    
    /* Checkbox & Radio */
    --checkbox-size: 1em;
    --checkbox-border: var(--border-width-base) var(--border-style-solid) var(--color-border);
    --checkbox-border-checked: var(--color-accent-blue);
    --checkbox-bg-checked: var(--color-accent-blue);
    --checkbox-radius: var(--radius-xs);
    
    /* ============================================
       TABLE WRAPPER STYLES (Prevent Nested Scrollbars)
       ============================================ */
    
    /* Table Container Overflow - Prevent nested vertical scrollbars */
    --table-wrapper-overflow-x: hidden;
    --table-wrapper-overflow-y: visible;
    --table-wrapper-overflow: visible;
    --table-wrapper-width: 100%;
    --table-wrapper-max-width: 100%;
    --table-wrapper-height: auto;
    --table-wrapper-max-height: none;
    
    /* DataTables Wrapper - Prevent nested scrollbars */
    --datatables-wrapper-overflow-x: hidden;
    --datatables-wrapper-overflow-y: visible;
    --datatables-wrapper-overflow: visible;
    --datatables-wrapper-width: 100%;
    --datatables-wrapper-max-width: 100%;
    --datatables-wrapper-height: auto;
    --datatables-wrapper-max-height: none;
    
    /* Table Responsive Container - Prevent nested scrollbars */
    --table-responsive-overflow-x: hidden;
    --table-responsive-overflow-y: visible;
    --table-responsive-overflow: visible;
    --table-responsive-width: 100%;
    --table-responsive-max-width: 100%;
    --table-responsive-height: auto;
    --table-responsive-max-height: none;
    
    /* Card Body - Prevent nested scrollbars */
    --card-body-overflow-x: hidden;
    --card-body-overflow-y: visible;
    --card-body-overflow: visible;
    
    /* ============================================
       CARD STYLES
       ============================================ */
    
    --card-bg: var(--color-bg-primary);
    --card-border: var(--border-width-thin) var(--border-style-solid) var(--color-border);
    --card-radius: var(--radius-card);
    --card-padding: var(--spacing-6);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg);
    
    /* ============================================
       MODAL STYLES
       ============================================ */
    
    --modal-radius: var(--radius-modal);
    --modal-backdrop: rgba(0, 0, 0, 0.5);
    --modal-shadow: var(--shadow-2xl);
    
    /* ============================================
       BREAKPOINTS (for reference - use in media queries)
       ============================================ */
    
    /* Note: These are for reference. Use standard media queries:
       @media (max-width: 575.98px) { }  // Mobile
       @media (max-width: 767.98px) { }  // Tablet
       @media (max-width: 991.98px) { }  // Small Desktop
       @media (max-width: 1199.98px) { } // Medium Desktop
       @media (max-width: 1399.98px) { } // Large Desktop
    */
    
    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    
    --z-index-base: 0;
    --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;
    --z-index-toast: 1080;
    --z-index-table-action-menu: 1000;
    --z-index-table-action-menu-active: 100000;
    --z-index-table-action-menu-dropdown: 99999;
    
    /* ============================================
       TABLE ACTION MENU (Three-Dot Button)
       ============================================ */
    
    /* Button */
    --table-action-menu-button-size: 32px;
    --table-action-menu-button-bg: var(--color-bg-secondary, #F6F6F7);
    --table-action-menu-button-border: var(--border-width-thin, 1px) var(--border-style-solid, solid) var(--color-border, #E4E4E5);
    --table-action-menu-button-color: var(--color-text-primary, #0A0A0C);
    --table-action-menu-button-radius: var(--radius-md, 8px);
    --table-action-menu-button-icon-size: 1rem;
    
    /* Dropdown */
    --table-action-menu-dropdown-position: absolute;
    --table-action-menu-dropdown-top: 100%;
    --table-action-menu-dropdown-right: 0;
    --table-action-menu-dropdown-margin-top: var(--spacing-2, 0.5rem);
    --table-action-menu-dropdown-bg: var(--color-bg-primary, #FFFFFF);
    --table-action-menu-dropdown-border: var(--border-width-thin, 1px) var(--border-style-solid, solid) var(--color-border, #E4E4E5);
    --table-action-menu-dropdown-radius: var(--radius-md, 8px);
    --table-action-menu-dropdown-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08));
    --table-action-menu-dropdown-min-width: 180px;
    --table-action-menu-dropdown-padding: var(--spacing-2, 0.5rem) 0;
    --table-action-menu-dropdown-z-index: var(--z-index-table-action-menu-dropdown, 99999);
    
    /* Dropdown Animation */
    --table-action-menu-dropdown-opacity-hidden: 0;
    --table-action-menu-dropdown-opacity-visible: 1;
    --table-action-menu-dropdown-transform-hidden: translateY(-6px);
    --table-action-menu-dropdown-transform-visible: translateY(0);
    --table-action-menu-dropdown-transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    
    /* Menu Item */
    --table-action-menu-item-padding: var(--spacing-2, 0.5rem) var(--spacing-4, 1rem);
    --table-action-menu-item-color: var(--color-text-primary, #0A0A0C);
    --table-action-menu-item-font-size: var(--font-size-sm, 0.875rem);
    --table-action-menu-item-gap: var(--spacing-2, 0.5rem);
    --table-action-menu-item-hover-bg: var(--color-bg-secondary, #F6F6F7);
    --table-action-menu-item-hover-color: var(--color-accent-blue, #355A86);
    --table-action-menu-item-transition: var(--transition-base, all 0.3s ease);
    
    /* Container */
    --table-action-menu-container-position: relative;
    --table-action-menu-container-overflow: visible;
    --table-action-menu-container-z-index: var(--z-index-table-action-menu, 1000);
    --table-action-menu-container-z-index-active: var(--z-index-table-action-menu-active, 100000);
    
    /* ============================================
       LEGACY COMPATIBILITY (Maintain existing variable names)
       ============================================ */
    
    /* Map to existing variable names used in codebase */
    --main-color-one: var(--color-accent-blue);
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --paragraph-color: var(--color-text-secondary);
    --border-color: var(--color-border);
    --scolor1: var(--color-gray-100);
    --scolor2: var(--color-secondary);
    --scolor3: var(--color-primary);
    --scolor4: var(--color-warning);
    --scolor5: var(--color-success);
    --scolor6: var(--color-error);
    --scolor7: var(--color-secondary-hover);
    
    --success: var(--color-success);
    --success-bg: var(--color-success-bg);
    --warning: var(--color-warning);
    --warning-bg: var(--color-warning-bg);
    --danger: var(--color-error);
    --danger-bg: var(--color-error-bg);
    --info: var(--color-info);
    --info-bg: var(--color-info-bg);
    
    --heading-font: var(--font-heading);
    --body-font: var(--font-body);
    --inter-font: var(--font-inter);
}

/* ============================================
   DARK MODE SUPPORT (Future Enhancement)
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Dark mode tokens can be added here when needed */
}