/* VFA High School - Heritage Design Tokens (Stitch Ref: homepage-code.html) */
:root {
    /* Main Branding from Stitch Code */
    --vfa-primary: #0A294D;      /* Academic Navy (Sidebar) */
    --vfa-primary-dark: #001e20; /* Deep Obsidian (Subtle accents) */
    --vfa-secondary: #00696f;    /* Teal Secondary */
    --vfa-secondary-container: #9eedf3;
    --vfa-tertiary: #1e4a4d;
    --vfa-gold: #d4a843;         /* Heritage Gold */
    --vfa-gold-light: #eac06a;
    --vfa-dominant-green: #478f34;

    /* Panel & Surface Colors */
    --vfa-bg-body: #f4f6f8;
    --vfa-surface: #ffffff;
    --vfa-surface-container: #eceef0;
    --vfa-surface-container-low: #f4f6f8;
    --vfa-surface-container-lowest: #ffffff;
    --vfa-secondary-variant: #005a5e;
    --vfa-outline: #717879;
    --vfa-on-surface: #191c1e;
    --vfa-on-surface-variant: #41493c;

    /* Semantic Colors */
    --vfa-success: #478f34;
    --vfa-error: #ba1a1a;
    --vfa-warning: #eac06a;

    /* Sidebar Specifics */
    --vfa-sidebar-bg: #0A294D;
    /** Public nav/footer (alias; must match --vfa-primary / sidebar) */
    --vfa-dark-panel: #0A294D;
    --vfa-sidebar-item-active: #143d63;
    /* Between base sidebar and active — solid hover like VisionPOS --sidebar-hover */
    --vfa-sidebar-hover: #0f3558;
    --vfa-sidebar-text: #ffffff;
    --vfa-sidebar-text-muted: #a3b8aa;

    /* Admin shell — sidebar width (VisionPOS-style compact rail) */
    --vfa-sidebar-width: 260px;

    /* Layout Margins & Radii */
    --vfa-radius-default: 4px;
    --vfa-radius-lg: 8px;
    --vfa-radius-xl: 12px;
    --vfa-radius-2xl: 16px;
    --vfa-radius-full: 9999px;

    /* Shadows */
    --vfa-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --vfa-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --vfa-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Transitions */
    --vfa-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Gradients (public + admin) */
    --vfa-gradient-academic: linear-gradient(135deg, var(--vfa-primary) 0%, var(--vfa-secondary) 100%);
    --vfa-vibrant-gradient: linear-gradient(135deg, var(--vfa-dominant-green) 0%, var(--vfa-secondary) 100%);
}

/* Global Utility Classes (Replacing Tailwind) */
.font-headline { font-family: 'Raleway', 'Inter', sans-serif; }
.font-body { font-family: 'Inter', sans-serif; letter-spacing: normal; }

.text-gold { color: var(--vfa-gold); }
.text-secondary { color: var(--vfa-secondary); }
.text-outline { color: var(--vfa-outline); }
.text-on-surface { color: var(--vfa-on-surface); }
.text-vfa-on-surface-variant { color: var(--vfa-on-surface-variant); }
.text-vfa-primary { color: var(--vfa-primary); }

.bg-surface { background-color: var(--vfa-surface); }
.bg-surface-container { background-color: var(--vfa-surface-container); }
.bg-dark-panel { background-color: var(--vfa-sidebar-bg); }

.rounded-xl { border-radius: var(--vfa-radius-xl); }
.rounded-2xl { border-radius: var(--vfa-radius-2xl); }

.shadow-sm { box-shadow: var(--vfa-shadow-sm); }
.shadow-md { box-shadow: var(--vfa-shadow-md); }

.academic-gradient {
    background: linear-gradient(135deg, #0A294D 0%, #143d63 100%);
}

.transition-all { transition: var(--vfa-transition); }