/**
 * CryptoInsight - Serenity Theme
 *
 * Custom MudBlazor theme implementing the "Serenity" aesthetic - calm, minimal,
 * flat design with generous whitespace. Designed to reduce stress in volatile
 * market conditions.
 *
 * Version: 1.0
 * Date: 2025-10-21
 * Based on: docs/front-end-spec.md Section 6 (Branding & Style Guide)
 */

/* ========================================
   1. SERENITY COLOR PALETTE
   ======================================== */

:root {
    /* Primary Colors */
    --serenity-primary: #4A90A4;           /* Calm muted teal - buttons, links, active states */
    --serenity-secondary: #7B8FA3;         /* Soft slate blue - secondary buttons, borders */
    --serenity-accent: #A4C2D4;            /* Light sky blue - highlights, new data indicators */

    /* Status Colors */
    --serenity-success: #6B9B7C;           /* Muted forest green - positive price changes, success messages */
    --serenity-warning: #D4A574;           /* Warm sand/amber - cautions, important notices */
    --serenity-error: #C17B7B;             /* Muted rose/brick red - negative price changes, errors */

    /* Neutral Colors */
    --serenity-neutral-dark: #2D3748;      /* Deep charcoal - primary text, headings */
    --serenity-neutral-medium: #718096;    /* Medium grey-blue - secondary text, labels */
    --serenity-neutral-light: #E2E8F0;     /* Very light grey-blue - borders, dividers */
    --serenity-background: #F7FAFC;        /* Off-white with blue tint - page background */
    --serenity-surface: #FFFFFF;           /* Pure white - card surfaces, dialogs */
}

/* ========================================
   2. MUDBLAZOR PALETTE OVERRIDES
   ======================================== */

:root {
    /* Primary palette */
    --mud-palette-primary: var(--serenity-primary);
    --mud-palette-primary-rgb: 74, 144, 164;
    --mud-palette-primary-text: var(--serenity-surface);
    --mud-palette-primary-hover: rgba(74, 144, 164, 0.08);
    --mud-palette-primary-lighten: #6BA8BC;
    --mud-palette-primary-darken: #3A7A8E;

    /* Secondary palette */
    --mud-palette-secondary: var(--serenity-secondary);
    --mud-palette-secondary-rgb: 123, 143, 163;
    --mud-palette-secondary-text: var(--serenity-surface);
    --mud-palette-secondary-hover: rgba(123, 143, 163, 0.08);

    /* Status colors */
    --mud-palette-success: var(--serenity-success);
    --mud-palette-success-rgb: 107, 155, 124;
    --mud-palette-warning: var(--serenity-warning);
    --mud-palette-warning-rgb: 212, 165, 116;
    --mud-palette-error: var(--serenity-error);
    --mud-palette-error-rgb: 193, 123, 123;
    --mud-palette-info: var(--serenity-accent);
    --mud-palette-info-rgb: 164, 194, 212;

    /* Background & Surface */
    --mud-palette-background: var(--serenity-background);
    --mud-palette-background-grey: var(--serenity-background);
    --mud-palette-surface: var(--serenity-surface);

    /* Text colors */
    --mud-palette-text-primary: var(--serenity-neutral-dark);
    --mud-palette-text-secondary: var(--serenity-neutral-medium);
    --mud-palette-text-disabled: rgba(45, 55, 72, 0.38);

    /* Divider & Borders */
    --mud-palette-divider: var(--serenity-neutral-light);
    --mud-palette-lines-default: var(--serenity-neutral-light);
}

/* ========================================
   3. TYPOGRAPHY OVERRIDES
   ======================================== */

:root {
    /* Primary font family (UI text) */
    --mud-typography-default-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font weights */
    --mud-typography-default-font-weight-regular: 400;
    --mud-typography-default-font-weight-medium: 500;
    --mud-typography-default-font-weight-semibold: 600;
    --mud-typography-default-font-weight-bold: 700;

    /* Type scale - smaller than default Material Design for calmer appearance */
    --mud-typography-h1-size: 2rem;        /* 32px - Page titles (rare) */
    --mud-typography-h1-weight: 700;
    --mud-typography-h1-line-height: 1.2;

    --mud-typography-h2-size: 1.5rem;      /* 24px - Section headers, dialog titles */
    --mud-typography-h2-weight: 600;
    --mud-typography-h2-line-height: 1.3;

    --mud-typography-h3-size: 1.25rem;     /* 20px - Card headers */
    --mud-typography-h3-weight: 600;
    --mud-typography-h3-line-height: 1.4;

    --mud-typography-h4-size: 1.125rem;    /* 18px - Small section headers */
    --mud-typography-h4-weight: 600;
    --mud-typography-h4-line-height: 1.4;

    --mud-typography-body1-size: 1rem;     /* 16px - Primary body text, table content */
    --mud-typography-body1-weight: 400;
    --mud-typography-body1-line-height: 1.5;

    --mud-typography-body2-size: 0.875rem; /* 14px - Secondary text, labels */
    --mud-typography-body2-weight: 400;
    --mud-typography-body2-line-height: 1.5;

    --mud-typography-caption-size: 0.75rem; /* 12px - Timestamps, metadata */
    --mud-typography-caption-weight: 400;
    --mud-typography-caption-line-height: 1.4;

    --mud-typography-button-size: 0.875rem; /* 14px - Button text */
    --mud-typography-button-weight: 500;
    --mud-typography-button-line-height: 1.0;
}

/* Data/numeric typography - uses Roboto Mono */
.data-large {
    font-family: 'Roboto Mono', 'SF Mono', Consolas, monospace;
    font-size: 1.75rem;    /* 28px - Current price on detail view */
    font-weight: 500;
    line-height: 1.2;
}

.data-medium {
    font-family: 'Roboto Mono', 'SF Mono', Consolas, monospace;
    font-size: 1.125rem;   /* 18px - Prices in data grid */
    font-weight: 500;
    line-height: 1.3;
}

.data-small {
    font-family: 'Roboto Mono', 'SF Mono', Consolas, monospace;
    font-size: 0.875rem;   /* 14px - Percentages, small values */
    font-weight: 400;
    line-height: 1.3;
}

/* ========================================
   4. ELEVATION/SHADOW OVERRIDES (Minimal for Serenity)
   ======================================== */

:root {
    /* Level 0: Flat - use subtle border instead of shadow */
    --mud-elevation-0: none;

    /* Level 1: Subtle shadow for dialogs, dropdowns */
    --mud-elevation-1: 0 1px 3px rgba(0, 0, 0, 0.05);

    /* Level 2: Slightly more prominent for floating elements */
    --mud-elevation-2: 0 2px 6px rgba(0, 0, 0, 0.06);

    /* Level 4: For modals (rare use) */
    --mud-elevation-4: 0 4px 12px rgba(0, 0, 0, 0.08);

    /* Higher levels reduced for flatter design */
    --mud-elevation-8: 0 4px 12px rgba(0, 0, 0, 0.08);
    --mud-elevation-16: 0 4px 12px rgba(0, 0, 0, 0.08);
    --mud-elevation-24: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Prefer outlined cards over elevated ones */
.mud-card {
    box-shadow: none !important;
    border: 1px solid var(--serenity-neutral-light);
}

/* ========================================
   5. BORDER RADIUS CONFIGURATION
   ======================================== */

:root {
    --serenity-border-radius-sm: 4px;   /* Buttons, inputs */
    --serenity-border-radius-md: 8px;   /* Cards, dialogs */
    --serenity-border-radius-lg: 12px;  /* Large containers */
}

.mud-button {
    border-radius: var(--serenity-border-radius-sm) !important;
}

.mud-input,
.mud-select {
    border-radius: var(--serenity-border-radius-sm) !important;
}

.mud-card {
    border-radius: var(--serenity-border-radius-md) !important;
}

.mud-dialog {
    border-radius: var(--serenity-border-radius-md) !important;
}

/* ========================================
   6. SPACING OVERRIDES (Generous whitespace)
   ======================================== */

:root {
    --serenity-spacing-xs: 0.25rem;   /* 4px */
    --serenity-spacing-sm: 0.5rem;    /* 8px */
    --serenity-spacing-md: 1rem;      /* 16px */
    --serenity-spacing-lg: 1.5rem;    /* 24px */
    --serenity-spacing-xl: 2rem;      /* 32px */
    --serenity-spacing-2xl: 3rem;     /* 48px */
}

/* Increase card padding for breathing room */
.mud-card-content {
    padding: var(--serenity-spacing-lg) !important;
}

.mud-dialog-content {
    padding: var(--serenity-spacing-lg) !important;
}

/* ========================================
   7. COMPONENT-SPECIFIC CUSTOMIZATIONS
   ======================================== */

.mud-card-header {
    padding: 16px 16px 0 16px;
}

/* MudButton - Softer appearance */
.mud-button-root {
    text-transform: none; /* Sentence case, not uppercase */
}

.mud-button-outlined {
    border-width: 1px;
    border-color: var(--serenity-neutral-light);
}

/* MudDataGrid - Subtle, minimal styling */
.mud-table {
    background-color: var(--serenity-surface);
}

.mud-table-head {
    background-color: rgba(123, 143, 163, 0.06); /* Muted header background */
}

.mud-table-row:hover {
    background-color: rgba(74, 144, 164, 0.04) !important; /* Subtle hover effect */
    box-shadow: none !important; /* No elevation on hover */
}

.mud-table-cell {
    padding: var(--serenity-spacing-md);
}

/* MudDialog - Clean, minimal backdrop */
.mud-overlay {
    background-color: rgba(45, 55, 72, 0.5) !important; /* Softer backdrop */
}

.mud-dialog {
    box-shadow: var(--mud-elevation-4);
}

/* MudAppBar - Minimal elevation */
.mud-appbar {
    box-shadow: var(--mud-elevation-1) !important;
}

/* MudSnackbar - Bottom left position with clean styling */
.mud-snackbar {
    border-radius: var(--serenity-border-radius-sm);
}

/* ========================================
   8. ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus indicators - always visible, 2px solid primary */
*:focus-visible {
    outline: 2px solid var(--serenity-primary);
    outline-offset: 2px;
}

/* Ensure price changes use symbols AND color for accessibility */
.price-positive::before {
    content: "↑ ";
}

.price-negative::before {
    content: "↓ ";
}

.price-positive {
    color: var(--serenity-success);
}

.price-negative {
    color: var(--serenity-error);
}

/* ========================================
   9. UTILITY CLASSES
   ======================================== */

/* Color utility classes */
.text-primary {
    color: var(--serenity-primary) !important;
}

.text-secondary {
    color: var(--serenity-secondary) !important;
}

.text-success {
    color: var(--serenity-success) !important;
}

.text-warning {
    color: var(--serenity-warning) !important;
}

.text-error {
    color: var(--serenity-error) !important;
}

.text-neutral-dark {
    color: var(--serenity-neutral-dark) !important;
}

.text-neutral-medium {
    color: var(--serenity-neutral-medium) !important;
}

/* Background utility classes */
.bg-primary {
    background-color: var(--serenity-primary) !important;
}

.bg-surface {
    background-color: var(--serenity-surface) !important;
}

.bg-background {
    background-color: var(--serenity-background) !important;
}

/* Border utility classes */
.border-light {
    border: 1px solid var(--serenity-neutral-light) !important;
}

/* Spacing utility classes */
.p-xs { padding: var(--serenity-spacing-xs) !important; }
.p-sm { padding: var(--serenity-spacing-sm) !important; }
.p-md { padding: var(--serenity-spacing-md) !important; }
.p-lg { padding: var(--serenity-spacing-lg) !important; }
.p-xl { padding: var(--serenity-spacing-xl) !important; }

.m-xs { margin: var(--serenity-spacing-xs) !important; }
.m-sm { margin: var(--serenity-spacing-sm) !important; }
.m-md { margin: var(--serenity-spacing-md) !important; }
.m-lg { margin: var(--serenity-spacing-lg) !important; }
.m-xl { margin: var(--serenity-spacing-xl) !important; }

/* ========================================
   10. RESPONSIVE DESIGN HELPERS
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   END OF SERENITY THEME
   ======================================== */