/**
 * @fileoverview Base Styles
 * @description Global styles, CSS custom properties, and base typography following
 * Material Design 3 specifications. Defines the foundation for the entire application
 * including typography scale, spacing system, and elevation tokens.
 *
 * @author Quantio Development Team
 * @version 1.0.1
 */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

/**
 * Root CSS variables for Material Design 3 design system.
 * These variables define typography, spacing, and elevation tokens
 * that are used throughout the application.
 */
:root {
    /**
     * Base font family for the application.
     * Uses Roboto, the Material Design typeface.
     */
    --md-font-family: "Roboto", sans-serif;

    /* ======================================================================
       Typography Scale
       Material Design 3 typography system with display, headline, title,
       label, and body text styles. Each style includes regular and
       emphasized (bold) variants.
       ====================================================================== */

    /* Text Display */
    --md-text-display-large: 400 57px/64px var(--md-font-family);
    --md-text-display-large-emphasized: 500 57px/64px var(--md-font-family);
    --md-text-display-medium: 400 45px/52px var(--md-font-family);
    --md-text-display-medium-emphasized: 500 45px/52px var(--md-font-family);
    --md-text-display-small: 400 36px/44px var(--md-font-family);
    --md-text-display-small-emphasized: 500 36px/44px var(--md-font-family);

    /* Text Headline */
    --md-text-headline-large: 400 32px/40px var(--md-font-family);
    --md-text-headline-large-emphasized: 500 32px/40px var(--md-font-family);
    --md-text-headline-medium: 400 28px/36px var(--md-font-family);
    --md-text-headline-medium-emphasized: 500 28px/36px var(--md-font-family);
    --md-text-headline-small: 400 24px/32px var(--md-font-family);
    --md-text-headline-small-emphasized: 500 24px/32px var(--md-font-family);

    /* Text Title */
    --md-text-title-large: 400 22px/28px var(--md-font-family);
    --md-text-title-large-emphasized: 500 22px/28px var(--md-font-family);
    --md-text-title-medium: 500 16px/24px var(--md-font-family);
    --md-text-title-medium-emphasized: 700 16px/24px var(--md-font-family);
    --md-text-title-small: 500 14px/20px var(--md-font-family);
    --md-text-title-small-emphasized: 700 14px/20px var(--md-font-family);

    /* Text Label */
    --md-text-label-large: 500 14px/20px var(--md-font-family);
    --md-text-label-large-emphasized: 700 14px/20px var(--md-font-family);
    --md-text-label-medium: 500 12px/16px var(--md-font-family);
    --md-text-label-medium-emphasized: 700 12px/16px var(--md-font-family);
    --md-text-label-small: 500 11px/16px var(--md-font-family);
    --md-text-label-small-emphasized: 700 11px/16px var(--md-font-family);

    /* Text Body */
    --md-text-body-large: 400 16px/24px var(--md-font-family);
    --md-text-body-large-emphasized: 500 16px/24px var(--md-font-family);
    --md-text-body-medium: 400 14px/20px var(--md-font-family);
    --md-text-body-medium-emphasized: 500 14px/20px var(--md-font-family);
    --md-text-body-small: 400 12px/16px var(--md-font-family);
    --md-text-body-small-emphasized: 500 12px/16px var(--md-font-family);

    /* Letter spacing */
    --md-text-display-large-letter-spacing: -.25px;
    --md-text-display-medium-letter-spacing: 0;
    --md-text-display-small-letter-spacing: 0;
    --md-text-headline-large-letter-spacing: 0;
    --md-text-headline-medium-letter-spacing: 0;
    --md-text-headline-small-letter-spacing: 0;
    --md-text-title-large-letter-spacing: 0;
    --md-text-title-medium-letter-spacing: .15px;
    --md-text-title-small-letter-spacing: .1px;
    --md-text-label-large-letter-spacing: .1px;
    --md-text-label-medium-letter-spacing: .5px;
    --md-text-label-small-letter-spacing: .5px;
    --md-text-body-large-letter-spacing: .5px;
    --md-text-body-medium-letter-spacing: .25px;
    --md-text-body-small-letter-spacing: .4px;

    /* ======================================================================
       Spacing System
       Material Design uses 4px increments for consistent spacing.
       ====================================================================== */
    --md-spacing: 4px;

    /* ======================================================================
       Elevation System
       Material Design elevation tokens for light and dark themes.
       Each elevation level defines border-radius and box-shadow values.
       ====================================================================== */

    --md-elevation-light-1-border-radius: 1rem;
    --md-elevation-light-1-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);

    --md-elevation-light-2-border-radius: 1rem;
    --md-elevation-light-2-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);

    --md-elevation-light-3-border-radius: 1rem;
    --md-elevation-light-3-box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);

    --md-elevation-light-4-border-radius: 1rem;
    --md-elevation-light-4-box-shadow: 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.30);

    --md-elevation-light-5-border-radius: 1rem;
    --md-elevation-light-5-box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px 0 rgba(0, 0, 0, 0.30);

    --md-elevation-dark-1-border-radius: 1rem;
    --md-elevation-dark-1-box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30);

    --md-elevation-dark-2-border-radius: 1rem;
    --md-elevation-dark-2-box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.30);

    --md-elevation-dark-3-border-radius: 1rem;
    --md-elevation-dark-3-box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);

    --md-elevation-dark-4-border-radius: 1rem;
    --md-elevation-dark-4-box-shadow: 0 6px 10px 4px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.30);

    --md-elevation-dark-5-border-radius: 1rem;
    --md-elevation-dark-5-box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px 0 rgba(0, 0, 0, 0.30);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */

/**
 * Universal box-sizing reset.
 * Ensures consistent box model calculation across all elements.
 */
* {
    box-sizing: border-box;
}

/**
 * Base body styles.
 * Sets up flex layout, typography, and theme-aware colors.
 */
body {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    min-height: 100vh;
}

/**
 * Main content container.
 * Centers content with max-width constraint and provides consistent spacing.
 */
main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
    max-width: 500px;
    margin: 0 auto;
}

/* ==========================================================================
   Header Component
   ========================================================================== */

/**
 * Header container for title and theme controls.
 * Uses flexbox for horizontal alignment.
 */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/**
 * Main heading (application title).
 * Uses theme-aware color and medium font weight.
 */
h1 {
    color: var(--md-sys-color-on-background);
    font-weight: 500;
    margin: 0;
}

/* ==========================================================================
   Theme Controls
   ========================================================================== */

/**
 * Container for theme toggle and contrast selector.
 * Groups theme-related controls horizontally.
 */
.theme-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/**
 * Theme toggle button.
 * Circular button for switching between light and dark themes.
 */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-background);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.theme-toggle:hover {
    background: var(--md-sys-color-surface-container-highest);
}

/**
 * Theme toggle icon container.
 * Icons are hidden by default and shown based on current theme.
 */
.theme-toggle__icon {
    display: none;
}

/**
 * Show appropriate icon based on theme.
 * - Light theme: shows dark icon (moon) to indicate ability to switch to dark
 * - Dark theme: shows light icon (sun) to indicate ability to switch to light
 */
:root[data-theme="light"] .theme-toggle__icon--dark,
:root:not([data-theme]) .theme-toggle__icon--dark {
    display: block;
}

:root[data-theme="dark"] .theme-toggle__icon--light {
    display: block;
}

/**
 * Contrast selector container.
 * Groups contrast level buttons in a pill-shaped container.
 */
.contrast-selector {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--md-sys-color-surface-container);
    border-radius: 20px;
}

/**
 * Contrast selector button.
 * Individual button for selecting contrast level (default, medium, high).
 */
.contrast-selector__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.contrast-selector__btn:hover {
    background: var(--md-sys-color-surface-container-high);
}

/**
 * Active state for contrast selector button.
 * Uses secondary container colors to indicate selection.
 */
.contrast-selector__btn--active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.contrast-selector__btn--active:hover {
    background: var(--md-sys-color-secondary-container);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/**
 * Green text color utility.
 * Used for accent coloring in the application title.
 */
.text--green {
    color: #4CAF50;
}

/**
 * Red text color utility.
 * Used for accent coloring in the application title.
 */
.text--red {
    color: #F44336;
}