/* lukap357.eu — Nocturne tokens + site styles */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/css/fonts/Inter-Regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/css/fonts/Inter-Medium.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/css/fonts/Inter-SemiBold.woff2') format('woff2')}
:root{
  --color-bg:#161826;--color-surface:#232532;--color-text:#e9e9ed;--color-accent:#9184d9;
  --color-neutral-200:#e4e7f5;--color-neutral-300:#cfd3e5;--color-neutral-400:#b2b6ca;
  --color-neutral-600:#75798c;--color-neutral-700:#595d6c;--color-neutral-800:#3f424d;
  --color-accent-100:#f5f4ff;--color-accent-200:#e7e5fe;--color-accent-300:#d2cefd;--color-accent-700:#5d5294;
  --font-body:"Inter",system-ui,sans-serif;
  --radius-md:8px;--radius-lg:14px;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(ellipse 80% 50% at 50% -10%,var(--color-neutral-800),transparent 70%),var(--color-bg);
  color:var(--color-text);font-family:var(--font-body);font-size:15px;line-height:1.55;
}
a{color:var(--color-text);text-decoration:none}
a:hover{color:var(--color-accent-300)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--color-accent) 30%,transparent)}

/* nav */
.nav{display:flex;align-items:center;flex-wrap:wrap;gap:16px;padding:20px clamp(20px,5vw,48px)}
.nav-brand{font-weight:500;font-size:15px;letter-spacing:.02em}
.nav-brand span{color:var(--color-accent)}
.nav-spacer{flex:1}
.nav-links{display:flex;gap:clamp(14px,3vw,28px);font-size:14px}
.nav-links a{color:var(--color-neutral-300)}
.nav-links a:hover{color:var(--color-accent-300)}
.nav-links a[aria-current="page"]{color:var(--color-text)}

/* shared */
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--color-accent-300)}
.rule{width:220px;height:1px;background:linear-gradient(90deg,transparent,var(--color-neutral-600),transparent)}
.rule-left{width:180px;height:1px;background:linear-gradient(90deg,var(--color-neutral-600),transparent)}
footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:24px;font-size:12.5px;color:var(--color-neutral-400)}
footer .dot{color:var(--color-neutral-600)}

/* home hero */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(48px,10vh,120px) 24px;gap:20px}
.hero h1{margin:0;font-weight:500;font-size:clamp(44px,9vw,84px);line-height:1.05;letter-spacing:-.02em}
.hero p{margin:0;max-width:420px;line-height:1.6;color:var(--color-neutral-300);text-wrap:pretty}
.hero .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border:1px solid var(--color-accent);border-radius:var(--radius-md);color:var(--color-accent-200);font-size:14px;min-height:44px;white-space:nowrap}
.btn:hover{background:color-mix(in srgb,var(--color-accent) 12%,transparent);color:var(--color-accent-100)}
.btn i{font-size:18px}
.btn .ext{font-size:14px;opacity:.7}
.chip{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border:1px dashed var(--color-neutral-600);border-radius:var(--radius-md);color:var(--color-neutral-400);font-size:14px;min-height:44px;white-space:nowrap}

/* inner pages */
.page{flex:1;width:100%;margin:0 auto;padding:clamp(32px,7vh,72px) clamp(20px,5vw,48px)}
.page-wide{max-width:860px}
.page-narrow{max-width:640px}
.page h1{margin:12px 0 10px;font-weight:500;font-size:clamp(32px,6vw,48px);letter-spacing:-.02em}
.lede{margin:0 0 36px;max-width:480px;line-height:1.6;color:var(--color-neutral-300);text-wrap:pretty}
.prose p{margin:0 0 14px;line-height:1.7;color:var(--color-neutral-200);text-wrap:pretty}
.prose p+p{color:var(--color-neutral-300)}

/* hobby cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{border:1px solid var(--color-neutral-700);border-radius:var(--radius-lg);padding:22px;background:color-mix(in srgb,var(--color-neutral-800) 40%,transparent);display:flex;flex-direction:column;gap:10px}
.card:hover{border-color:var(--color-accent-700)}
.card i{font-size:24px;color:var(--color-accent-300)}
.card .name{font-size:15px;font-weight:500}
.card .note{font-size:13px;line-height:1.55;color:var(--color-neutral-400)}

/* contact pill */
.pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--color-neutral-600);border-radius:var(--radius-md);font-size:14px;color:var(--color-neutral-200);min-height:44px}
.pill:hover{border-color:var(--color-accent);color:var(--color-accent-200)}
.pill i{font-size:17px}

/* theme toggle - fixed corner button */
.theme-toggle{
  position:fixed;bottom:20px;right:20px;z-index:50;
  width:44px;height:44px;border-radius:50%;
  background:var(--color-surface);
  border:1px solid var(--color-neutral-700);
  color:var(--color-accent-300);
  font-size:19px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.theme-toggle:hover{border-color:var(--color-accent);color:var(--color-accent-100)}

/* light theme */

/* light theme */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --color-bg:#f3f2fa;--color-surface:#ffffff;--color-text:#0e0f1a;--color-accent:#4c3fc0;
    --color-neutral-200:#12131f;--color-neutral-300:#2a2b3d;--color-neutral-400:#454760;
    --color-neutral-600:#6b6e88;--color-neutral-700:#bcc0d4;--color-neutral-800:#e9eaf2;
    --color-accent-100:#150f38;--color-accent-200:#2e2564;--color-accent-300:#2e2564;--color-accent-700:#ded9fc;
  }
}
[data-theme="light"]{
  --color-bg:#f3f2fa;--color-surface:#ffffff;--color-text:#0e0f1a;--color-accent:#4c3fc0;
  --color-neutral-200:#12131f;--color-neutral-300:#2a2b3d;--color-neutral-400:#454760;
  --color-neutral-600:#6b6e88;--color-neutral-700:#bcc0d4;--color-neutral-800:#e9eaf2;
  --color-accent-100:#150f38;--color-accent-200:#2e2564;--color-accent-300:#2e2564;--color-accent-700:#ded9fc;
}