/* main.css - Core styles and variables */

:root {
    /* Colors */
    --md-sys-color-primary: #000000;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-on-surface: #000000;
    --md-sys-color-surface-variant: #f5f5f5;
    --md-sys-color-outline: #949494;

    /* State Layer Opacities */
    --md-state-hover: 0.08;
    --md-state-focus: 0.12;
    --md-state-pressed: 0.12;
    --md-state-dragged: 0.16;

    /* Elevation Values */
    --md-elevation-1: 0px 1px 2px rgba(0,0,0,0.3);
    --md-elevation-2: 0px 2px 4px rgba(0,0,0,0.3);
    --md-elevation-3: 0px 4px 8px rgba(0,0,0,0.3);
    --md-elevation-4: 0px 6px 12px rgba(0,0,0,0.3);

    /* Typography */
    --md-sys-typescale-display-large: 57px;
    --md-sys-typescale-display-medium: 45px;
    --md-sys-typescale-display-small: 36px;
    --md-sys-typescale-headline-large: 32px;
    --md-sys-typescale-headline-medium: 28px;
    --md-sys-typescale-headline-small: 24px;
    --md-sys-typescale-body-large: 16px;
    --md-sys-typescale-body-medium: 14px;
    --md-sys-typescale-body-small: 12px;

    /* Spacing */
    --md-spacing-4: 4px;
    --md-spacing-8: 8px;
    --md-spacing-12: 12px;
    --md-spacing-16: 16px;
    --md-spacing-24: 24px;
    --md-spacing-32: 32px;
    --md-spacing-48: 48px;
    --md-spacing-64: 64px;
    --md-spacing-96: 96px;

    /* Motion */
    --md-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
    --md-easing-emphasized: cubic-bezier(0.2, 0.0, 0, 1.0);
    --md-duration-short: 100ms;
    --md-duration-medium: 200ms;
    --md-duration-long: 300ms;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Space Mono', monospace;
    font-size: var(--md-sys-typescale-body-large);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

body {
    color: var(--md-sys-color-on-surface);
    background-color: var(--md-sys-color-surface);
    min-height: 100vh;
}