:root {
    --accent: #171717;
    --accent-strong: #000000;
    --accent-soft: #f4f4f5;
    --ink: #171717;
    --paper: #ffffff;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background-color: var(--paper);
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* ---------- Typography helpers ---------- */
.font-display { font-weight: 700; letter-spacing: -0.03em; }
.text-accent { color: var(--accent); }
.bg-accent { background-color: var(--accent); }
.bg-accent-soft { background-color: var(--accent-soft); }

/* ---------- Navigation ---------- */
.nav-link {
    position: relative;
    color: #71717a;
    font-weight: 500;
    transition: color 150ms ease;
}
.nav-link:hover { color: var(--ink); }

/* ---------- Cards / surfaces ---------- */
.surface {
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 1rem;
    box-shadow: none;
}

.glass-card {
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 1.5rem;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
}

/* ---------- Forms ---------- */
.form-input {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid #e4e4e7;
    background: #ffffff;
    padding: 0.75rem 1rem;
    color: var(--ink);
    outline: none;
    transition: all 150ms ease;
}
.form-input::placeholder { color: #a1a1aa; }
.form-input:focus {
    border-color: #171717;
    box-shadow: 0 0 0 1px #171717;
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--accent);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: #ffffff;
    border: 1px solid transparent;
    transition: all 150ms ease;
    box-shadow: none;
}
.btn-primary:hover, .btn-accent:hover {
    background: var(--accent-strong);
    transform: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid #e4e4e7;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    color: #3f3f46;
    transition: all 150ms ease;
}
.btn-secondary:hover { 
    border-color: #d4d4d8; 
    background: #f4f4f5; 
    color: var(--ink); 
}

/* ---------- Image hover utility ---------- */
.media-zoom { overflow: hidden; }
.media-zoom img { transition: transform 600ms cubic-bezier(0.25, 1, 0.5, 1); }
.group:hover .media-zoom img,
.media-zoom:hover img { transform: scale(1.05); }

/* ---------- Hairline divider ---------- */
.rule {
    height: 1px;
    background: #e4e4e7;
}