/* File: public/css/sharper-custom.css */
/* Description: Design system tokens, smooth transitions, staggered scroll animations for SHARPER platform */

:root {
    --color-sharper-green: #48c75e;
    --color-sharper-green-bright: #52d06b;
    --color-sharper-dark-bg: #062315;
    --color-sharper-dark-surface: #0a301e;
    --color-sharper-nav-btn: #1e382b;
}

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

@media (min-width: 640px) {
    html {
        font-size: 17px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 17.5px;
    }
}

@media (min-width: 1536px) {
    html {
        font-size: 18px;
    }
}

body {
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   GLOBAL TYPOGRAPHY SCALING & READABILITY SYSTEM
   Elevates font sizes across all tables, badges, cards, forms, and navigation cleanly
   ========================================================================== */
.text-\[8px\],
.text-\[9px\] {
    font-size: 0.65rem !important; /* ~11px */
    line-height: 1rem !important;
}

.text-\[10px\] {
    font-size: 0.70rem !important; /* ~12px */
    line-height: 1.1rem !important;
}

.text-\[11px\] {
    font-size: 0.75rem !important; /* ~12.8px */
    line-height: 1.18rem !important;
}

.text-\[12px\] {
    font-size: 0.80rem !important; /* ~13.6px */
    line-height: 1.25rem !important;
}

.text-\[13px\] {
    font-size: 0.85rem !important; /* ~14.5px */
    line-height: 1.32rem !important;
}

.text-\[14px\] {
    font-size: 0.90rem !important; /* ~15.3px */
    line-height: 1.4rem !important;
}

.text-\[15px\] {
    font-size: 0.95rem !important; /* ~16.2px */
    line-height: 1.48rem !important;
}

.text-xs {
    font-size: 0.80rem !important; /* ~13.6px */
    line-height: 1.25rem !important;
}

.text-sm {
    font-size: 0.90rem !important; /* ~15.3px */
    line-height: 1.45rem !important;
}

.text-base {
    font-size: 1.08rem !important; /* ~18.9px */
    line-height: 1.65rem !important;
}

/* Form controls & buttons typography enhancement */
input, select, textarea {
    font-size: 0.96rem !important;
}

/* Table header & data cell font enhancement */
th {
    font-size: 0.84rem;
    letter-spacing: 0.05em;
}

td {
    font-size: 0.94rem;
}


/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #062315;
}
::-webkit-scrollbar-thumb {
    background: #0e3b26;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #48c75e;
}

/* Subtle glow & glass effects */
.glow-accent {
    box-shadow: 0 0 25px rgba(72, 199, 94, 0.25);
}

.glass-border-glow {
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   ADVANCED SCROLL REVEAL ANIMATION ENGINE
   ========================================================================== */

/* Base hidden state for scroll reveal elements */
.scroll-reveal,
.scroll-reveal-left,
.scroll-reveal-right,
.scroll-reveal-scale,
.reveal-on-scroll {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.scroll-reveal {
    transform: translateY(30px);
}

.scroll-reveal-left {
    transform: translateX(-35px);
}

.scroll-reveal-right {
    transform: translateX(35px);
}

.scroll-reveal-scale {
    transform: scale(0.93);
}

/* Visible active state when scrolled into view */
.scroll-reveal.is-visible,
.scroll-reveal-left.is-visible,
.scroll-reveal-right.is-visible,
.scroll-reveal-scale.is-visible,
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger Delays */
.delay-100 { transition-delay: 100ms; }
.delay-150 { transition-delay: 150ms; }
.delay-200 { transition-delay: 200ms; }
.delay-250 { transition-delay: 250ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* Custom Animations */
@keyframes progressIndeterminate {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

.animate-progress-indeterminate {
    animation: progressIndeterminate 1.6s ease-in-out infinite;
}

@keyframes bounceSlow {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.animate-bounce-slow {
    animation: bounceSlow 2s ease-in-out infinite;
}

/* Accessibility: respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right,
    .scroll-reveal-scale,
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}