/* Global resets and root variables */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Color palette – light theme defaults */
    --bg: #f5f5f5;
    --display-bg: #222222;
    --display-color: #ffffff;
    --btn-bg: #f0f0f0;
    --btn-hover-bg: #d4d4d4;
    --btn-color: #333333;
    --operator-bg: #ff9500;
    --operator-color: #ffffff;
    --digit-bg: #ffffff;
    --digit-color: #000000;
    --clear-bg: #ff3b30;
    --clear-color: #ffffff;
    --equals-bg: #34c759;
    --equals-color: #ffffff;
    --error-bg: #ffebeb;
    --error-color: #d8000c;
    --focus-color: #3399ff;

    /* Sizing */
    --font-base: 1rem;
    --font-display: 2rem;
    --font-button: 1.5rem;
    --spacing: 0.5rem;
    --border-radius: 0.5rem;
}

/* Dark mode overrides */
body.dark {
    --bg: #121212;
    --display-bg: #1e1e1e;
    --display-color: #e0e0e0;
    --btn-bg: #2c2c2c;
    --btn-hover-bg: #3a3a3a;
    --btn-color: #e0e0e0;
    --operator-bg: #ff9500;
    --operator-color: #ffffff;
    --digit-bg: #1e1e1e;
    --digit-color: #e0e0e0;
    --clear-bg: #ff3b30;
    --clear-color: #ffffff;
    --equals-bg: #34c759;
    --equals-color: #ffffff;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--font-base);
    color: var(--display-color);
}

/* Calculator container – centered, responsive */
.calculator {
    display: flex;
    flex-direction: column;
    background: var(--btn-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    margin: var(--spacing);
}

/* Display input */
.display {
    background: var(--display-bg);
    color: var(--display-color);
    font-size: var(--font-display);
    text-align: right;
    padding: 0.75rem 1rem;
    min-height: 3rem;
    line-height: 1.2;
    overflow-x: auto;
    font-family: "Courier New", Courier, monospace;
    border: none;
    cursor: default;
}

.display:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.display.error {
    background: var(--error-bg);
    color: var(--error-color);
}

/* Keypad grid */
.keypad {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing);
    padding: var(--spacing);
    background: var(--btn-bg);
}

/* Base button styling */
.btn {
    font-size: var(--font-button);
    aspect-ratio: 1;
    border: none;
    border-radius: var(--border-radius);
    background: var(--btn-bg);
    color: var(--btn-color);
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn:hover,
.btn:focus {
    background: var(--btn-hover-bg);
    outline: none;
    transform: translateY(1px);
}

/* Digit buttons */
.btn.digit {
    background: var(--digit-bg);
    color: var(--digit-color);
}

.btn.digit:hover {
    background: var(--digit-bg);
}

/* Operator buttons */
.btn.operator {
    background: var(--operator-bg);
    color: var(--operator-color);
}

.btn.operator:hover {
    background: #e08900; /* slightly darker accent */
}

/* Clear button */
.btn.clear {
    background: var(--clear-bg);
    color: var(--clear-color);
}

.btn.clear:hover {
    background: #e03228; /* darker red */
}

/* Equals button – spans two columns */
.btn.equals {
    background: var(--equals-bg);
    color: var(--equals-color);
    grid-column: span 2;
}

.btn.equals:hover {
    background: #28a745; /* darker green */
}

/* Placeholder (for layout consistency) */
.placeholder {
    visibility: hidden;
}

/* Focus-visible for accessibility */
.btn:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .calculator {
        width: 90vw;
    }
    .display {
        font-size: 2.5rem;
    }
    .btn {
        font-size: 2rem;
        padding: 1.5rem;
    }
    .keypad {
        gap: 0.25rem;
        padding: 0.25rem;
    }
}

/* Additional smaller breakpoints */
@media (max-width: 480px) {
    .btn {
        font-size: 1.75rem;
        padding: 1rem;
    }
}

@media (max-width: 350px) {
    :root {
        --font-display: 1.5rem;
        --font-button: 1.2rem;
    }
    .calculator {
        margin: 0.25rem;
    }
    .display {
        padding: 0.5rem 0.75rem;
    }
    .keypad {
        gap: 0.25rem;
        padding: 0.25rem;
    }
}
