/* phoe.be shared design system
Requires Google Fonts — add these tags in :
*/
:root{
--bg:#0b0a0d;
--ink:#f5f1ea;
--muted:#8a8590;
--line:#23202a;
--surface:#131118;
--surface2:#1a1822;
--accent:#e9c46a;
--accent-2:#7b5cff;
--accent-3:#46d9b8;
--accent-4:#ff6b5b;
--serif:'Instrument Serif','Cormorant Garamond',Georgia,serif;
--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--bg);
color:var(--ink);
font-family:var(--sans);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:#000}
nav.top{
position:fixed;top:0;left:0;right:0;z-index:50;
backdrop-filter:blur(18px) saturate(140%);
background:rgba(11,10,13,0.7);
border-bottom:1px solid rgba(255,255,255,0.05);
}
.logo{
font-family:var(--serif);font-style:italic;font-size:1.5rem;
letter-spacing:-0.02em;color:var(--ink);
display:flex;align-items:baseline;gap:2px;
text-decoration:none;
}
.logo b{font-weight:400}
.logo i{color:var(--accent);font-style:italic}
.logo .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin:0 4px;transform:translateY(-3px)}
body::before{
content:'';
position:fixed;inset:0;z-index:9998;
pointer-events:none;
opacity:.038;
background-image:url("data:image/svg+xml;charset=utf-8,");
background-size:180px 180px;
}
[data-theme='light']{
--bg:#f7f4ef;
--ink:#1c1920;
--muted:#706878;
--line:#d8d4cd;
--surface:#ede9e3;
--surface2:#e3dfd8;
}
[data-theme='light'] nav.top{
background:rgba(247,244,239,.9);
border-bottom-color:rgba(0,0,0,.08);
}
[data-theme='light'] body::before{opacity:.025}