/* =============================================================================
   ECLIPSEFAN DESIGN TOKENS - Pure CSS Custom Properties
   =============================================================================
   Centralized design system for typography, colors, and theming.

   Usage:
   - Include this file FIRST before other stylesheets
   - Use CSS variables instead of hard-coded values
   - Supports Light, Dark, and Astro (red night vision) themes

   Accessibility:
   - All font sizes in rem for user preference support
   - Minimum text size: 0.75rem (12px) for readability
   - Color contrasts meet WCAG 2.1 AA standards
   ============================================================================= */

/* =============================================================================
   1. TYPOGRAPHY SCALE
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       Base font size - DO NOT CHANGE
       Ensures user browser preferences are respected
       ------------------------------------------------------------------------- */
    font-size: 100%;

    /* -------------------------------------------------------------------------
       Type Scale (ratio 1.25 - Major Third)
       Based on 16px browser default
       ------------------------------------------------------------------------- */
    --text-3xs: 0.625rem;   /* 10px - AVOID: only for mandatory micro-labels */
    --text-2xs: 0.6875rem;  /* 11px - AVOID: limited use, high contrast required */
    --text-xs: 0.75rem;     /* 12px - Minimum readable: captions, timestamps */
    --text-sm: 0.8125rem;   /* 13px - Secondary labels, metadata */
    --text-base: 0.875rem;  /* 14px - Body text (mobile) */
    --text-md: 1rem;        /* 16px - Body text (desktop), form inputs */
    --text-lg: 1.125rem;    /* 18px - Important data, sub-headings */
    --text-xl: 1.25rem;     /* 20px - Highlighted values, H4 */
    --text-2xl: 1.5rem;     /* 24px - Section titles, H2 */
    --text-3xl: 1.75rem;    /* 28px - Page titles, H1 */
    --text-4xl: 2rem;       /* 32px - Hero titles */
    --text-5xl: 2.5rem;     /* 40px - Display text */

    /* -------------------------------------------------------------------------
       Semantic Font Size Aliases
       Use these for consistent meaning across components
       ------------------------------------------------------------------------- */
    --font-size-body: var(--text-base);
    --font-size-body-lg: var(--text-md);
    --font-size-label: var(--text-sm);
    --font-size-caption: var(--text-xs);
    --font-size-micro: var(--text-xs);  /* Upgraded from 10-11px for accessibility */

    /* Data display (times, durations, coordinates) */
    --font-size-data: var(--text-base);
    --font-size-data-lg: var(--text-lg);
    --font-size-data-xl: var(--text-xl);

    /* Headings */
    --font-size-h1: var(--text-3xl);
    --font-size-h2: var(--text-2xl);
    --font-size-h3: var(--text-xl);
    --font-size-h4: var(--text-lg);

    /* -------------------------------------------------------------------------
       Fluid Typography (responsive without media queries)
       Format: clamp(min, preferred, max)
       ------------------------------------------------------------------------- */
    --font-size-fluid-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
    --font-size-fluid-sm: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem);
    --font-size-fluid-base: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
    --font-size-fluid-lg: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    --font-size-fluid-xl: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    --font-size-fluid-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);

    /* -------------------------------------------------------------------------
       Font Families
       ------------------------------------------------------------------------- */
    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                        "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "SF Mono", SFMono-Regular, Consolas, "Liberation Mono",
                        Menlo, Monaco, monospace;

    /* -------------------------------------------------------------------------
       Font Weights
       ------------------------------------------------------------------------- */
    --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.5;
    --line-height-relaxed: 1.75;

    /* -------------------------------------------------------------------------
       Letter Spacing
       ------------------------------------------------------------------------- */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.05em;
}


/* =============================================================================
   2. COLOR SYSTEM - LIGHT THEME (Default)
   ============================================================================= */

:root,
[data-theme="light"] {
    /* -------------------------------------------------------------------------
       Background Colors
       ------------------------------------------------------------------------- */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #e9ecef;
    --color-bg-elevated: #ffffff;
    --color-bg-overlay: rgba(255, 255, 255, 0.96);
    --color-bg-backdrop: rgba(0, 0, 0, 0.5);

    /* -------------------------------------------------------------------------
       Text Colors
       ------------------------------------------------------------------------- */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-tertiary: #6c757d;
    --color-text-muted: #adb5bd;
    --color-text-inverse: #ffffff;

    /* -------------------------------------------------------------------------
       Interactive Colors
       ------------------------------------------------------------------------- */
    --color-accent: #0066cc;
    --color-accent-hover: #0052a3;
    --color-accent-active: #004080;
    --color-accent-subtle: rgba(0, 102, 204, 0.1);

    /* -------------------------------------------------------------------------
       Eclipse-specific Colors
       ------------------------------------------------------------------------- */
    --color-eclipse-total: #800080;
    --color-eclipse-total-light: #b366b3;
    --color-eclipse-partial: #cc6600;
    --color-eclipse-partial-light: #ff9933;
    --color-eclipse-annular: #cc9900;

    /* -------------------------------------------------------------------------
       Semantic Colors
       ------------------------------------------------------------------------- */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-error: #dc3545;
    --color-info: #17a2b8;

    /* -------------------------------------------------------------------------
       Border Colors
       ------------------------------------------------------------------------- */
    --color-border: #dee2e6;
    --color-border-subtle: #e9ecef;
    --color-border-strong: #adb5bd;

    /* -------------------------------------------------------------------------
       Shadow Colors
       ------------------------------------------------------------------------- */
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-shadow-strong: rgba(0, 0, 0, 0.2);

    /* -------------------------------------------------------------------------
       Component-specific
       ------------------------------------------------------------------------- */
    --color-input-bg: #ffffff;
    --color-input-border: #ced4da;
    --color-input-focus: var(--color-accent);

    --color-button-primary-bg: var(--color-accent);
    --color-button-primary-text: #ffffff;
    --color-button-secondary-bg: #e9ecef;
    --color-button-secondary-text: #495057;

    /* -------------------------------------------------------------------------
       Map-specific (for UI overlays on map)
       ------------------------------------------------------------------------- */
    --color-map-overlay-bg: rgba(255, 255, 255, 0.95);
    --color-map-control-bg: #ffffff;
    --color-map-control-border: rgba(0, 0, 0, 0.1);

    /* -------------------------------------------------------------------------
       Theme metadata
       ------------------------------------------------------------------------- */
    --theme-name: "light";
    --theme-is-dark: 0;
}


/* =============================================================================
   3. COLOR SYSTEM - DARK THEME
   ============================================================================= */

[data-theme="dark"] {
    /* -------------------------------------------------------------------------
       Background Colors
       ------------------------------------------------------------------------- */
    --color-bg-primary: #121212;
    --color-bg-secondary: #1e1e1e;
    --color-bg-tertiary: #2d2d2d;
    --color-bg-elevated: #252525;
    --color-bg-overlay: rgba(18, 18, 18, 0.96);
    --color-bg-backdrop: rgba(0, 0, 0, 0.7);

    /* -------------------------------------------------------------------------
       Text Colors
       ------------------------------------------------------------------------- */
    --color-text-primary: #e8e8e8;
    --color-text-secondary: #d0d0d0;
    --color-text-tertiary: #a0a0a0;
    --color-text-muted: #666666;
    --color-text-inverse: #1a1a1a;

    /* -------------------------------------------------------------------------
       Interactive Colors
       ------------------------------------------------------------------------- */
    --color-accent: #4da6ff;
    --color-accent-hover: #80bfff;
    --color-accent-active: #99ccff;
    --color-accent-subtle: rgba(77, 166, 255, 0.15);

    /* -------------------------------------------------------------------------
       Eclipse-specific Colors (brighter for dark bg)
       ------------------------------------------------------------------------- */
    --color-eclipse-total: #cc66cc;
    --color-eclipse-total-light: #e6b3e6;
    --color-eclipse-partial: #ff9933;
    --color-eclipse-partial-light: #ffbb66;
    --color-eclipse-annular: #ffcc33;

    /* -------------------------------------------------------------------------
       Semantic Colors (adjusted for dark bg)
       ------------------------------------------------------------------------- */
    --color-success: #4caf50;
    --color-warning: #ffca28;
    --color-error: #f44336;
    --color-info: #29b6f6;

    /* -------------------------------------------------------------------------
       Border Colors
       ------------------------------------------------------------------------- */
    --color-border: #3d3d3d;
    --color-border-subtle: #2d2d2d;
    --color-border-strong: #555555;

    /* -------------------------------------------------------------------------
       Shadow Colors
       ------------------------------------------------------------------------- */
    --color-shadow: rgba(0, 0, 0, 0.3);
    --color-shadow-strong: rgba(0, 0, 0, 0.5);

    /* -------------------------------------------------------------------------
       Component-specific
       ------------------------------------------------------------------------- */
    --color-input-bg: #1e1e1e;
    --color-input-border: #3d3d3d;
    --color-input-focus: var(--color-accent);

    --color-button-primary-bg: var(--color-accent);
    --color-button-primary-text: #121212;
    --color-button-secondary-bg: #3d3d3d;
    --color-button-secondary-text: #e8e8e8;

    /* -------------------------------------------------------------------------
       Map-specific
       ------------------------------------------------------------------------- */
    --color-map-overlay-bg: rgba(18, 18, 18, 0.95);
    --color-map-control-bg: #252525;
    --color-map-control-border: rgba(255, 255, 255, 0.1);

    /* -------------------------------------------------------------------------
       Theme metadata
       ------------------------------------------------------------------------- */
    --theme-name: "dark";
    --theme-is-dark: 1;
}


/* =============================================================================
   4. COLOR SYSTEM - ASTRO THEME (Red Night Vision)
   =============================================================================
   Designed to preserve scotopic vision (night vision) for astronomers.
   Uses only red wavelengths which don't affect rhodopsin in rod cells.
   ============================================================================= */

[data-theme="astro"] {
    /* -------------------------------------------------------------------------
       Background Colors - Pure blacks
       ------------------------------------------------------------------------- */
    --color-bg-primary: #000000;
    --color-bg-secondary: #0a0000;
    --color-bg-tertiary: #120000;
    --color-bg-elevated: #0f0000;
    --color-bg-overlay: rgba(0, 0, 0, 0.98);
    --color-bg-backdrop: rgba(0, 0, 0, 0.9);

    /* -------------------------------------------------------------------------
       Text Colors - Red spectrum only
       ------------------------------------------------------------------------- */
    --color-text-primary: #dd4444;
    --color-text-secondary: #bb3333;
    --color-text-tertiary: #993333;
    --color-text-muted: #662222;
    --color-text-inverse: #000000;

    /* -------------------------------------------------------------------------
       Interactive Colors - Darker reds
       ------------------------------------------------------------------------- */
    --color-accent: #aa2222;
    --color-accent-hover: #cc3333;
    --color-accent-active: #dd4444;
    --color-accent-subtle: rgba(170, 34, 34, 0.2);

    /* -------------------------------------------------------------------------
       Eclipse-specific Colors (all red spectrum)
       ------------------------------------------------------------------------- */
    --color-eclipse-total: #cc3333;
    --color-eclipse-total-light: #aa2222;
    --color-eclipse-partial: #993322;
    --color-eclipse-partial-light: #772211;
    --color-eclipse-annular: #884422;

    /* -------------------------------------------------------------------------
       Semantic Colors (red variants only)
       ------------------------------------------------------------------------- */
    --color-success: #883322;
    --color-warning: #884422;
    --color-error: #aa2222;
    --color-info: #772222;

    /* -------------------------------------------------------------------------
       Border Colors
       ------------------------------------------------------------------------- */
    --color-border: #331111;
    --color-border-subtle: #220808;
    --color-border-strong: #552222;

    /* -------------------------------------------------------------------------
       Shadow Colors
       ------------------------------------------------------------------------- */
    --color-shadow: rgba(50, 0, 0, 0.5);
    --color-shadow-strong: rgba(80, 0, 0, 0.7);

    /* -------------------------------------------------------------------------
       Component-specific
       ------------------------------------------------------------------------- */
    --color-input-bg: #0a0000;
    --color-input-border: #331111;
    --color-input-focus: var(--color-accent);

    --color-button-primary-bg: #661a1a;
    --color-button-primary-text: #cc3333;
    --color-button-secondary-bg: #220808;
    --color-button-secondary-text: #992222;

    /* -------------------------------------------------------------------------
       Map-specific
       ------------------------------------------------------------------------- */
    --color-map-overlay-bg: rgba(0, 0, 0, 0.98);
    --color-map-control-bg: #0a0000;
    --color-map-control-border: rgba(100, 20, 20, 0.3);

    /* -------------------------------------------------------------------------
       Theme metadata
       ------------------------------------------------------------------------- */
    --theme-name: "astro";
    --theme-is-dark: 1;
}


/* =============================================================================
   5. SPACING SCALE
   ============================================================================= */

:root {
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
}


/* =============================================================================
   6. BORDER RADIUS
   ============================================================================= */

:root {
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-full: 9999px;
}


/* =============================================================================
   7. SHADOWS
   ============================================================================= */

:root {
    --shadow-sm: 0 1px 2px var(--color-shadow);
    --shadow-md: 0 2px 4px var(--color-shadow), 0 1px 2px var(--color-shadow);
    --shadow-lg: 0 4px 8px var(--color-shadow), 0 2px 4px var(--color-shadow);
    --shadow-xl: 0 8px 16px var(--color-shadow-strong);
}


/* =============================================================================
   8. TRANSITIONS
   ============================================================================= */

:root {
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-theme: 200ms ease-in-out;
}


/* =============================================================================
   9. Z-INDEX SCALE
   ============================================================================= */

:root {
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-tooltip: 600;
    --z-toast: 700;
}


/* =============================================================================
   17. RESPONSIVE ADJUSTMENTS
   ============================================================================= */

/* Tablet and up */
@media (min-width: 768px) {
    :root {
        --font-size-body: var(--text-md);
        --font-size-h1: var(--text-4xl);
        --font-size-h2: var(--text-3xl);
        --font-size-h3: var(--text-2xl);
        --font-size-h4: var(--text-xl);
    }
}


/* =============================================================================
   20. HIGH CONTRAST MODE
   ============================================================================= */

@media (prefers-contrast: high) {
    :root {
        --color-border: var(--color-text-primary);
        --color-border-subtle: var(--color-text-secondary);
    }
}