index.css

@import "tailwindcss";

@theme {
  --color-primary: #ffffff;
  --color-primary-glow: rgba(255, 255, 255, 0.1);
  --color-secondary: #27272a;
  --color-bg-dark: #000000;
  --color-background: var(--color-bg-dark);
  --color-glass-bg: #09090b;
  --color-glass-border: #27272a;
  --color-panel-hover: #18181b;
  --color-text-main: #fafafa;
  --color-text-muted: #a1a1aa;
  
  --font-outfit: "Outfit", sans-serif;
  --font-inter: "Inter", sans-serif;
}

/* Global resets preserving our glassmorphism layout */
body {
    margin: 0;
    font-family: var(--font-inter);
    background-color: var(--color-bg-dark);
    color: var(--color-text-main);
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-outfit);
}

.background-animation {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, #09090b 0%, #000000 100%);
}

.shape {
    position: absolute;
    filter: blur(80px);
    border-radius: 50%;
    animation: float 20s infinite ease-in-out alternate;
    opacity: 0.05;
}

.shape-1 { width: 500px; height: 500px; background: #ffffff; top: -100px; left: -100px; }
.shape-2 { width: 400px; height: 400px; background: #27272a; bottom: -50px; right: -50px; animation-delay: -5s; }
.shape-3 { width: 300px; height: 300px; background: #71717a; top: 50%; left: 50%; transform: translate(-50%, -50%); animation-delay: -10s; }

@keyframes float {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(100px, 50px) rotate(20deg); }
}

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

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

/* Day/Light Theme Variables */
html.theme-light {
  --color-primary: #000000;
  --color-primary-glow: rgba(0, 0, 0, 0.05);
  --color-secondary: #e4e4e7;
  --color-bg-dark: #ffffff;
  --color-background: #ffffff;
  --color-glass-bg: #ffffff;
  --color-glass-border: #e4e4e7;
  --color-panel-hover: #f4f4f5;
  --color-text-main: #09090b;
  --color-text-muted: #71717a;
}
html.theme-light .background-animation {
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #f4f4f5 100%);
}
html.theme-light .shape {
    opacity: 0.04;
}
html.theme-light .shape-1 { background: #000000; }
html.theme-light .shape-2 { background: #e4e4e7; }
html.theme-light .shape-3 { background: #a1a1aa; }

/* Night/Dark Theme Variables (default) */
html.theme-dark {
  --color-primary: #ffffff;
  --color-primary-glow: rgba(255, 255, 255, 0.1);
  --color-secondary: #27272a;
  --color-bg-dark: #000000;
  --color-background: #000000;
  --color-glass-bg: #09090b;
  --color-glass-border: #27272a;
  --color-panel-hover: #18181b;
  --color-text-main: #fafafa;
  --color-text-muted: #a1a1aa;
}
html.theme-dark .background-animation {
    background: radial-gradient(circle at 50% 50%, #09090b 0%, #000000 100%);
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(2rem); }
}

/* Custom Sleek Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--color-glass-border);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}
/* Premium WYSIWYG Editor Canvas Styles */
.editor-canvas {
    outline: none;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.editor-canvas h1 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-main);
    font-family: var(--font-outfit);
}

.editor-canvas h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-main);
    font-family: var(--font-outfit);
}

.editor-canvas h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--color-text-main);
    font-family: var(--font-outfit);
}

.editor-canvas p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: var(--color-text-main);
}

.editor-canvas ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.editor-canvas ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.editor-canvas li {
    margin-bottom: 0.25rem;
}

.editor-canvas blockquote {
    border-left: 3px solid #a855f7;
    background: rgba(168, 85, 247, 0.06);
    padding: 0.75rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--color-text-muted);
}

.editor-canvas a {
    color: #c084fc;
    text-decoration: underline;
    transition: color 0.15s ease;
}

.editor-canvas a:hover {
    color: #e9d5ff;
}

.editor-canvas img {
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    margin: 1.5rem 0;
    max-height: 350px;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.editor-canvas img:hover {
    transform: scale(1.01);
}

.editor-canvas iframe {
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

/* Custom Google Font classes */
.font-inter { font-family: 'Inter', sans-serif !important; }
.font-outfit { font-family: 'Outfit', sans-serif !important; }
.font-playfair { font-family: 'Playfair Display', serif !important; }
.font-fira { font-family: 'Fira Code', monospace !important; }
.font-roboto { font-family: 'Roboto', sans-serif !important; }