/* ============================================
   Base Styles — Swipetify
   Typography, body, global element styles
   ============================================ */

body {
    font: var(--t-b-2);
    line-height: 1.2;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
    font-family: "Degular", sans-serif;
    color: var(--color-text-primary);
    line-height: 1;
    font-weight: 700;
    text-wrap: balance;
}

h1 { font: var(--t-h-1); color: var(--color-text-primary); }
h2 { font: var(--t-h-2); color: var(--color-text-primary); }
h3 { font: var(--t-h-3); color: var(--color-text-primary); }
h4 { font: var(--t-h-4); color: var(--color-text-primary); }

p {
    font: var(--t-b-2);
    color: var(--color-text-secondary);
    max-width: 65ch;
}

strong, b {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* ── Utility typography classes (Watts Pet system) ── */
.t-h-1 { font: var(--t-h-1); text-wrap: balance; }
.t-h-2 { font: var(--t-h-2); text-wrap: balance; }
.t-h-3 { font: var(--t-h-3); text-wrap: balance; }
.t-h-4 { font: var(--t-h-4); }
.t-b-1 { font: var(--t-b-1); }
.t-b-2 { font: var(--t-b-2); }
.t-b-3 { font: var(--t-b-3); }
.t-l-1 { font: var(--t-l-1); text-transform: uppercase; letter-spacing: 0.04em; }
.t-l-2 { font: var(--t-l-2); text-transform: uppercase; letter-spacing: 0.04em; }
.t-brand { font: var(--t-brand); letter-spacing: -0.75em; }

/* ── Links ── */
a {
    transition: color var(--duration-fast) var(--ease-out);
}

/* ── Selection ── */
::selection {
    background: var(--color-accent-subtle);
    color: var(--color-text-primary);
}

/* ── Focus Visible ── */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Skip to content (accessibility) ── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-3) var(--space-6);
    background: var(--color-accent);
    color: var(--color-bg-primary);
    font-weight: 600;
    border-radius: var(--radius-sm);
    z-index: 10000;
    transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus {
    top: var(--space-4);
}

/* ── Overline / Kicker text ── */
.overline {
    font: var(--t-l-2);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}


/* ── Section header pattern ── */
.section__header {
    margin-bottom: var(--space-12);
}

.section__header h2 {
    margin-bottom: var(--space-4);
}

.section__header p {
    font: var(--t-b-1);
    color: var(--color-text-secondary);
    max-width: 580px;
}

/* ── Page loader ── */
.page-loader {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: var(--color-bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-loader__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}