/* Shared design system for vigneshnagarajan.me
   Linked by index.html, experiences.html, and awards.html.
   Only the conflict-free core lives here (theme tokens, base elements,
   toggle, reveal, scroll-progress/back-to-top, footer link treatment,
   entrance keyframes, reduced-motion). Page-specific rules stay inline
   in each page's <style>. Edit shared look-and-feel here, once. */

/* Self-hosted Average (SIL OFL) — no external font requests */
@font-face{font-family:'Average';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/average-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Average';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/average-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* --glow is the accent as a bare "r,g,b" triple so glows can vary their alpha
   via rgba(var(--glow),a). It tracks --accent per theme: the dark gold washes
   out on the cream light background, so light mode uses the darker gold. */
:root{--bg:#111;--surface:#1A1A1A;--surface2:#222;--border:#2E2E2E;--text:#F0EDE8;--muted:#A6A6A6;--accent:#C9A96E;--accent2:#7EB8A4;--glow:201,169,110;--r:10px;--rb:999px;--f:'Average',Georgia,serif;--t:0.2s ease;--mx:-500px;--my:-500px}
[data-theme=light]{--bg:#E8E4DE;--surface:#FFFFFF;--surface2:#F5F3EF;--border:#C0BAB0;--text:#1A1A1A;--muted:#6B6760;--accent:#8B6A3A;--accent2:#3A7A66;--glow:139,106,58}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--f);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;transition:background var(--t),color var(--t)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle 160px at var(--mx) var(--my),rgba(var(--glow),0.13) 0%,rgba(0,0,0,0.07) 55%,transparent 100%)}
/* The dark midstop that softens the glow on #111 reads as a grey smudge over
   the cream light background, so light mode drops it for a clean gold wash. */
[data-theme=light] body::after{background:radial-gradient(circle 160px at var(--mx) var(--my),rgba(var(--glow),0.10) 0%,transparent 70%)}
a{color:inherit;text-decoration:none}

.toggle{width:36px;height:36px;border-radius:var(--rb);border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:background var(--t),color var(--t),transform .15s}
.toggle:hover{background:var(--surface2);color:var(--text);transform:scale(1.08)}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}

#prog{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:200;transition:transform .08s linear;will-change:transform}
#top{position:fixed;right:1.4rem;bottom:1.4rem;width:42px;height:42px;border-radius:var(--rb);border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity var(--t),transform var(--t),color var(--t),border-color var(--t),background var(--t);z-index:150;display:flex;align-items:center;justify-content:center;font-size:1.05rem;line-height:1}
#top.show{opacity:1;pointer-events:auto;transform:none}
#top:hover{color:var(--text);border-color:var(--accent);background:var(--surface2)}

footer a{position:relative;color:var(--muted);transition:color var(--t)}
footer a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t)}
footer a:hover{color:var(--accent)}
footer a:hover::after{transform:scaleX(1)}
footer a.md-link{color:var(--accent2)}
footer a.md-link:hover{color:var(--accent)}
.md-arrow,.back-arrow{display:inline-block;transition:transform .2s ease}
.md-link:hover .md-arrow{transform:translate(2px,-2px)}
.footer-back:hover .back-arrow{transform:translateX(-3px)}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-delay:0!important;transition-duration:.001ms!important}html{scroll-behavior:auto}.reveal{opacity:1!important;transform:none!important}}

/* Accessibility: keyboard focus (mouse users unaffected via :focus-visible),
   skip link, and a landmark focus target. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.skip-link{position:absolute;left:8px;top:-48px;z-index:300;background:var(--accent);color:var(--bg);padding:.5rem 1rem;border-radius:var(--r);font-size:.8rem;letter-spacing:.06em;transition:top .15s ease}
.skip-link:focus{top:8px}
main:focus{outline:none}