/* Typography System - Centralized Font Handling for HyperWatcher Frontend */

:root {
    /* Base Typography Scale - Using Major Third (1.25) ratio */
    --font-size-3xs: 0.5625rem;     /* 9px - ultra small */
    --font-size-2xs: 0.625rem;      /* 10px - ultra small */
    --font-size-xs: 0.75rem;        /* 12px - extra small */
    --font-size-sm: 0.875rem;       /* 14px - small */
    --font-size-base: 1rem;         /* 16px - base */
    --font-size-lg: 1.125rem;       /* 18px - large */
    --font-size-xl: 1.25rem;        /* 20px - extra large */
    --font-size-2xl: 1.5rem;        /* 24px - 2x large */
    --font-size-3xl: 1.875rem;      /* 30px - 3x large */
    --font-size-4xl: 2.25rem;       /* 36px - 4x large */
    --font-size-5xl: 3rem;          /* 48px - 5x large */

    /* Semantic Font Sizes for UI Components */
    --font-size-caption: var(--font-size-2xs);        /* 10px - captions, fine print */
    --font-size-micro: var(--font-size-3xs);          /* 9px - micro text */
    --font-size-detail: var(--font-size-xs);          /* 12px - detail text, metadata */
    --font-size-body-sm: var(--font-size-sm);         /* 14px - small body text */
    --font-size-body: var(--font-size-base);          /* 16px - regular body text */
    --font-size-body-lg: var(--font-size-lg);         /* 18px - large body text */
    --font-size-heading-sm: var(--font-size-lg);      /* 18px - small headings */
    --font-size-heading: var(--font-size-xl);         /* 20px - regular headings */
    --font-size-heading-lg: var(--font-size-2xl);     /* 24px - large headings */
    --font-size-display-sm: var(--font-size-3xl);     /* 30px - small display */
    --font-size-display: var(--font-size-4xl);        /* 36px - display text */
    --font-size-display-lg: var(--font-size-5xl);     /* 48px - large display */

    /* Component-Specific Font Sizes */
    --font-size-button: var(--font-size-body-sm);     /* 14px - buttons */
    --font-size-button-sm: var(--font-size-detail);   /* 12px - small buttons */
    --font-size-button-lg: var(--font-size-body);     /* 16px - large buttons */
    
    --font-size-input: var(--font-size-body-sm);      /* 14px - form inputs */
    --font-size-input-sm: var(--font-size-detail);    /* 12px - small inputs */
    --font-size-input-lg: var(--font-size-body);      /* 16px - large inputs */
    
    --font-size-label: var(--font-size-body-sm);      /* 14px - form labels */
    --font-size-label-sm: var(--font-size-detail);    /* 12px - small labels */
    
    --font-size-help: var(--font-size-detail);        /* 12px - help text */
    --font-size-error: var(--font-size-body-sm);      /* 14px - error messages */

    /* Navigation Font Sizes */
    --font-size-nav-link: var(--font-size-body-sm);   /* 14px - navigation links */
    --font-size-nav-brand: var(--font-size-heading);  /* 20px - brand/logo */
    --font-size-breadcrumb: var(--font-size-detail);  /* 12px - breadcrumbs */

    /* Badge and Status Font Sizes */
    --font-size-badge: var(--font-size-detail);       /* 12px - badges */
    --font-size-badge-sm: var(--font-size-caption);   /* 10px - small badges */
    --font-size-status: var(--font-size-detail);      /* 12px - status indicators */

    /* Table Font Sizes */
    --font-size-table-header: var(--font-size-detail);      /* 12px - table headers */
    --font-size-table-cell: var(--font-size-detail);        /* 12px - table cells */
    --font-size-table-cell-sm: var(--font-size-caption);    /* 10px - compact table cells */
    --font-size-table-extra-small: var(--font-size-micro);  /* 9px - extra small table text */
    --font-size-table-control: var(--font-size-detail);     /* 12px - pagination, filters */
    --font-size-table-info: var(--font-size-caption);       /* 10px - table info text */

    /* Alternative semantic names for table sizes */
    --font-size-table-data: var(--font-size-table-cell);    /* 12px - alias for table data */
    --font-size-table-small: var(--font-size-table-cell-sm); /* 10px - alias for small table text */

    /* Code and Monospace Font Sizes */
    --font-size-code: var(--font-size-body-sm);       /* 14px - inline code */
    --font-size-code-sm: var(--font-size-detail);     /* 12px - small code */
    --font-size-code-block: var(--font-size-body-sm); /* 14px - code blocks */

    /* Modal and Overlay Font Sizes */
    --font-size-modal-title: var(--font-size-heading-lg); /* 24px - modal titles */
    --font-size-modal-body: var(--font-size-body);        /* 16px - modal content */
    --font-size-modal-footer: var(--font-size-body-sm);   /* 14px - modal footer */

    /* Card and Panel Font Sizes */
    --font-size-card-title: var(--font-size-heading);     /* 20px - card titles */
    --font-size-card-subtitle: var(--font-size-body-sm);  /* 14px - card subtitles */
    --font-size-card-body: var(--font-size-body);         /* 16px - card content */
    --font-size-card-caption: var(--font-size-detail);    /* 12px - card captions */

    /* Summary and Statistics Font Sizes */
    --font-size-stat-value: var(--font-size-display-sm);  /* 30px - statistical values */
    --font-size-stat-label: var(--font-size-body-sm);     /* 14px - stat labels */
    --font-size-summary-value: var(--font-size-heading);  /* 20px - summary values */
    --font-size-summary-label: var(--font-size-body-sm);  /* 14px - summary labels */

    /* Responsive Font Scale Adjustments */
    --font-scale-mobile: 0.9;        /* 90% of base size on mobile */
    --font-scale-tablet: 0.95;       /* 95% of base size on tablet */
    --font-scale-desktop: 1;         /* 100% base size on desktop */
    --font-scale-large: 1.05;        /* 105% on large screens */
}

/* Responsive Font Scaling */
@media (max-width: 480px) {
    :root {
        /* Mobile font adjustments - scale down most text */
        --font-size-body: calc(var(--font-size-base) * var(--font-scale-mobile));
        --font-size-body-sm: calc(var(--font-size-sm) * var(--font-scale-mobile));
        --font-size-heading: calc(var(--font-size-xl) * var(--font-scale-mobile));
        --font-size-heading-lg: calc(var(--font-size-2xl) * var(--font-scale-mobile));
        
        /* Keep small UI elements readable */
        --font-size-table-cell: var(--font-size-caption);
        --font-size-table-header: var(--font-size-caption);
        --font-size-button-sm: var(--font-size-caption);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    :root {
        /* Tablet font adjustments */
        --font-size-body: calc(var(--font-size-base) * var(--font-scale-tablet));
        --font-size-body-sm: calc(var(--font-size-sm) * var(--font-scale-tablet));
    }
}

@media (min-width: 1440px) {
    :root {
        /* Large screen font adjustments */
        --font-size-body: calc(var(--font-size-base) * var(--font-scale-large));
        --font-size-heading: calc(var(--font-size-xl) * var(--font-scale-large));
        --font-size-heading-lg: calc(var(--font-size-2xl) * var(--font-scale-large));
    }
}

/* Typography Utility Classes - Semantic naming */
.text-caption { font-size: var(--font-size-caption); }
.text-detail { font-size: var(--font-size-detail); }
.text-body-sm { font-size: var(--font-size-body-sm); }
.text-body { font-size: var(--font-size-body); }
.text-body-lg { font-size: var(--font-size-body-lg); }
.text-heading-sm { font-size: var(--font-size-heading-sm); }
.text-heading { font-size: var(--font-size-heading); }
.text-heading-lg { font-size: var(--font-size-heading-lg); }
.text-display-sm { font-size: var(--font-size-display-sm); }
.text-display { font-size: var(--font-size-display); }
.text-display-lg { font-size: var(--font-size-display-lg); }

/* Component-specific utility classes */
.text-button { font-size: var(--font-size-button); }
.text-button-sm { font-size: var(--font-size-button-sm); }
.text-button-lg { font-size: var(--font-size-button-lg); }

.text-table-header { font-size: var(--font-size-table-header); }
.text-table-cell { font-size: var(--font-size-table-cell); }
.text-table-cell-sm { font-size: var(--font-size-table-cell-sm); }
.text-table-info { font-size: var(--font-size-table-info); }

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

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

.text-stat-value { font-size: var(--font-size-stat-value); }
.text-stat-label { font-size: var(--font-size-stat-label); }
.text-summary-value { font-size: var(--font-size-summary-value); }
.text-summary-label { font-size: var(--font-size-summary-label); }

/* Legacy support - map old classes to new system */
.text-xs { font-size: var(--font-size-detail); }
.text-sm { font-size: var(--font-size-body-sm); }
.text-lg { font-size: var(--font-size-body-lg); }
.text-xl { font-size: var(--font-size-heading); }
.text-2xl { font-size: var(--font-size-heading-lg); }

/* Font Weight Scale */
:root {
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
}

/* Font Weight Utility Classes */
.font-thin { font-weight: var(--font-weight-thin); }
.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); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }
.font-black { font-weight: var(--font-weight-black); }

/* Line Height Scale */
:root {
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
}

/* Line Height Utility Classes */
.leading-none { line-height: var(--line-height-none); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* Typography Combinations - Predefined component styles */
.typography-nav-link {
    font-size: var(--font-size-nav-link);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.typography-table-header {
    font-size: var(--font-size-table-header);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.typography-table-cell {
    font-size: var(--font-size-table-cell);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-snug);
}

.typography-button {
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-none);
}

.typography-badge {
    font-size: var(--font-size-badge);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-none);
}

.typography-stat-value {
    font-size: var(--font-size-stat-value);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.typography-code {
    font-size: var(--font-size-code);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-snug);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Accessibility and User Preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}

/* Support for user font size preferences */
@media (prefers-contrast: high) {
    :root {
        --font-weight-normal: var(--font-weight-medium);
        --font-weight-medium: var(--font-weight-semibold);
    }
}