/* ==========================================================================
   InfyPress V2 — Base Styles
   Body, typography, links, code — all use design tokens
   ========================================================================== */

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    color: var(--text-primary);
    background-color: var(--bg-base);
    line-height: var(--leading-normal);
    background-size: 24px 24px;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-position: top center;
}

/* Gutenberg block editor iframe — the iframe body carries both the raw
   `body` rule above (via enqueue_block_assets) AND a scoped copy under
   `.editor-styles-wrapper` (via add_editor_style). Mirror the grid + base
   color onto the wrapper so the grid shows inside the editor canvas the
   same way it does on the frontend. */
.editor-styles-wrapper {
    background-color: var(--bg-base);
    background-size: 24px 24px;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-position: top center;
}

/* --- Headings --- */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
}

h1 { font-size: var(--text-5xl); font-weight: 700; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

/* --- Paragraphs --- */

p {
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.lead {
    font-size: var(--text-lg);
    color: var(--text-secondary);
}

/* --- Links --- */

a:hover {
    color: var(--text-primary);
}

/* --- Text Utilities --- */

.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-mono {
    font-family: var(--font-mono);
}

.text-muted {
    color: var(--text-secondary);
}

/* --- Code --- */

code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 2px 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    overflow-x: auto;
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

pre code {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
}

/* --- Horizontal Rule --- */

hr {
    border: none;
    border-top: 1px solid var(--border-light);
    margin: var(--space-8) 0;
}

/* --- Selection --- */

::selection {
    background: var(--accent);
    color: var(--accent-fg);
}

/* --- Focus Visible --- */

:focus-visible {
    outline: var(--focus-ring-outline);
    outline-offset: 2px;
}