/*
 * Khoj Website Styles
 * Uses shared design tokens for brand consistency
 */

/* Import shared design tokens */
@import url('./design-tokens.css');

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

/* Layout container */
.container {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--padding-container);
}

/* Header */
header {
    padding: var(--space-20) 0 var(--space-16);
    text-align: center;
}

header h1 {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-normal);
    letter-spacing: var(--tracking-wider);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-4);
}

header h1 a {
    color: inherit;
    text-decoration: none;
}

header .tagline {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Navigation */
nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-7);
    padding: var(--space-4) var(--padding-container);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
}

nav a {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-nav);
    text-decoration: none;
    transition: color var(--transition-fast);
}

nav a:hover {
    color: var(--color-link-hover);
}

/* Main content */
main {
    padding: 0 0 var(--space-12);
}

/* Sections */
section {
    margin-bottom: var(--space-12);
}

/* Headings */
h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

h2:first-of-type {
    margin-top: var(--space-8);
}

h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

/* Paragraphs */
p {
    margin-bottom: var(--space-7);
    color: var(--color-text);
}

p:last-child {
    margin-bottom: 0;
}

/* Emphasis text (italic lead-ins) */
p em,
p strong.lead {
    font-style: italic;
}

/* Links */
a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* Product cards */
.product {
    margin-bottom: var(--space-8);
}

.product h3 a {
    color: var(--color-text);
}

.product h3 a::after {
    content: ' ↗';
    font-size: 0.8em;
    opacity: 0.5;
}

.product h3 a:hover {
    color: var(--color-text-muted);
}

.product h3 a:hover::after {
    opacity: 1;
}

/* Call-to-action button */
.cta-button {
    display: inline-block;
    padding: 10px var(--padding-container);
    border: 1px solid var(--color-text);
    border-radius: var(--radius-full);
    font-family: var(--font-heading);
    font-size: 16px;
    color: var(--color-link-hover);
    text-decoration: none;
    transition: all var(--transition-fast);
    margin-top: var(--space-4);
}

.cta-button:hover {
    background-color: var(--color-button-bg-hover);
    color: var(--color-button-text-hover);
}

/* Badge/tag for new items */
.badge {
    display: inline-block;
    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-badge-text);
    background: var(--color-badge-bg);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    margin-right: var(--space-2);
}

/* Announce link */
.announce-link {
    display: inline-block;
    margin-top: var(--space-5);
    font-size: var(--text-base);
}

.announce-link .badge {
    vertical-align: middle;
}

/* Footer */
footer {
    padding: var(--space-12) 0 var(--padding-container);
    text-align: center;
    border-top: 1px solid var(--color-border);
}

footer nav {
    position: static;
    justify-content: center;
    padding: 0;
    margin-bottom: var(--padding-container);
}

footer p {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: 0;
}

footer .copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

footer .copyright a {
    color: var(--color-text-muted);
}

footer .copyright a:hover {
    color: var(--color-link-hover);
}

footer .separator {
    color: var(--color-separator);
}

/* Page header (for subpages) */
header.page-header {
    padding: var(--space-16) 0 var(--space-10);
}

header.page-header h1 {
    font-size: var(--text-3xl);
    margin-bottom: 0;
}

/* Legal pages */
.legal h2 {
    margin-top: 0;
    margin-bottom: var(--padding-container);
}

.legal h3 {
    margin-top: 36px;
    margin-bottom: var(--space-3);
}

.legal h4 {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin-top: var(--padding-container);
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.legal p {
    margin-bottom: var(--space-4);
}

.legal p.meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: var(--space-8);
}

.legal ul {
    margin: 0 0 var(--space-4) var(--padding-container);
    color: var(--color-text);
}

.legal ul li {
    margin-bottom: var(--space-2);
}

.legal strong {
    font-weight: var(--font-semibold);
}

/* Responsive */
@media (max-width: 768px) {
    nav {
        position: static;
        justify-content: center;
        padding: var(--space-4);
        gap: var(--space-5);
    }

    header {
        padding: var(--space-10) 0 var(--space-10);
    }

    header h1 {
        font-size: 36px;
    }

    .container {
        padding: 0 var(--padding-container-mobile);
    }

    h2 {
        font-size: var(--text-lg);
        margin-top: 36px;
    }

    footer nav {
        flex-wrap: wrap;
        gap: var(--space-4);
    }
}