:root {
    /* Primary Brand - aligned with main page */
    --hawx-teal: #637675;
    --hawx-teal-dark: #546463;
    --hawx-teal-light: #e8eeee;
    --hawx-gold: #EAB749;
    --hawx-gold-dark: #DFAA3A;

    /* Grays */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;

    /* Status Colors - aligned with main page */
    --success: #57c95a;
    --success-dark: #4caf50;
    --success-hover: #4caf50;
    --success-bg: #e8f5e9;
    --warning: #ff9800;
    --warning-dark: #f57c00;
    --warning-bg: #fff3e0;
    --error: #e96666;
    --error-dark: #cf5a5a;
    --error-hover: #cf5a5a;
    --error-bg: #ffebee;
    --info: #2196f3;
    --info-dark: #1976d2;
    --info-bg: #e3f2fd;
    --purple: #7c3aed;
    --purple-bg: #ede9fe;
    

    /* Highlighting System - for scannable data */
    --highlight-date: #f0f9ff;
    --highlight-date-border: #bae6fd;
    --highlight-date-text: #0c4a6e;
    --highlight-amount: #fffbeb;
    --highlight-amount-border: #fde68a;
    --highlight-amount-text: #92400e;
    --highlight-next: #f0fdf4;
    --highlight-next-border: #bbf7d0;
    --highlight-next-text: #166534;

    /* Typography */
    --font: 'DM Sans', system-ui, sans-serif;
    --mono: 'JetBrains Mono', monospace;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-focus: 0 0 0 2px rgba(99, 118, 117, 0.2);


    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;


    /* Background colors for dark mode transitions */
    --bg-primary: #ffffff;
    --bg-secondary: var(--gray-50);
    --bg-tertiary: var(--gray-100);
    --text-primary: var(--gray-800);
    --text-secondary: var(--gray-700);
    --text-muted: var(--gray-500);
    --border-color: var(--gray-200);
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --modal-bg: #ffffff;
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --form-background: #EDEDED;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE - Theme Override
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Grays - Inverted for dark mode */
    --gray-50: #1a1a1a;
    --gray-100: #242424;
    --gray-200: #2d2d2d;
    --gray-300: #404040;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;

    /* Adjusted brand colors for dark mode */
    --hawx-teal: #7a9392;
    --hawx-teal-dark: #8ca8a7;
    --hawx-teal-light: #2d3b3a;
    --hawx-gold: #EAB749;
    --hawx-gold-dark: #f5c661;

    /* Status Colors - darker backgrounds for dark mode */
    --success-bg: #1a2e1a;
    --warning-bg: #2e2418;
    --error-bg: #2e1a1a;
    --info-bg: #1a2430;
    --purple-bg: #261a36;

    /* Highlighting System - dark mode */
    --highlight-date: #1a2e3a;
    --highlight-date-border: #2d4a5a;
    --highlight-date-text: #7dd3fc;
    --highlight-amount: #2e2a1a;
    --highlight-amount-border: #4a4020;
    --highlight-amount-text: #fde68a;
    --highlight-next: #1a2e1a;
    --highlight-next-border: #2d4a2d;
    --highlight-next-text: #86efac;

    /* Background colors */
    --bg-primary: #121212;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #242424;
    --text-primary: #f3f4f6;
    --text-secondary: #e5e7eb;
    --text-muted: #9ca3af;
    --border-color: #2d2d2d;
    --card-bg: #1a1a1a;
    --input-bg: #242424;
    --modal-bg: #1a1a1a;
    --overlay-bg: rgba(0, 0, 0, 0.7);

    /* Shadows - more subtle in dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-focus: 0 0 0 2px rgba(122, 147, 146, 0.4);
}