/* ConstructCRM Typography Standards - Based on Login Page */
/* Use this as reference for all pages */

:root {
    /* Typography Variables */
    --font-family-primary: 'Inter', sans-serif;
    --font-size-base: 14px;
    --line-height-base: 1.4;
    
    /* Font Sizes */
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 28px;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;
}

/* Base Typography */
body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: #333;
}

/* Headings */
h1, .h1 {
    font-size: var(--font-size-3xl); /* 24px - matches login page */
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: 10px;
}

h2, .h2 {
    font-size: var(--font-size-2xl); /* 20px */
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: 10px;
}

h3, .h3 {
    font-size: var(--font-size-xl); /* 18px */
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: 8px;
}

h4, .h4 {
    font-size: var(--font-size-lg); /* 16px */
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: 8px;
}

h5, .h5 {
    font-size: var(--font-size-base); /* 14px */
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: 8px;
}

/* Form Elements */
.form-label {
    font-weight: var(--font-weight-medium);
    color: #555;
    margin-bottom: 8px;
    font-size: var(--font-size-base);
}

.form-control, .form-select {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

/* Buttons */
.btn {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

/* Navigation */
.nav-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-link {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
}

/* Page Titles */
.page-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: #333;
}

/* Breadcrumbs */
.breadcrumb {
    font-size: var(--font-size-sm);
}

/* Auth Pages (Login/Signup) */
.auth-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.auth-subtitle {
    color: #666;
    font-size: var(--font-size-base);
}

/* Small Text */
.text-sm {
    font-size: var(--font-size-sm);
}

.text-xs {
    font-size: var(--font-size-xs);
}

/* Text Utilities */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }