/*:root {
    --desktop-bg: #e3ded5;
    --bg: #241c12;
    --header-bg: #2f2317;
}*/
:root {
    /* Page / canvas */
    --canvas: #e7e2d8; /* gray-warm page background */
    --frame-label: #a2937a; /* "Desktop"/"Mobile" labels */
    --heading-muted: #8a7a62; /* eyebrow heading */
    --intro-text: #6b5d47; /* intro paragraph */
    --section-label: #7a6c54; /* proposal sub-labels */

    /* Accent (rust / terracotta — tweakable prop) */
    --accent: #c4502a;

    /* Terminal surfaces */
    --term-bg: #241c12; /* terminal body (espresso) */
    --term-chrome: #2e2417; /* title bar */
    --term-panel: #1f1810; /* detail pane / hover row bg */
    --term-bezel: #1a1410; /* phone bezel */
    --term-url-pill: #3a2e1e; /* url chip + hairlines/borders */

    /* Terminal text */
    --text: #e6d9c2; /* primary terminal text */
    --text-dim: #cdbfa6; /* secondary (whoami, descriptions) */
    --text-muted: #a89b82; /* descriptions / meta */
    --text-faint: #8a7c64; /* flags, inactive tabs */
    --text-comment: #5e5240; /* perms, "total 3", tree glyphs */

    /* Terminal accents (syntax-ish) */
    --prompt-green: #9caf6b; /* user@host, $ prompt marks */
    --star-amber: #d9a05b; /* ★ star counts */
    --lang-blue: #7a8a9c; /* language column */

    /* Window traffic-light dots */
    --dot-red: #d9603f;
    --dot-yellow: #d9a05b;
    --dot-green: #9caf6b;

    /* Lang-bar gradient (option pages) */
    --bar-from: #d9603f;
    --bar-to: #d9a05b;

    --font-serif: "Spectral", Georgia, serif;
    --font-mono: "JetBrains Mono", monospace;
}

html,
body {
    margin: 0;
    height: 100%;
}

body {
    background-color: var(--canvas);
}

button,
h1,
h2,
h3,
h4 {
    all: unset;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

.text-green {
    color: var(--prompt-green);
}
.text-accent {
    color: var(--accent);
}

.tree-lines {
    color: var(--text-comment);
}
/*.text-muted {
    color: var(--text-muted);
}*/

body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#terminal {
    max-width: 1000px;
    background: var(--term-bg);
    margin: 3em;
    position: relative;
    border-radius: 15px;
    overflow: hidden;

    color: var(--text);
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 14px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

    @media (max-width: 600px) {
        margin: 0;
        border-radius: 0;
        height: 100%;
    }

    header {
        background: var(--term-chrome);
        color: var(--text);

        padding: 6px 15px;

        @media (max-width: 600px) {
            background: none;
        }
    }

    .header-items {
        display: flex;
        justify-content: space-between;
        place-items: center;

        .header-buttons {
            display: flex;
            gap: 8px;
            .header-btn {
                width: 10px;
                height: 10px;
                border-radius: 100%;
                &:nth-child(1) {
                    background: var(--dot-red);
                }
                &:nth-child(2) {
                    background: var(--dot-yellow);
                }
                &:nth-child(3) {
                    background: var(--dot-green);
                }
            }
        }

        h1 {
            font-size: 1em;
        }

        img {
            width: 30px;
        }
    }
}

main {
    margin: 3em;
    line-height: 1.85;

    section {
        margin-bottom: 1em;
    }
}
.prompt {
    .prompt-user {
        color: var(--prompt-green);
    }
    .prompt-path {
        color: var(--accent);
    }
}

.project-header {
    display: grid;
    grid-template-columns: 110px auto;
    width: 100%;

    @media (max-width: 500px) {
        .project-header-text {
            display: none;
        }
    }

    .project-header-name {
        color: var(--accent);
    }
    .project-header-stars {
        color: var(--star-amber);
    }
    .project-header-text {
        color: var(--text-muted);
    }
}

.project-details {
    margin-left: 30px;
    padding-left: 15px;
    border-left: 1px solid var(--text-comment);

    .project-stats {
        color: var(--text-muted);
        .project-stars {
            color: var(--star-amber);
        }
        .project-lang {
            color: var(--lang-blue);
        }
    }

    &.collapsed {
        display: none;
    }
}

.blinky-cursor {
    width: 8px;
    height: 16px;
    transform: translateY(2px);
    background: var(--text);
    animation: blink 1s steps(1) infinite;
    display: inline-block;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}