/*
 * =========================================
 * MAIN.CSS
 *
 * Global, foundational styles for the entire application.
 * - CSS Custom Properties (Variables)
 * - Base element styling (body, etc.)
 *
 * Note: A full CSS Reset is not needed as the TailwindCSS
 * CDN provides its own ("Preflight").
 * =========================================
*/

/*
 * 1. CSS CUSTOM PROPERTIES (VARIABLES)
 * Define your design system here.
*/
:root {
    /* Brand & Accent Colors */
    --color-primary-dark: #0d2d52;      /* Dark Blue: Headers, panels */
    --color-primary-medium: #1c3d6e;    /* Medium Blue: Dropdowns */
    --color-primary-light: #1e40af;      /* Bright Blue: Active links */
    --color-accent: #4db6ac;             /* Teal: Table headers */
    --color-active: #4CAF50;             /* Green: Active top nav link */
    
    /* Neutral & Background Colors */
    --color-background: #eef0f4;        /* Light Gray: Main portal background */
    --color-surface: #ffffff;           /* White: Cards, inputs */
    --color-border: #e2e8f0;            /* Gray-200: Borders */
    --color-surface-light: #f8fafc;     /* Lighter Gray: Table total row */

    /* Text Colors */
    --text-light: #ffffff;              /* For text on dark backgrounds */
    --text-dark: #1f2937;               /* For main headings and text */
    --text-muted: #6b7280;              /* For secondary text, icons */

    /* Fonts */
    --font-primary: 'Inter', sans-serif;
}


/*
 * 2. GLOBAL BODY & HTML STYLES
 * Apply the foundational styles.
*/
body {
    font-family: var(--font-primary);
    color: var(--text-dark);
    background-color: var(--color-surface); /* Default background is white (for login page) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}