/**
 * Last Update: 2026-04-26
 * File: assets/frontend/css/base-frontend.css
 * Description: Reset, typography, global base styles
 */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: var(--fe-font-size-base);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--fe-font-body);
    font-size: 1rem;
    line-height: var(--fe-line-height);
    color: var(--fe-text);
    background-color: var(--fe-bg);
    transition: background-color var(--fe-transition-med), color var(--fe-transition-med);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Container ─────────────────────────────────────────────────────────── */
.fe-container {
    width: 100%;
    max-width: var(--fe-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fe-container-px);
    padding-right: var(--fe-container-px);
}

/* ── Typography ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fe-font-heading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--fe-text);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
    margin-bottom: 1rem;
    color: var(--fe-text);
}

a {
    color: var(--fe-primary-dark);
    text-decoration: none;
    transition: color var(--fe-transition);
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

/* ── Accessibility ─────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--fe-primary);
    outline-offset: 2px;
    border-radius: var(--fe-radius-sm);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Page layout shell ──────────────────────────────────────────────────── */
.fe-main {
    min-height: 60vh;
    padding-top: calc(var(--fe-header-h) + var(--fe-topbar-h));
}

/* ── Section spacing ───────────────────────────────────────────────────── */
.fe-section {
    padding-top: var(--fe-section-py);
    padding-bottom: var(--fe-section-py);
}

.fe-section--alt {
    background-color: var(--fe-bg-alt);
}

/* ── Tag pill ───────────────────────────────────────────────────────────── */
.fe-tag {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--fe-bg-tag);
    color: var(--fe-text-tag);
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: var(--fe-radius-pill);
    border: 1px solid var(--fe-border-gold);
    margin: 2px 4px 2px 0;
    transition: background-color var(--fe-transition), color var(--fe-transition);
}

.fe-tag:hover {
    background-color: var(--fe-gold-200);
    color: var(--fe-gold-800);
    text-decoration: none;
}

/* ── Scrollbar (webkit) ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--fe-warm-300);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--fe-gold-400); }

/* ── Selection ──────────────────────────────────────────────────────────── */
::selection {
    background-color: var(--fe-gold-200);
    color: var(--fe-warm-900);
}

/* ── Responsive breakpoints ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --fe-container-px: 16px;
        --fe-section-py:   48px;
    }
}