src/app/global.css

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

@import "tailwindcss";
@import "fumadocs-ui/css/black.css";
@import "fumadocs-ui/css/preset.css";

:root {
    --color-fd-primary: hsl(34 100% 51%);
    --color-fd-primary-foreground: hsl(0 0% 0%);
    --sh-class: #e879f9;
    --sh-identifier: #e2e8f0;
    --sh-sign: #b0bec5;
    --sh-property: #e0f2fe;
    --sh-entity: #67e8f9;
    --sh-jsxliterals: #9ca3af;
    --sh-string: #a5d6ff;
    --sh-keyword: #ff7b72;
    --sh-comment: #636b75;
}

.dark,
[data-theme="dark"] {
    --sh-class: #e879f9;
    --sh-identifier: #e2e8f0;
    --sh-sign: #b0bec5;
    --sh-property: #e0f2fe;
    --sh-entity: #67e8f9;
    --sh-jsxliterals: #9ca3af;
    --sh-string: #a5d6ff;
    --sh-keyword: #ff7b72;
    --sh-comment: #636b75;
    --color-fd-primary: hsl(34 100% 51%);
    --color-fd-primary-foreground: hsl(0 0% 0%);
    --color-fd-background: hsl(222 55% 6%);
    --color-fd-foreground: hsl(42 100% 95%);
    --color-fd-muted: hsl(220 14% 13%);
    --color-fd-muted-foreground: hsl(215 8% 65%);
    --color-fd-card: hsl(220 20% 8%);
    --color-fd-card-foreground: hsl(42 100% 95%);
    --color-fd-border: hsl(216 14% 20%);
    --color-fd-accent: hsl(222 44% 16%);
    --color-fd-accent-foreground: hsl(42 100% 95%);
    --color-fd-ring: hsl(34 100% 51%);
    --color-fd-popover: hsl(222 55% 10%);
    --color-fd-popover-foreground: hsl(42 100% 95%);
    --color-fd-secondary: hsl(222 30% 12%);
    --color-fd-secondary-foreground: hsl(42 100% 95%);
}

header#nd-nav {
    --spacing: 0.321rem;
}

header#nd-nav > div {
    border-bottom: none !important;
}

header#nd-nav a,
header#nd-nav button {
    font-size: 0.9375rem;
}

figure.shiki {
    border-color: var(--color-fd-border) !important;
    box-shadow: none !important;
}

.fd-prose code:not(pre code) {
    background: var(--color-fd-secondary);
    border-radius: 0.375rem;
    padding: 0.15em 0.4em;
    font-size: 0.875em;
}

.fd-prose a {
    color: var(--color-fd-primary);
    text-decoration: none;
}

.fd-prose a:hover {
    text-decoration: underline;
}

/* Architecture diagram animations */

@keyframes fade-in {
    from { opacity: 0; transform: translateY(0.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out both;
}

@keyframes shard-pulse-kf {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; }
    50% { box-shadow: 0 0 0 4px transparent; }
}

.shard-pulse {
    animation: shard-pulse-kf 2s ease-in-out infinite;
}

@keyframes ring-glow-kf {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0); }
}

.ring-glow {
    animation: ring-glow-kf 2s ease-in-out infinite;
}

@keyframes segment-fill-kf {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.segment-fill-active {
    animation: segment-fill-kf 2s ease-in-out infinite;
}

@keyframes bench-bar-kf {
    from { width: 0%; }
}

.bench-bar {
    animation: bench-bar-kf 1s ease-out both;
}