/* Logurean — Elegant responsive styles with theme support */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@400;700&display=swap');

:root{
    --bg: #f7f8fb;
    --card: #ffffff;
    --text: #0f1724;
    --muted: #6b7280;
    --accent: #2563eb;
    --accent-2: #7c3aed;
    --radius: 12px;
    --max-width: 900px;
    --container-padding: 1rem;
    --heading-font: 'Playfair Display', serif;
    --body-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

html[data-theme="dark"]{
    --bg: #0b1220;
    --card: #071024;
    --text: #e6eef8;
    --muted: #9aa6b2;
    --accent: #4f9cff;
    --accent-2: #af8bff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:linear-gradient(180deg,var(--bg),#eef4ff 60%);
    color:var(--text);
    font-family:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
    font-kerning:normal;
    -webkit-font-kerning:normal;
}

.page{
    max-width:var(--max-width);
    margin:2.5rem auto;
    padding:var(--container-padding);
}

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.5rem;
}

header .brand{font-size:1.25rem;letter-spacing:.2px;margin:0}
.lead{margin:0.25rem 0 0;color:var(--muted);font-size:1rem}

.card{
    background:var(--card);
    border-radius:var(--radius);
    padding:1.25rem;
    box-shadow:0 10px 30px rgba(22,28,45,0.06);
}

main section{margin-top:1rem}

p{margin:0 0 1rem}

footer{margin-top:1.75rem;color:var(--muted);font-size:0.95rem}

.muted{color:var(--muted)}

.btn{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.6rem 0.95rem;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    color:white;
    border-radius:10px;
    border:0;
    cursor:pointer;
    font-weight:600;
    text-decoration:none;
    box-shadow:0 6px 18px rgba(37,99,235,0.12);
    transition:transform .16s ease, box-shadow .16s ease, opacity .12s;
}
.btn:active{transform:translateY(1px)}
.btn:focus{outline:3px solid rgba(37,99,235,0.16);outline-offset:3px}

.meta{font-size:0.88rem;color:var(--muted)}

/* small utilities */
.stack{display:flex;flex-direction:column;gap:0.9rem}

/* Responsive layout */
@media (min-width:640px){
    header .brand{font-size:1.5rem}
}

@media (min-width:1000px){
    .grid-2{display:grid;grid-template-columns:1fr 320px;gap:1rem;align-items:start}
}

/* headings */
h1{font-size:1.6rem;margin:0 0 .5rem}
h2{font-size:1.15rem;margin:0 0 .5rem}
h3{font-size:1rem;margin:0 0 .5rem}

/* lists */
ul,ol{margin:0 0 1rem 1.25rem}

/* small visual details */
.brand{font-weight:700;color:var(--accent)}
.logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:inline-block;box-shadow:0 6px 18px rgba(124,58,237,0.12)}

/* Preference-aware reduced-motion */
@media (prefers-reduced-motion:reduce){
    .btn{transition:none}
}

/* Accessibility helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}