/* 01-tokens-base.css - Design tokens, base typography, buttons
 * Part of the Pulsar67 marketing stylesheet bundle.
 * Load order is defined in templates/layouts/_marketing_styles.html
 */

/* =====================================================
   Pulsar67 - Marketing Site Styles (Dark Theme)
   Dark neutral base with purple brand and green support accents
   ===================================================== */

/* Tokens are defined in static/css/tokens.css (loaded first). */
/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--p67-bg);
    color: var(--p67-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--p67-text);
}

a { color: var(--p67-primary-2); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--p67-primary-dark); }

::selection {
    background: rgba(21, 154, 104, 0.24);
    color: var(--p67-text);
}
::-moz-selection {
    background: rgba(21, 154, 104, 0.24);
    color: var(--p67-text);
}
input,
textarea,
select {
    caret-color: var(--p67-primary-dark);
}

/* ---------- Buttons ---------- */
.p67-btn-primary {
    background: var(--p67-primary);
    color: #fff;
    border: 1px solid var(--p67-primary);
    padding: .75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.p67-btn-primary:hover {
    color: #fff;
    background: var(--p67-primary-dark);
    border-color: var(--p67-primary-dark);
}
.p67-btn-primary:active { background: var(--p67-primary-dark); }

.p67-btn-ghost {
    background: transparent;
    color: var(--p67-text);
    border: 1px solid var(--p67-border-strong);
    padding: .75rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    transition: all .2s ease;
}
.p67-btn-ghost:hover {
    color: var(--p67-primary-dark);
    background: var(--p67-primary-soft);
    border-color: var(--p67-primary);
}

.p67-btn-primary:focus-visible,
.p67-btn-ghost:focus-visible,
.p67-btn:focus-visible {
    outline: 2px solid var(--p67-primary);
    outline-offset: 2px;
}