/* ============================================
   STEMLABPRO DESIGN SYSTEM
   CSS Custom Properties + Base Styles — v2.0.0
   Premium Enhanced Edition
   ============================================ */


/* ═══════════════════════════════════════
   A. DESIGN TOKENS
   ═══════════════════════════════════════ */

:root {
    /* ── Colours: Backgrounds ── */
    --color-bg-base:        #111118;
    --color-bg-surface:     #1A1A24;
    --color-bg-elevated:    #222230;
    --color-bg-overlay:     #2B2B3A;
    --color-bg-tint:        #33334A;

    /* ── Colours: Text ── */
    --color-text-primary:   #FFFFFF;
    --color-text-secondary: #C8C8D8;
    --color-text-subdued:   #8A8AA0;
    --color-text-disabled:  #55556A;
    --color-text-on-accent: #FFFFFF;

    /* ── Colours: Accent (Pink) ── */
    --color-accent:         #F0176F;
    --color-accent-hover:   #FF2E86;
    --color-accent-active:  #C4115A;
    --color-accent-glow:    rgba(240, 23, 111, 0.35);
    --color-accent-tint:    rgba(240, 23, 111, 0.12);
    --color-accent-border:  rgba(240, 23, 111, 0.40);

    /* ── Colours: Semantic ── */
    --color-error:          #FF4D6A;
    --color-error-tint:     rgba(255, 77, 106, 0.12);
    --color-error-border:   rgba(255, 77, 106, 0.40);
    --color-success:        #00C87A;
    --color-success-tint:   rgba(0, 200, 122, 0.12);
    --color-success-border: rgba(0, 200, 122, 0.40);
    --color-warning:        #F5A623;
    --color-warning-tint:   rgba(245, 166, 35, 0.12);
    --color-warning-border: rgba(245, 166, 35, 0.40);
    --color-info:           #4DA6FF;
    --color-info-tint:      rgba(77, 166, 255, 0.12);

    /* ── Colours: Borders ── */
    --color-border:         rgba(255, 255, 255, 0.07);
    --color-border-subtle:  rgba(255, 255, 255, 0.04);
    --color-border-strong:  rgba(255, 255, 255, 0.14);

    /* ── Typography: Font Stacks ── */
    --font-sans:  'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    /* ── Typography: Type Scale ── */
    --text-hero:      3.815rem;
    --text-display:   3.052rem;
    --text-h1:        2.441rem;
    --text-h2:        1.953rem;
    --text-h3:        1.563rem;
    --text-h4:        1.25rem;
    --text-body-lg:   1.125rem;
    --text-body:      1rem;
    --text-body-sm:   0.875rem;
    --text-caption:   0.75rem;
    --text-overline:  0.6875rem;
    --text-mono-sm:   0.875rem;
    --text-mono:      1rem;

    /* ── Typography: Weight Scale ── */
    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;
    --weight-black:     900;

    /* ── Typography: Letter Spacing ── */
    --tracking-tight:   -0.03em;
    --tracking-snug:    -0.015em;
    --tracking-normal:   0em;
    --tracking-wide:     0.04em;
    --tracking-wider:    0.08em;

    /* ── Typography: Line Heights ── */
    --leading-tight:    1.15;
    --leading-snug:     1.3;
    --leading-normal:   1.5;
    --leading-relaxed:  1.65;
    --leading-loose:    1.8;

    /* ── Spacing (4px base) ── */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;

    /* ── Page Layout ── */
    --page-max-width:  1200px;
    --page-margin-sm:  var(--space-4);
    --page-margin-md:  var(--space-8);
    --page-margin-lg:  var(--space-16);

    /* ── Card Padding ── */
    --card-padding-sm:  var(--space-4);
    --card-padding:     var(--space-6);
    --card-padding-lg:  var(--space-8);
    --card-padding-xl:  var(--space-10);

    /* ── Component Gaps ── */
    --gap-xs:   var(--space-2);
    --gap-sm:   var(--space-4);
    --gap-md:   var(--space-6);
    --gap-lg:   var(--space-8);
    --gap-xl:   var(--space-12);

    /* ── Border Radius ── */
    --radius-xs:    4px;
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-full:  9999px;

    /* ── Motion: Duration ── */
    --duration-instant:   50ms;
    --duration-fast:     150ms;
    --duration-medium:   250ms;
    --duration-slow:     400ms;
    --duration-slower:   600ms;

    /* ── Motion: Easing ── */
    --ease-standard:   cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
    --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth:     cubic-bezier(0.25, 0.1, 0.25, 1);

    /* ── Premium: Glass / Grain / Skeleton ── */
    --sl-glass-bg:       rgba(26, 26, 36, 0.72);
    --sl-glass-border:   rgba(255, 255, 255, 0.08);
    --sl-glass-blur:     blur(18px) saturate(1.4);
    --sl-grain-opacity:  0.025;
    --sl-skeleton-base:  rgba(255, 255, 255, 0.04);
    --sl-skeleton-shine: rgba(255, 255, 255, 0.09);
}


/* ═══════════════════════════════════════
   B. GLOBAL RESET & BASE STYLES
   ═══════════════════════════════════════ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--color-bg-base);
    background-color: var(--color-bg-base) !important;
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* CSS-only grain texture — SVG noise pattern overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: var(--sl-grain-opacity);
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px 128px;
}

/* Kill Elementor / theme container backgrounds */
.elementor-element.e-con {
    background-color: transparent !important;
    background-image: none !important;
}

/* ── Links ── */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}
a:hover {
    color: var(--color-accent-hover);
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-primary);
    font-weight: var(--weight-bold);
    line-height: var(--leading-snug);
}

h1, .h1 {
    font-size: var(--text-h1);
    letter-spacing: var(--tracking-snug);
}
h2, .h2 {
    font-size: var(--text-h2);
    letter-spacing: var(--tracking-snug);
}
h3, .h3 {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
}
h4, .h4 {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
}

/* ── Focus: Pink glow ring ── */
*:focus-visible {
    outline: 2px solid var(--color-accent) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--color-accent-tint) !important;
    border-radius: var(--radius-xs) !important;
}
*:focus:not(:focus-visible) {
    outline: none;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ═══════════════════════════════════════
   C. UTILITY CLASSES
   ═══════════════════════════════════════ */

/* ── Container ── */
.sl-container {
    width: 100%;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding-left: var(--page-margin-sm);
    padding-right: var(--page-margin-sm);
}
@media (min-width: 640px) {
    .sl-container {
        padding-left: var(--page-margin-md);
        padding-right: var(--page-margin-md);
    }
}
@media (min-width: 1024px) {
    .sl-container {
        padding-left: var(--page-margin-lg);
        padding-right: var(--page-margin-lg);
    }
}

/* ── Card: frosted glass + gradient border on hover ── */
.sl-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--card-padding);
    transition: background var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-medium) var(--ease-standard);
    backdrop-filter: var(--sl-glass-blur);
    -webkit-backdrop-filter: var(--sl-glass-blur);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Gradient border overlay — fades in on hover */
.sl-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 50%,
        rgba(240, 23, 111, 0.10) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--duration-medium) var(--ease-standard);
    pointer-events: none;
    z-index: 0;
}

.sl-card:hover {
    background: var(--color-bg-elevated);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(240, 23, 111, 0.08);
}

.sl-card:hover::before {
    opacity: 1;
}

/* ── Section Wrapper ── */
.sl-section {
    padding: var(--space-16) 0;
}
@media (max-width: 639px) {
    .sl-section {
        padding: var(--space-12) 0;
    }
}

/* ── Grid: Two Columns ── */
.sl-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-lg);
}
@media (max-width: 639px) {
    .sl-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ── Text Colour Utilities ── */
.sl-text-primary  { color: var(--color-text-primary); }
.sl-text-secondary { color: var(--color-text-secondary); }
.sl-text-subdued  { color: var(--color-text-subdued); }
.sl-text-disabled { color: var(--color-text-disabled); }

/* ── Overline (Eyebrow Label) ── */
.sl-overline {
    font-size: var(--text-overline);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* ── Glow: ambient radial glow behind element ── */
.sl-glow {
    position: relative;
}

.sl-glow::after {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, var(--color-accent-glow) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    opacity: 0.5;
}

/* ── Divider: gradient accent section separator ── */
.sl-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-border-strong) 30%,
        var(--color-accent-border) 50%,
        var(--color-border-strong) 70%,
        transparent 100%
    );
    border: none;
    margin: var(--space-8) 0;
    opacity: 0.6;
}


/* ═══════════════════════════════════════
   D. SHARED COMPONENTS
   ═══════════════════════════════════════ */

/* ── Buttons: Base ── */
.sl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
    padding: var(--space-3) var(--space-6);
    min-height: 44px;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
}

/* ── Buttons: Primary — animated conic glow on hover ── */
.sl-btn--primary {
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Rotating conic gradient halo — activates on hover */
.sl-btn--primary::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(
        from var(--sl-btn-angle, 0deg),
        var(--color-accent-hover),
        var(--color-accent-active),
        var(--color-accent),
        var(--color-accent-hover)
    );
    opacity: 0;
    border-radius: inherit;
    transition: opacity var(--duration-medium) var(--ease-standard);
    z-index: -1;
    animation: sl-btn-rotate 3s linear infinite paused;
}

.sl-btn--primary:hover {
    background: var(--color-accent-hover);
    box-shadow: 0 0 20px var(--color-accent-glow);
    transform: translateY(-1px);
}

.sl-btn--primary:hover::before {
    opacity: 1;
    animation-play-state: running;
}

.sl-btn--primary:active {
    background: var(--color-accent-active);
    box-shadow: none;
    transform: scale(0.98);
}
.sl-btn--primary:active::before {
    opacity: 0;
    animation-play-state: paused;
}

.sl-btn--primary:disabled,
.sl-btn--primary[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Pulsing box-shadow glow — apply .sl-btn--glow alongside .sl-btn--primary */
.sl-btn--primary.sl-btn--glow {
    animation: sl-glow-pulse 2.5s ease-in-out infinite;
}

@keyframes sl-btn-rotate {
    to { --sl-btn-angle: 360deg; }
}

@property --sl-btn-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ── Buttons: Secondary (Ghost Outline) ── */
.sl-btn--secondary {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-strong);
}
.sl-btn--secondary:hover {
    border-color: var(--color-accent-border);
    color: var(--color-accent);
    background: var(--color-bg-elevated);
    transform: translateY(-1px);
}
.sl-btn--secondary:active {
    background: var(--color-bg-overlay);
    transform: translateY(0);
}
.sl-btn--secondary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Buttons: Ghost (Minimal) ── */
.sl-btn--ghost {
    background: transparent;
    color: var(--color-text-subdued);
}
.sl-btn--ghost:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-elevated);
}

/* ── Buttons: Size Variants ── */
.sl-btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-body);
    min-height: 52px;
    border-radius: var(--radius-lg);
}
.sl-btn--full {
    width: 100%;
}
.sl-btn--icon {
    width: 44px;
    height: 44px;
    padding: 0;
}

/* ── Form: Input Wrapper ── */
.sl-input-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* ── Form: Input Label ── */
.sl-input-label {
    font-size: var(--text-overline);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-subdued);
}

/* ── Form: Input Field ── */
.sl-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    transition: border-color var(--duration-fast) var(--ease-standard),
                background var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
    outline: none;
}
.sl-input:focus {
    background: var(--color-bg-elevated);
    border-color: var(--color-accent-border) !important;
    box-shadow: 0 0 0 3px var(--color-accent-tint), inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.sl-input::placeholder {
    color: var(--color-text-disabled);
}

/* ── Badges ── */
.sl-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.sl-badge--accent {
    background: var(--color-accent-tint);
    color: var(--color-accent);
}
.sl-badge--success {
    background: var(--color-success-tint);
    color: var(--color-success);
}


/* ═══════════════════════════════════════
   E. MOTION / ANIMATION KEYFRAMES
   ═══════════════════════════════════════ */

@keyframes sl-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sl-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes sl-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Ambient glow pulse — used by .sl-btn--glow and custom components */
@keyframes sl-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 12px var(--color-accent-glow);
    }
    50% {
        box-shadow: 0 0 28px var(--color-accent-glow), 0 0 48px rgba(240, 23, 111, 0.15);
    }
}

/* Skeleton loading sweep */
@keyframes sl-skeleton-sweep {
    to { transform: translateX(200%); }
}

.sl-animate-in {
    animation: sl-fade-up var(--duration-medium) var(--ease-decelerate) both;
}


/* ═══════════════════════════════════════
   F. SKELETON LOADING STATES
   ═══════════════════════════════════════ */

.sl-skeleton {
    background: var(--sl-skeleton-base);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
}

.sl-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--sl-skeleton-shine) 50%,
        transparent 100%
    );
    animation: sl-skeleton-sweep 1.6s ease-in-out infinite;
    transform: translateX(-100%);
}

.sl-skeleton-text {
    height: 1em;
    border-radius: var(--radius-full);
}

.sl-skeleton-text--wide   { width: 80%; }
.sl-skeleton-text--medium { width: 60%; }
.sl-skeleton-text--narrow { width: 40%; }


/* ═══════════════════════════════════════
   G. SCROLLBAR STYLING
   ═══════════════════════════════════════ */

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-base);
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--color-bg-tint), var(--color-bg-overlay));
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, var(--color-text-disabled), var(--color-bg-tint));
}


/* ═══════════════════════════════════════
   H. REDUCED MOTION SAFETY NET
   ═══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .sl-btn--primary::before,
    .sl-btn--primary.sl-btn--glow,
    .sl-card::before,
    .sl-skeleton::after,
    .sl-glow::after,
    body::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}