/* Phosphor Icons — loaded asynchronously from layout (not bundled here) */

@import 'tailwindcss';

@source "../../**/*.blade.php";

/*
 * TAILWIND V4 DARK MODE CONFIGURATION
 * ====================================
 * This enables the `dark:` variant to be activated by the `.dark` class on <html>.
 * Unlike Tailwind v3's `darkMode: 'class'` in tailwind.config.js, v4 uses CSS-based config.
 */
@variant dark (&:where(.dark, .dark *));

@theme {
    /* Font Family - Inter */
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;

    /* 1. Primary Palette Generation (from theme.json --primary) */
    --color-primary-50: color-mix(in srgb, var(--primary), white 95%);
    --color-primary-100: color-mix(in srgb, var(--primary), white 90%);
    --color-primary-200: color-mix(in srgb, var(--primary), white 70%);
    --color-primary-300: color-mix(in srgb, var(--primary), white 50%);
    --color-primary-400: color-mix(in srgb, var(--primary), white 30%);
    --color-primary-500: var(--primary);
    --color-primary-600: color-mix(in srgb, var(--primary), black 10%);
    --color-primary-700: color-mix(in srgb, var(--primary), black 25%);
    --color-primary-800: color-mix(in srgb, var(--primary), black 45%);
    --color-primary-900: color-mix(in srgb, var(--primary), black 60%);
    --color-primary-950: color-mix(in srgb, var(--primary), black 80%);

    /* 4. True Neutrals Correction (Zinc/Black based for zero blue tint) */
    --color-slate-50: #ffffff;
    --color-slate-100: #f4f4f5;
    --color-slate-200: #e4e4e7;
    --color-slate-300: #d4d4d8;
    --color-slate-400: #a1a1aa;
    --color-slate-500: #71717a;
    --color-slate-600: #52525b;
    --color-slate-700: #3f3f46;
    --color-slate-800: #27272a;
    --color-slate-900: var(--neutral-mid);
    --color-slate-950: var(--neutral-dark);

    /* Semantic Branding Surfaces */
    --color-surface-dark: var(--neutral-dark);
    --color-surface-mid: var(--neutral-mid);
    --color-surface-border: var(--neutral-border);
    --color-surface-offwhite: var(--surface-offwhite);
    --color-heading-light: var(--heading-light);

    /* SVG Illustration Palette (maps to theme.json svg_* tokens) */
    --color-svg-dark: var(--svg-dark);
    --color-svg-mid: var(--svg-mid);
    --color-svg-light: var(--svg-light);
    --color-svg-muted: var(--svg-muted);
    --color-svg-subtle: var(--svg-subtle);
    --color-svg-surface: var(--svg-surface);

    /* Corner Radius System */
    --radius-btn: 12px;
    --radius-card: 24px;
    --radius-input: 10px;
    --radius-badge: 6px;

    /* Z-Index Scale */
    --z-negative: -1;
    --z-elevated: 10;
    --z-dropdown: 1000;
    --z-sticky: 1100;
    --z-fixed: 1200;
    --z-toggle: 1250;
    --z-modal: 1300;
    --z-popover: 1400;
    --z-toast: 1500;
}

@layer base {

    /* Global Font Family - Excluding icon font classes */
    *:not(i, [class^="ph-"], [class*=" ph-"], [class^="fa-"], [class*=" fa-"]) {
        font-family: inherit;
    }

    body {
        @apply bg-white text-slate-900 font-sans transition-colors duration-300;
        background-color: var(--theme-bg-light);
        color: var(--theme-text-light);
    }

    .dark body {
        background-color: var(--neutral-dark);
        color: var(--theme-text-dark);
    }

    /*
     * Typography Base — Fluid responsive sizing via clamp().
     * No weight overrides — weights are controlled per-component
     * via Tailwind utility classes in Blade templates.
     */
    h1 {
        font-size: clamp(2.25rem, 5vw + 1rem, 4.5rem);
        @apply tracking-tight leading-tight;
    }

    h2 {
        font-size: clamp(1.875rem, 4vw + 0.5rem, 3rem);
        @apply tracking-tight leading-tight;
    }

    h3 {
        font-size: clamp(1.25rem, 2vw + 0.5rem, 1.5rem);
        @apply leading-snug;
    }

    h4 {
        @apply text-lg md:text-xl leading-snug;
    }

    /* Restore proper bold semantics for <strong> and <b> tags */
    strong,
    b {
        font-weight: 700;
    }

    ::selection {
        background-color: var(--primary-glow);
        color: var(--primary);
    }

    /* Custom focus-visible styles for keyboard accessibility */
    :focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
        border-radius: 4px;
    }

    /* Remove focus outline for mouse users */
    :focus:not(:focus-visible) {
        outline: none;
    }
}

@layer components {
    .glass {
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dark .glass {
        background: rgba(24, 24, 27, 0.8);
        border: 1px solid var(--neutral-border);
    }

    .btn-primary {
        @apply inline-flex items-center justify-center transition-all duration-200 bg-primary-500 hover:bg-primary-600 text-white focus:ring-primary-500 border border-transparent px-4 py-2 text-sm font-semibold;
        border-radius: var(--radius-btn);
        box-shadow: none;
    }

    .btn-primary:disabled {
        @apply opacity-50 cursor-not-allowed saturate-0 brightness-110 dark:brightness-90;
        box-shadow: none;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center transition-all duration-200 bg-white dark:bg-zinc-800 text-slate-900 dark:text-white border border-slate-200 dark:border-zinc-700 px-4 py-2 text-sm font-medium;
        border-radius: var(--radius-btn);
    }

    .btn-secondary:disabled {
        @apply opacity-50 cursor-not-allowed grayscale;
    }

    .btn-ghost {
        @apply inline-flex items-center justify-center transition-all duration-200 text-slate-600 dark:text-zinc-400 hover:text-primary-500 dark:hover:text-primary-400 hover:bg-black/5 dark:hover:bg-white/5 px-4 py-2 text-sm font-normal;
        border-radius: var(--radius-btn);
    }

    .btn-ghost:disabled {
        @apply opacity-40 cursor-not-allowed;
    }

    /* Pagination — Light + Dark mode support */
    .pagination-salieno .pagination {
        @apply flex gap-2;
    }

    .pagination-salieno .page-link {
        @apply w-12 h-12 bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-700 dark:text-white flex items-center justify-center font-bold transition-all hover:bg-primary-500 hover:border-primary-500 hover:text-white;
        border-radius: var(--radius-btn);
    }

    .pagination-salieno .page-item.active .page-link {
        @apply bg-primary-500 border-primary-500 text-white;
        box-shadow: none;
    }

    .pagination-salieno .page-item.disabled .page-link {
        @apply opacity-30 cursor-not-allowed bg-slate-100 dark:bg-white/5 text-slate-400 dark:text-slate-600;
    }

    /* Dynamic UI Utilities */
    .bg-dynamic {
        @apply bg-slate-50 dark:bg-zinc-950;
    }

    .card-dynamic {
        @apply bg-white dark:bg-zinc-900 border border-slate-200 dark:border-white/5 shadow-sm transition-all duration-300;
    }

    .text-dynamic {
        @apply text-slate-900 dark:text-white transition-colors duration-300;
    }

    .text-dynamic-secondary {
        @apply text-slate-500 dark:text-slate-400 transition-colors duration-300;
    }

    .text-dynamic-muted {
        @apply text-slate-400 dark:text-slate-500 transition-colors duration-300;
    }

    .transition-smooth {
        @apply transition-all duration-300 ease-in-out;
    }
}

@layer utilities {
    .bg--base {
        background-color: var(--primary) !important;
    }

    .text--base {
        color: var(--primary) !important;
    }

    .btn--base {
        background-color: var(--primary) !important;
        border-color: var(--primary) !important;
        color: white !important;
    }

    .btn--base:hover {
        filter: brightness(0.9);
    }

    /* Scrollbar hidden utility */
    .scrollbar-hidden::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hidden {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* GPU layer hint for blur/glow decorative elements */
    [class*="blur-["] {
        will-change: transform;
        contain: layout style paint;
    }
}

/* =====================================
 * ANIMATIONS
 * ===================================== */

@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

@keyframes shimmerSlide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes shootingStar {
    0% {
        transform: translateX(-100px) translateY(100px);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        transform: translateX(calc(100vw + 100px)) translateY(-100vh);
        opacity: 0;
    }
}

@keyframes jetFly {
    0% {
        transform: translateX(-150px) translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translateX(calc(100vw + 150px)) translateY(-40px);
        opacity: 0;
    }
}

@keyframes spinVerySlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinSlow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes scaleUp {
    0% {
        transform: scale(0.95);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animate-blob {
    animation: blob 7s infinite;
    will-change: transform;
}

.animate-pulse-glow {
    animation: pulseGlow 4s ease-in-out infinite;
    will-change: transform, opacity;
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.animate-shimmer {
    background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.08) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

.animate-shimmer-slide {
    animation: shimmerSlide 2s infinite;
}

.animate-shooting-star {
    animation: shootingStar 6s linear infinite;
    will-change: transform, opacity;
}

.animate-jet-fly {
    animation: jetFly 8s linear infinite;
    will-change: transform, opacity;
}

.animate-spin-very-slow {
    animation: spinVerySlow 60s linear infinite;
    will-change: transform;
}

/* GPU-compositing overrides for Tailwind's built-in animations */
.animate-pulse {
    will-change: opacity;
}

.animate-bounce {
    will-change: transform;
}

.animate-ping {
    will-change: transform, opacity;
}

.animate-spin-slow {
    animation: spinSlow 20s linear infinite;
}

.animate-scale-up {
    animation: scaleUp 0.3s ease-out forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* VPS / Dedicated Banner SVG Animations */
@keyframes vpsFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes vpsFloatAlt {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-25px);
    }
}

@keyframes vpsPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.vps-float {
    animation: vpsFloat 6s ease-in-out infinite;
}

.vps-float-alt {
    animation: vpsFloatAlt 8s ease-in-out infinite;
}

.vps-pulse {
    animation: vpsPulse 3s ease-in-out infinite;
}

/* SVG illustration animations (shared_hosting_banner) */
@keyframes svgFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes svgFloatAlt {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes svgDash {
    to {
        stroke-dashoffset: -24;
    }
}

@keyframes svgPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}

.svg-float {
    animation: svgFloat 5s ease-in-out infinite;
}

.svg-float-alt {
    animation: svgFloatAlt 6s ease-in-out infinite;
}

.svg-dash {
    animation: svgDash 1s linear infinite;
}

.svg-pulse {
    animation: svgPulse 2s ease-in-out infinite;
}

/* Migration plane animation */
@keyframes plane-fly {
    0% {
        offset-distance: 0%;
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1);
    }

    90% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
        transform: scale(0.5);
    }
}

.animate-plane-fly {
    animation: plane-fly 4s linear infinite;
}

/* Reduced motion: disable all custom animations */
@media (prefers-reduced-motion: reduce) {

    .vps-float,
    .vps-float-alt,
    .vps-pulse,
    .svg-float,
    .svg-float-alt,
    .svg-dash,
    .svg-pulse,
    .animate-fade-in-up,
    .animate-shimmer-slide,
    .animate-plane-fly {
        animation: none !important;
    }

    [class*="blur-["] {
        will-change: auto;
    }
}

/* =====================================
 * LIVECHAT WIDGET
 * ===================================== */

/* Input fields */
.livechat-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    outline: none;
    transition: all 0.2s;
}

.livechat-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 85%);
    background: #fff;
}

.livechat-input::placeholder {
    color: #94a3b8;
}

:where(.dark) .livechat-input {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

:where(.dark) .livechat-input:focus {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary);
}

:where(.dark) .livechat-input::placeholder {
    color: #64748b;
}

/* Dark-mode scrollbar */
.livechat-scroll::-webkit-scrollbar {
    width: 4px;
}

.livechat-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.livechat-scroll::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

:where(.dark) .livechat-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
}

/* Cloak for Alpine */
[x-cloak] {
    display: none !important;
}

/* =====================================
 * ACCESSIBILITY: Reduced Motion
 * ===================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}