/* derived-from: harness@1.0.0 (architecture/08-design-system.md) — public site chrome + brand identity */
@import url('admin.css');

@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/bricolage-grotesque-800.woff2') format('woff2');
}

/* Brand tokens — committed dark world for the public marketing site.
   Deliberately separate from admin.css's light/dark-switchable tokens: this is a
   single fixed visual identity, not a themeable app surface. */
:root {
    --pub-ink: #0f1115;
    --pub-surface: #191c22;
    --pub-line: #2b2f38;
    --pub-text: #f4f2ea;
    --pub-text-muted: #8b8f99;
    --pub-gold: #d9a441;
    --pub-gold-dim: #8c6a2c;
    --pub-font-display: 'Bricolage Grotesque', ui-sans-serif, "Segoe UI", Arial, sans-serif;
}

body:has(.public-nav) {
    background: var(--pub-ink);
    color: var(--pub-text);
}

.public-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 40px;
    position: relative;
    z-index: 2;
}
.public-nav .brand {
    font-family: var(--pub-font-display);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: var(--pub-text);
}
.public-nav .brand span { color: var(--pub-gold); }

.public-footer {
    border-top: 1px solid var(--pub-line);
    padding: 20px 40px;
    text-align: center;
    color: var(--pub-text-muted);
    font-size: var(--text-sm);
    position: relative;
    z-index: 2;
}

@media (max-width: 480px) {
    .public-nav, .public-footer { padding: 20px; }
}

.pendiente-shell { max-width: 560px; margin: 0 auto; padding: 60px 20px; text-align: center; }
.pendiente-shell h1 { margin-bottom: 12px; }
.pendiente-shell a { color: var(--pub-gold); }