/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* Light theme only */
:root{
    --bg:#f7f6f9;
    --bg-2:#eceaf2;
    --card:#ffffffee;
    --stroke:#e6e2f0;
    --cream:#1f2430; /* base text color on light bg */
    --pink:#c2478b;
    --gold:#b7892a;
    --link:#6a2ca8;
}

/* Base styles */
body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
    line-height: 1.6;
    color: var(--cream);
    background: var(--bg);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    margin-bottom: 0.5em;
}

p { margin-bottom: 1em; }

/* Links */
a {
    color: var(--link);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Lists */
ul, ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

/* Images */
img { max-width: 100%; height: auto; }

/* Forms */
input, textarea, select, button {
    font: inherit;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 3px;
}

button {
    background: linear-gradient(180deg, #8236d8, #5b26a4);
    color: white;
    border: none;
    cursor: pointer;
}
button:hover {
    background: linear-gradient(180deg, #9747ff, #6b2ac2);
}

/* Code */
code {
    font-family: monospace;
    background: #f1f3f5;
    color: #1f2430;
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

/* Container */
.container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Smooth transitions */
html, body { transition: background-color .3s ease, color .3s ease; }