/* Custom styles for Spin documentation */

/* Typography */
.prose {
    --tw-prose-body: #4B5563;
    --tw-prose-headings: #111827;
    --tw-prose-links: #e11d48;  /* primary-600 */
    --tw-prose-links-hover: #be123c;  /* primary-700 */
    --tw-prose-code: #e11d48;  /* primary-600 */
    --tw-prose-pre-code: #374151;
    --tw-prose-pre-bg: #F9FAFB;
    --tw-prose-quotes: #4B5563;
    --tw-prose-quote-borders: #E5E7EB;
}

.prose h1 {
    @apply text-4xl font-bold text-gray-900 mb-6;
    line-height: 1.1;
}

.prose h2 {
    @apply text-2xl font-bold text-gray-900 mt-12 mb-6;
}

.prose h3 {
    @apply text-xl font-semibold text-gray-900 mt-8 mb-4;
}

.prose p {
    @apply text-gray-600 mb-4 leading-relaxed;
}

/* Dark Hero Section */
.hero {
    @apply bg-dark-900 text-white;
    background: linear-gradient(to bottom right, #0B1120, #1E293B);
}

.hero h1 {
    @apply text-white;
}

.hero p {
    @apply text-gray-300;
}

/* Code blocks */
.prose code {
    @apply px-1.5 py-0.5 rounded bg-primary-50 text-primary-600 text-sm font-medium;
}

.prose pre {
    @apply p-4 rounded-lg bg-gray-50 overflow-x-auto mb-6 border border-gray-200;
}

.prose pre code {
    @apply bg-transparent p-0 text-gray-700 block;
}

/* Terminal window style */
.terminal {
    @apply bg-gray-50 rounded-lg overflow-hidden border border-gray-200 shadow-sm;
}

.terminal-header {
    @apply flex items-center px-4 py-2 bg-gray-100 border-b border-gray-200;
}

.terminal-body {
    @apply p-4 font-mono text-sm text-gray-700;
}

/* Links */
.prose a {
    @apply text-primary-600 hover:text-primary-700 transition-colors duration-150;
}

.prose a:hover {
    @apply no-underline;
}

/* Lists */
.prose ul {
    @apply space-y-2 mb-6;
}

.prose ul li {
    @apply text-gray-600;
}

.prose ul li::before {
    @apply text-primary-500;
}

/* Tables */
.prose table {
    @apply w-full mb-6;
}

.prose thead {
    @apply bg-gray-50;
}

.prose th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200;
}

.prose td {
    @apply px-6 py-4 text-sm text-gray-600 border-b border-gray-200;
}

/* Blockquotes */
.prose blockquote {
    @apply border-l-4 border-primary-100 pl-4 py-2 mb-6;
}

.prose blockquote p {
    @apply text-gray-600 italic;
}

/* Custom components */
.command-box {
    @apply bg-white rounded-lg p-6 border border-gray-200 mb-6 hover:border-primary-100 transition-all duration-150 shadow-sm;
}

.command-title {
    @apply text-lg font-semibold text-gray-900 mb-2;
}

.command-description {
    @apply text-gray-600 mb-4;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Gradient text animation */
.gradient-animate {
    background-size: 200% 200%;
    animation: gradientFlow 6s ease infinite;
}

/* Code syntax highlighting */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    @apply text-gray-500;
}

.token.punctuation {
    @apply text-gray-600;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    @apply text-primary-600;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    @apply text-primary-500;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    @apply text-gray-700;
}

.token.atrule,
.token.attr-value,
.token.keyword {
    @apply text-primary-600;
}

.token.function,
.token.class-name {
    @apply text-primary-500;
}

.token.regex,
.token.important,
.token.variable {
    @apply text-primary-400;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .prose h1 {
        @apply text-3xl;
    }

    .prose h2 {
        @apply text-2xl;
    }

    .command-box {
        @apply p-4;
    }
}

/* Print styles */
@media print {
    .prose pre {
        @apply border border-gray-200 overflow-x-auto whitespace-pre-wrap;
    }
}

/* Focus styles */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
}

/* Button styles */
.btn-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
}

.btn-secondary {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
}