/* CrustyRustacean Dev Blog - CSS Custom Properties
 * This file contains all CSS custom properties (variables) for theming.
 * Theme variables (--theme-*) are provided by theme.toml configuration.
 * These variables map theme values to semantic names used throughout the app.
 */

:root {
    /* Color scheme hint for browser UI */
    color-scheme: light dark;

    /* ============================================
       PRIMARY COLORS
       ============================================ */
    --color-primary: var(--theme-primary, #ff6b35);
    --color-primary-hover: var(--theme-primary-hover, color-mix(in oklch, var(--color-primary), black 15%));
    --color-secondary: var(--theme-secondary, #2c3e50);
    --color-accent: var(--theme-accent, #e74c3c);

    /* ============================================
       BACKGROUND COLORS
       ============================================ */
    --color-bg-body: var(--theme-bg-body, #ffffff);
    --color-bg-surface: var(--theme-bg-surface, #f8f9fa);
    --color-bg-elevated: var(--theme-bg-elevated, #ffffff);
    --color-bg-gradient-start: var(--theme-bg-gradient-start, #667eea);
    --color-bg-gradient-end: var(--theme-bg-gradient-end, #764ba2);

    /* ============================================
       TEXT COLORS
       ============================================ */
    --color-text-primary: var(--theme-text-primary, #000000);
    --color-text-secondary: var(--theme-text-secondary, #2d3748);
    --color-text-muted: var(--theme-text-muted, #6c757d);
    --color-text-on-primary: var(--theme-text-on-primary, #ffffff);

    /* ============================================
       SEMANTIC COLORS
       ============================================ */
    --color-success: var(--theme-success, #28a745);
    --color-warning: var(--theme-warning, #ffc107);
    --color-danger: var(--theme-danger, #dc3545);
    --color-info: var(--theme-info, #17a2b8);

    /* ============================================
       BORDERS AND EFFECTS
       ============================================ */
    --color-border: var(--theme-border-color, #dee2e6);
    --border-radius: var(--theme-border-radius, 12px);
    --shadow: var(--theme-shadow, 0 2px 15px rgba(0, 0, 0, 0.1));
    --shadow-hover: var(--theme-shadow-hover, 0 5px 25px rgba(0, 0, 0, 0.15));

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    --font-body: var(--theme-font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --font-heading: var(--theme-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --font-mono: var(--theme-font-mono, 'Monaco', 'Menlo', 'Ubuntu Mono', monospace);

    /* ============================================
       TRANSITIONS
       ============================================ */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================
   DARK THEME OVERRIDES
   Applied when data-theme="dark" attribute is set
   ============================================ */
[data-theme="dark"] {
    --color-primary: var(--theme-primary, #ff8f5a);
    --color-secondary: var(--theme-secondary, #4a6785);
    --color-accent: var(--theme-accent, #ff6b6b);

    --color-bg-body: var(--theme-bg-body, #0d1117);
    --color-bg-surface: var(--theme-bg-surface, #161b22);
    --color-bg-elevated: var(--theme-bg-elevated, #21262d);
    --color-bg-gradient-start: var(--theme-bg-gradient-start, #1a1a2e);
    --color-bg-gradient-end: var(--theme-bg-gradient-end, #16213e);

    --color-text-primary: var(--theme-text-primary, #f0f6fc);
    --color-text-secondary: var(--theme-text-secondary, #8b949e);
    --color-text-muted: var(--theme-text-muted, #6e7681);

    --color-border: var(--theme-border-color, #30363d);
    --shadow: var(--theme-shadow, 0 2px 15px rgba(0, 0, 0, 0.3));
    --shadow-hover: var(--theme-shadow-hover, 0 5px 25px rgba(0, 0, 0, 0.4));
}

/* ============================================
   HIGH CONTRAST THEME OVERRIDES
   Applied when data-theme="high-contrast" attribute is set
   ============================================ */
[data-theme="high-contrast"] {
    --color-primary: var(--theme-primary, #0066cc);
    --color-secondary: var(--theme-secondary, #000000);
    --color-accent: var(--theme-accent, #cc0000);

    --color-bg-body: var(--theme-bg-body, #ffffff);
    --color-bg-surface: var(--theme-bg-surface, #ffffff);
    --color-bg-elevated: var(--theme-bg-elevated, #ffffff);

    --color-text-primary: var(--theme-text-primary, #000000);
    --color-text-secondary: var(--theme-text-secondary, #000000);
    --color-text-muted: var(--theme-text-muted, #333333);

    --color-border: var(--theme-border-color, #000000);
    --border-radius: var(--theme-border-radius, 0px);
    --shadow: var(--theme-shadow, none);
    --shadow-hover: var(--theme-shadow-hover, none);
}

/* ============================================
   SYSTEM PREFERENCE SUPPORT
   Auto-detect dark mode when data-theme="auto"
   ============================================ */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --color-primary: var(--theme-primary, #ff8f5a);
        --color-secondary: var(--theme-secondary, #4a6785);
        --color-accent: var(--theme-accent, #ff6b6b);

        --color-bg-body: var(--theme-bg-body, #0d1117);
        --color-bg-surface: var(--theme-bg-surface, #161b22);
        --color-bg-elevated: var(--theme-bg-elevated, #21262d);
        --color-bg-gradient-start: var(--theme-bg-gradient-start, #1a1a2e);
        --color-bg-gradient-end: var(--theme-bg-gradient-end, #16213e);

        --color-text-primary: var(--theme-text-primary, #f0f6fc);
        --color-text-secondary: var(--theme-text-secondary, #8b949e);
        --color-text-muted: var(--theme-text-muted, #6e7681);

        --color-border: var(--theme-border-color, #30363d);
        --shadow: var(--theme-shadow, 0 2px 15px rgba(0, 0, 0, 0.3));
        --shadow-hover: var(--theme-shadow-hover, 0 5px 25px rgba(0, 0, 0, 0.4));
    }
}