@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Press+Start+2P&display=swap');

:root {
    /* Color Palette */
    --primary: #ff9469;
    --secondary: #ffd7b6;
    --accent: #ff8800;
    --background: #FFF5E1;
    --text: #2C2C2C;
    --text-muted: #555555;
    --card-bg: #FFFDF9;

    /* Retro Specifics */
    --border-width: 4px;
    --shadow-offset: 8px;
    --font-heading: 'Press Start 2P', cursive;
    --font-main: 'Courier Prime', monospace;

    /* Component Mapping */
    --pinzy-bg: var(--secondary);
    --header-pinzy: var(--primary);
    --dark-pinzy: #d1724d;
    --text-dark: var(--text);
    --blue-accent: var(--accent);
    --border-white: #FFFFFF;
    --border-black: var(--text);

    --sidebar-bg: #FFF5E1;

    /* Status colors (used by alert modal) */
    --success-pixel: #4ade80;
    --error-pixel: #f87171;
    --warning-pixel: var(--accent);
    --info-pixel: #60a5fa;
}

html[data-theme="dark"] {
    /* Core orange identity (muted, not neon) */
    --primary: #b97a52;
    /* soft amber-orange */
    --secondary: #22160f;
    /* warm dark brown */
    --accent: #c77a4a;
    /* burnt orange (not neon) */

    /* Backgrounds (no harsh black) */
    --background: #0f0b09;
    /* warm near-black */
    --card-bg: #17110d;
    /* soft lifted surface */
    --sidebar-bg: #130e0b;

    /* Text (less glowing, more paper-like) */
    --text: #e6d6c8;
    /* warm cream */
    --text-muted: #a48f82;
    /* dusty beige */

    /* UI mapping */
    --pinzy-bg: var(--secondary);
    --header-pinzy: var(--primary);
    --dark-pinzy: #2a1a12;

    --text-dark: var(--text);
    --blue-accent: #d08a5a;

    /* IMPORTANT FIX: borders should NOT be orange */
    --border-white: #2b211c;
    /* subtle warm outline */
    --border-black: #0b0705;

    /* Status colors (also toned down) */
    --success-pixel: #6fbf9e;
    --error-pixel: #d46a6a;
    --warning-pixel: #c77a4a;
    --info-pixel: #7aa2c2;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: box-shadow 0.1s ease-in-out, transform 0.1s ease-in-out;
}

body {
    background-color: var(--background);
    font-family: var(--font-main);
    color: var(--text);
}

main {
    /* 220px sidebar + 4px border + 4px shadow + 20px breathing room */
    margin-left: 248px;
    margin-right: 30px;
    margin-top: 3rem;
    margin-bottom: 4rem;
    padding: 20px;
    position: relative;
    box-sizing: border-box;
}

/* Center main containers on desktop while preventing sidebar overlap */
.create-container,
.admin-container,
.settings-container,
.analytics-container,
.profile-container,
.post-page-main {
    margin-left: max(248px, calc((100% - 1000px) / 2)) !important;
    margin-right: auto !important;
    max-width: 1000px;
    width: auto;
}

main img {
    max-width: 100%;
    height: auto;
    display: block;
}

.maxText {
    display: inline-block;
    max-width: 200px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.maxTextProfile {
    display: inline-block;
    max-width: 400px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

@media (max-width: 768px) {
    main {
        margin-left: 0;
        margin-right: 0;
        margin-top: 60px;
        /* clear mobile top bar */
        padding-bottom: 80px;
        /* clear mobile bottom nav */
    }

    .create-container,
    .admin-container,
    .settings-container,
    .analytics-container,
    .profile-container,
    .post-page-main {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        padding: 15px !important;
    }
}