/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Offset for fixed header when using anchor links */
    scroll-padding-top: calc(var(--ts-header-height) + var(--ts-admin-bar-height) + 20px);
}

/* For non-admin users */
body:not(.admin-bar) html {
    scroll-padding-top: calc(var(--ts-header-height) + 20px);
}

body {
    font-family: var(--ts-font-body);
    font-weight: 400;
    line-height: 1.65;
    color: var(--ts-silver-light);
    background: linear-gradient(180deg, var(--ts-black) 0%, var(--ts-dark) 100%);
    overflow-x: hidden;
    position: relative;
}

/* Main content should start immediately */
.ts-main {
    position: relative;
}

/* Proper spacing for admin bar - only add to header top position */
.admin-bar body {
    padding-top: 0;
}

/* No extra padding needed on main since hero is full-screen */
.admin-bar .ts-main,
body:not(.admin-bar) .ts-main {
    padding-top: 0;
    margin-top: 0;
}

/* Selection */
::selection {
    background-color: var(--ts-accent);
    color: var(--ts-white);
    text-shadow: none;
}

/* Focus styles - Premium indicator */
:focus-visible {
    outline: 2px solid var(--ts-accent);
    outline-offset: 3px;
    border-radius: var(--ts-radius-sm);
}

/* Scrollbar Styling - Pink Theme */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--ts-dark);
    border-radius: var(--ts-radius-sm);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e84393 0%, #ff5cab 100%);
    border-radius: var(--ts-radius-full);
    border: 2px solid var(--ts-dark);
    box-shadow: 0 0 10px rgba(232, 67, 147, 0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #ff5cab 0%, #e84393 100%);
    box-shadow: 0 0 20px rgba(232, 67, 147, 0.5);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #e84393 var(--ts-dark);
}

/* ==========================================================================
   Typography - Premium hierarchy
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ts-font-display);
    font-weight: 500;
    line-height: 1.15;
    color: var(--ts-white);
    letter-spacing: -0.01em;
    margin-bottom: var(--ts-space-md);
}

h1 {
    font-size: clamp(2.75rem, 6vw, 5.5rem);
    font-weight: 300;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    font-weight: 400;
}

h3 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

h4 {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
}

p {
    margin-bottom: var(--ts-space-lg);
    max-width: 75ch;
}

a {
    color: var(--ts-accent);
    text-decoration: none;
    transition: color var(--ts-transition-fast);
}

/* Hover for regular links - BUT NOT BUTTONS */
a:not(.ts-btn):hover {
    color: var(--ts-accent-hover);
}

.text-gradient {
    background: var(--ts-gradient-silver);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* ==========================================================================
   Layout Components
   ========================================================================== */

.ts-container {
    width: 100%;
    max-width: var(--ts-max-width);
    margin: 0 auto;
    padding: 0 var(--ts-space-xl);
}

.ts-section {
    padding: var(--ts-space-4xl) 0;
    position: relative;
}

/* First section after hero needs no extra padding */
.ts-hero + .ts-section {
    padding-top: var(--ts-space-4xl);
}

.ts-grid {
    display: grid;
    gap: var(--ts-space-xl);
}

.ts-flex {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   Section Headers - CONSISTENT CENTERING
   ========================================================================== */

.ts-features-header,
.ts-section-header {
    text-align: center;
    margin-bottom: var(--ts-space-3xl);
}

.ts-features-header h2,
.ts-section-header h2 {
    margin-bottom: var(--ts-space-lg);
}

.ts-section-subtitle {
    max-width: 700px;
    margin: var(--ts-space-md) auto 0;
    color: var(--ts-silver);
    font-size: 1.1rem;
    line-height: 1.7;
}