malfestio / web / src / index.css

@import "tailwindcss";
@plugin "@tailwindcss/forms";
@plugin "@egoist/tailwindcss-icons";

@font-face {
    font-family: "Mattern";
    src: url("/fonts/Mattern-Regular.otf") format("opentype"),
        url("/fonts/Mattern-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@theme {
    --font-display: "Mattern", serif;
    --font-body: "Figtree Variable", sans-serif;

    /* Editor Fonts */
    --font-code-neon: "Monaspace Neon", monospace;
    --font-code-argon: "Monaspace Argon", monospace;
    --font-code-krypton: "Monaspace Krypton", monospace;
    --font-code-radon: "Monaspace Radon", monospace;
    --font-code-xenon: "Monaspace Xenon", monospace;
    --font-code-jetbrains: "JetBrains Mono Variable", monospace;
    --font-code-google: "Google Sans Code", monospace;
    --font-code: var(--font-code-jetbrains);

    /* Spacing Tokens - 16px grid */
    /*
    FIXME: These conflict with, and break existing usage of classes like max-w-4xl
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-base: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 96px; */

    /* Elevation Layers */
    --layer-00: #161616;
    --layer-01: #1e1e1e;
    --layer-02: #262626;
    --layer-03: #2c2c2c;
    --layer-04: #323232;

    /* Elevation Shadows - Subtle depth */
    --shadow-01: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-02: 0 2px 4px rgba(0, 0, 0, 0.15);
    --shadow-03: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-04: 0 8px 16px rgba(0, 0, 0, 0.25);

    /* Motion Tokens */
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;

    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);

    --density-multiplier: 1;
}

* {
    @apply font-body;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    @apply font-display;
}

.grid-pattern {
    background-size: 32px 32px;
    background-image: linear-gradient(
            to right,
            rgba(85, 85, 85, 0.3) 1px,
            transparent 1px
        ),
        linear-gradient(to bottom, rgba(85, 85, 85, 0.3) 1px, transparent 1px);
}

/* Elevation Utilities - Carbon-inspired layering */
.surface-00 {
    background-color: var(--layer-00);
}

.surface-01 {
    background-color: var(--layer-01);
    box-shadow: var(--shadow-01);
}

.surface-02 {
    background-color: var(--layer-02);
    box-shadow: var(--shadow-02);
}

.surface-03 {
    background-color: var(--layer-03);
    box-shadow: var(--shadow-03);
}

.surface-04 {
    background-color: var(--layer-04);
    box-shadow: var(--shadow-04);
}

/* Density Utilities - Applied to container elements */
.density-compact {
    --density-multiplier: 0.75;
}

.density-comfortable {
    --density-multiplier: 1;
}

.density-spacious {
    --density-multiplier: 1.25;
}

.transition-standard {
    transition-duration: var(--duration-normal);
    transition-timing-function: var(--easing-standard);
}

.transition-fast {
    transition-duration: var(--duration-fast);
    transition-timing-function: var(--easing-standard);
}

.transition-slow {
    transition-duration: var(--duration-slow);
    transition-timing-function: var(--easing-decelerate);
}

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

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

@keyframes breathe {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

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

.animate-shimmer {
    background: linear-gradient(
        90deg,
        var(--layer-01) 0%,
        var(--layer-02) 50%,
        var(--layer-01) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.animate-breathe {
    animation: breathe 3s ease-in-out infinite;
}

.press-effect:active {
    transform: scale(0.97);
    transition: transform var(--duration-instant) var(--easing-sharp);
}

button {
    @apply cursor-pointer disabled:cursor-not-allowed disabled:opacity-50;
}

/* Textcomplete dropdown styling */
.textcomplete-dropdown {
    background-color: var(--layer-02);
    border: 1px solid var(--layer-03);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-04);
    overflow: hidden;
    z-index: 50;
}

.textcomplete-dropdown .textcomplete-item {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    color: #e2e8f0;
}

.textcomplete-dropdown .textcomplete-item:hover,
.textcomplete-dropdown .textcomplete-item.active {
    background-color: var(--layer-03);
}

/* Wikilink styling in rendered content */
.wikilink {
    color: #60a5fa;
    text-decoration: underline;
    text-decoration-color: rgba(96, 165, 250, 0.3);
    transition: color var(--duration-fast) var(--easing-standard);
}

.wikilink:hover {
    color: #93c5fd;
    text-decoration-color: rgba(147, 197, 253, 0.5);
}

.wikilink-broken {
    color: #fbbf24;
    text-decoration: line-through;
}

/* Prose styling for rendered markdown */
.prose h1 {
    @apply text-3xl font-bold mb-4 mt-8 text-white;
}

.prose h2 {
    @apply text-2xl font-semibold mb-3 mt-6 text-white;
}

.prose h3 {
    @apply text-xl font-semibold mb-2 mt-4 text-white;
}

.prose h4 {
    @apply text-lg font-semibold mb-2 mt-3 text-white;
}

.prose h5 {
    @apply text-base font-semibold mb-1 mt-2 text-white;
}

.prose h6 {
    @apply text-sm font-semibold mb-1 mt-2 text-slate-300;
}

.prose p {
    @apply mb-4 leading-relaxed text-slate-300;
}

.prose a:not(.wikilink) {
    @apply text-blue-400 hover:text-blue-300 underline;
}

.prose code:not(pre code) {
    @apply bg-slate-700 px-1.5 py-0.5 rounded text-sm text-emerald-400;
}

.prose pre {
    @apply bg-slate-800 rounded-lg p-4 overflow-x-auto my-4;
}

.prose blockquote {
    @apply border-l-4 border-blue-500 pl-4 italic text-slate-400 my-4;
}

.prose ul {
    @apply list-disc list-inside mb-4 space-y-1 text-slate-300;
}

.prose ol {
    @apply list-decimal list-inside mb-4 space-y-1 text-slate-300;
}

.prose li {
    @apply leading-relaxed;
}

.prose hr {
    @apply border-slate-600 my-6;
}

.prose strong {
    @apply font-semibold text-white;
}

.prose em {
    @apply italic text-slate-200;
}

/* Shiki editor highlight container styling */
.shiki-editor-highlight {
    @apply w-full h-full;
}

.shiki-editor-highlight pre {
    @apply bg-transparent m-0 p-0;
}

.shiki-editor-highlight code {
    @apply bg-transparent;
}

/* Shiki content in preview mode */
.shiki-content pre {
    @apply bg-slate-800 rounded-lg p-4 overflow-x-auto my-4;
}