:root {
    --olive-50: #f5f7ee;
    --olive-100: #e8ecdb;
    --olive-200: #d2dbbb;
    --olive-300: #b5c492;
    --olive-400: #99ad6e;
    --olive-600: #60723e;
    --olive-700: #4b5932;
    --olive-800: #3e482c;
    --olive-950: #232b18;
}

body.olive-app {
    font-family: 'Inter', sans-serif;
    background: var(--olive-50);
    color: var(--olive-800);
    letter-spacing: -.01em;
}

.olive-header { border-bottom: 1px solid var(--olive-200); }
.olive-header .text-stone-900 { color: var(--olive-950); }
.olive-kicker { display: block; margin-top: 5px; color: var(--olive-600); font: 700 10px/1 'JetBrains Mono', monospace; letter-spacing: .13em; }
.olive-intro { border-left: 4px solid var(--olive-600); padding-left: 20px; }
.olive-intro .text-stone-900 { color: var(--olive-950); letter-spacing: -.045em; }
.olive-intro .text-stone-500 { color: var(--olive-700); }

.project-card {
    position: relative;
    overflow: hidden;
    border-color: var(--olive-200) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(75, 89, 50, .08);
}
.project-card::after { content: '↗'; position: absolute; top: 24px; right: 24px; color: var(--olive-400, #99ad6e); font-size: 20px; opacity: 0; transform: translate(-4px, 4px); transition: opacity .2s, transform .2s; }
.project-card:hover { border-color: var(--olive-600) !important; box-shadow: 0 16px 34px rgba(75, 89, 50, .16); transform: translateY(-2px); }
.project-card:hover::after { opacity: 1; transform: translate(0, 0); }
.project-card .text-stone-900 { color: var(--olive-950); }
.project-card .text-stone-500 { color: var(--olive-700); }
.project-card [class*='bg-sky-'], .project-card [class*='bg-yellow-'], .project-card [class*='bg-blue-'], .project-card [class*='bg-emerald-'] { background: var(--olive-100) !important; }
.project-card [class*='text-sky-'], .project-card [class*='text-yellow-'], .project-card [class*='text-blue-'], .project-card [class*='text-emerald-'] { color: var(--olive-600) !important; }

.olive-app main .text-stone-600 { color: var(--olive-700); }
.olive-app main .text-blue-600, .olive-app main .hover\\:text-blue-700:hover { color: var(--olive-600); }
.olive-footer { border-top: 1px solid var(--olive-200); color: var(--olive-700) !important; }
.olive-footer .hover\\:bg-stone-100:hover { background: var(--olive-100) !important; }
.olive-footer .hover\\:text-stone-600:hover { color: var(--olive-600) !important; }

.pastel-shadow { box-shadow: 0 8px 24px rgba(75, 89, 50, .08); }
::selection { background: var(--olive-300); color: var(--olive-950); }

.theme-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--olive-300); border-radius: 12px; padding: 9px 11px; color: var(--olive-700); background: var(--olive-100); font: 700 12px/1 'Inter', sans-serif; cursor: pointer; }.theme-toggle:hover { border-color: var(--olive-600); background: var(--olive-200); }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body.olive-app { color: #f5f7ee; background: #232b18; }
html[data-theme="dark"] .olive-header, html[data-theme="dark"] .olive-footer { border-color: #4b5932; }
html[data-theme="dark"] .olive-header .text-stone-900, html[data-theme="dark"] .olive-intro .text-stone-900, html[data-theme="dark"] .project-card .text-stone-900 { color: #f5f7ee; }
html[data-theme="dark"] .olive-kicker { color: #b5c492; } html[data-theme="dark"] .olive-intro .text-stone-500, html[data-theme="dark"] .olive-app main .text-stone-600, html[data-theme="dark"] .project-card .text-stone-500 { color: #d2dbbb; }
html[data-theme="dark"] .project-card { border-color: #4b5932 !important; background: #363f28 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }.project-card:hover { border-color: #99ad6e !important; } html[data-theme="dark"] .theme-toggle { color: #e8ecdb; border-color: #4b5932; background: #3e482c; } html[data-theme="dark"] .theme-toggle:hover { background: #4b5932; }
html[data-theme="dark"] .olive-footer { color: #b5c492 !important; } html[data-theme="dark"] .olive-footer .hover\\:bg-stone-100:hover { background: #3e482c !important; } html[data-theme="dark"] .olive-footer .hover\\:text-stone-600:hover { color: #e8ecdb !important; }