/*
 * variables.css
 * CSS custom properties (design tokens) for the customer panel.
 * Defines: brand colors, grays, status colors, highlight system,
 * typography, shadows, spacing, and semantic background/text vars.
 * Must be loaded FIRST — all other files reference these properties.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   HAWX CENTRAL - Customer Panel v5
   ═══════════════════════════════════════════════════════════════════════════ */

: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;
}