:root {
    --portfolio-ink: #070d18;
    --portfolio-surface: #0e1626;
    --portfolio-surface-raised: #152033;
    --portfolio-text: #e8eef8;
    --portfolio-muted: #8b9bb3;
    --portfolio-line: rgba(180, 200, 230, 0.16);
    --portfolio-primary: #5eb8ff;
    --portfolio-primary-strong: #2f8fef;
    --portfolio-accent: #3dd6c3;
    --portfolio-focus: #ffc14d;
    --portfolio-radius: 1rem;
}

html:not(.dark) {
    --portfolio-ink: #f4f7fb;
    --portfolio-surface: #ffffff;
    --portfolio-surface-raised: #e8eef6;
    --portfolio-text: #0f1a2b;
    --portfolio-muted: #4a5d75;
    --portfolio-line: rgba(15, 26, 43, 0.14);
    --portfolio-primary: #0b6bcb;
    --portfolio-primary-strong: #0856a5;
    --portfolio-accent: #0a8f7c;
    --portfolio-focus: #9a5f00;
}

/* Existing templates use Tailwind semantic utilities with fixed dark values.
   Remap them in light mode so legacy and refreshed pages remain readable. */
html:not(.dark) .text-on-surface,
html:not(.dark) .text-white { color: var(--portfolio-text) !important; }
html:not(.dark) .text-on-surface-variant,
html:not(.dark) .text-gray-200,
html:not(.dark) .text-gray-400,
html:not(.dark) .text-outline,
html:not(.dark) .text-outline-variant { color: var(--portfolio-muted) !important; }
html:not(.dark) .text-primary { color: var(--portfolio-primary) !important; }
html:not(.dark) .text-primary-container { color: var(--portfolio-primary-strong) !important; }
html:not(.dark) .bg-background,
html:not(.dark) .bg-background-dark,
html:not(.dark) .bg-surface,
html:not(.dark) .bg-surface-container-lowest { background-color: var(--portfolio-ink) !important; }
html:not(.dark) .bg-surface-container-low,
html:not(.dark) .bg-surface-container,
html:not(.dark) .bg-surface-container-high { background-color: var(--portfolio-surface) !important; }
html:not(.dark) .bg-surface-container-highest { background-color: var(--portfolio-surface-raised) !important; }
html:not(.dark) .border-outline-variant { border-color: var(--portfolio-line) !important; }
html:not(.dark) .architectural-glass { background-color: color-mix(in srgb, var(--portfolio-surface) 92%, transparent) !important; }

html { scroll-behavior: smooth; }
body {
    min-width: 320px;
    background: var(--portfolio-ink);
    color: var(--portfolio-text);
    line-height: 1.6;
}

body, button, a, input, textarea { font-family: Inter, system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', Inter, sans-serif; }

.skip-link {
    position: fixed;
    z-index: 1000;
    left: 1rem;
    top: -4rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: var(--portfolio-primary);
    color: var(--portfolio-ink);
    font-weight: 700;
    transition: top .2s ease;
}
.skip-link:focus { top: 1rem; }

:where(a, button, input, textarea, summary):focus-visible {
    outline: 3px solid var(--portfolio-focus);
    outline-offset: 3px;
}

.portfolio-surface { background: var(--portfolio-surface); }
.portfolio-raised { background: var(--portfolio-surface-raised); }
.portfolio-muted { color: var(--portfolio-muted); }
.portfolio-line { border-color: var(--portfolio-line); }
.portfolio-primary { color: var(--portfolio-primary); }
.portfolio-primary-bg { background: var(--portfolio-primary-strong); color: var(--portfolio-ink); }

.portfolio-glass {
    background: color-mix(in srgb, var(--portfolio-surface) 86%, transparent);
    border: 1px solid var(--portfolio-line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.portfolio-card {
    border: 1px solid var(--portfolio-line);
    border-radius: var(--portfolio-radius);
    background: var(--portfolio-surface);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.portfolio-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--portfolio-primary) 58%, transparent); box-shadow: 0 18px 50px rgba(0, 0, 0, .18); }

.hero-portrait-root { margin: 0; }
.hero-portrait-frame {
    position: relative;
    min-height: 26rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--portfolio-line);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--portfolio-primary-strong) 32%, transparent), transparent 46%),
        radial-gradient(circle at 78% 82%, color-mix(in srgb, var(--portfolio-accent) 20%, transparent), transparent 48%),
        var(--portfolio-surface);
    isolation: isolate;
}
.hero-portrait-frame::before {
    content: '';
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--portfolio-primary-strong) 24%, transparent), transparent 60%);
    filter: blur(40px);
    pointer-events: none;
}
.hero-portrait-photo {
    position: relative;
    width: min(14rem, 58%);
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--portfolio-primary) 55%, transparent);
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--portfolio-primary) 12%, transparent),
        0 24px 60px color-mix(in srgb, var(--portfolio-primary-strong) 28%, transparent);
    transform: perspective(700px) rotateY(-10deg) rotateX(3deg);
    transition: transform .3s ease;
}
.hero-portrait-frame:hover .hero-portrait-photo { transform: perspective(700px) rotateY(-6deg) rotateX(2deg) translateY(-4px); }

.portfolio-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem;
    border: 1px solid var(--portfolio-line);
    border-radius: 999px;
    color: var(--portfolio-muted);
    font: 600 .7rem/1.2 'Space Grotesk', monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.portfolio-badge::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--portfolio-accent); }

.pseudo-depth { transform: translateZ(0); transition: transform .2s ease; }
.pseudo-depth:hover { transform: perspective(900px) rotateX(1deg) rotateY(-1deg) translateY(-3px); }

.catatan-content { color: var(--portfolio-muted); font-size: 1rem; line-height: 1.85; overflow-wrap: anywhere; }
.catatan-content > * + * { margin-top: 1.25rem; }
.catatan-content h1, .catatan-content h2, .catatan-content h3, .catatan-content h4 { color: var(--portfolio-text); line-height: 1.2; margin-top: 2.25rem; }
.catatan-content h1 { font-size: 2.2rem; }
.catatan-content h2 { font-size: 1.7rem; padding-bottom: .55rem; border-bottom: 1px solid var(--portfolio-line); }
.catatan-content h3 { font-size: 1.3rem; }
.catatan-content a { color: var(--portfolio-primary); text-decoration: underline; text-underline-offset: .2em; }
.catatan-content strong { color: var(--portfolio-text); }
.catatan-content ul, .catatan-content ol { padding-left: 1.5rem; }
.catatan-content ul { list-style: disc; }
.catatan-content ol { list-style: decimal; }
.catatan-content li + li { margin-top: .35rem; }
.catatan-content blockquote { border-left: 3px solid var(--portfolio-primary); background: var(--portfolio-surface); padding: 1rem 1.25rem; color: var(--portfolio-text); }
.catatan-content code { background: var(--portfolio-surface); color: var(--portfolio-primary); padding: .15rem .35rem; border-radius: .25rem; }
.catatan-content pre { overflow-x: auto; border: 1px solid var(--portfolio-line); background: var(--portfolio-surface-raised); padding: 1rem; }
.catatan-content pre code { padding: 0; background: transparent; }
.catatan-content img { display: block; max-width: 100%; height: auto; border: 1px solid var(--portfolio-line); }
.catatan-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.catatan-content th, .catatan-content td { border: 1px solid var(--portfolio-line); padding: .65rem .8rem; text-align: left; }
.catatan-content th { color: var(--portfolio-text); background: var(--portfolio-surface); }
.catatan-content hr { border: 0; border-top: 1px solid var(--portfolio-line); margin: 2rem 0; }

@media (max-width: 767px) {
    .hero-portrait-frame { min-height: 22rem; }
    .hero-portrait-photo { width: min(12rem, 62%); transform: none; }
    .hero-portrait-frame:hover .hero-portrait-photo { transform: translateY(-2px); }
    .pseudo-depth:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .portfolio-card:hover, .pseudo-depth:hover { transform: none; }
}