@tailwind base;@tailwind components;@tailwind utilities;:root{--background: 210 20% 98%;--foreground: 224 30% 13%;--card: 0 0% 100%;--card-foreground: 224 30% 13%;--popover: 0 0% 100%;--popover-foreground: 224 30% 13%;--primary: 210 100% 20%;--primary-foreground: 0 0% 100%;--primary-hover: 210 100% 15%;--secondary: 0 85% 45%;--secondary-foreground: 0 0% 100%;--muted: 0 0% 95%;--muted-foreground: 0 0% 45%;--accent: 0 85% 45%;--accent-foreground: 0 0% 100%;--evergreen: 152 85% 15%;--evergreen-foreground: 0 0% 100%;--accent-cyan: 180 84% 45%;--accent-cyan-foreground: 0 0% 100%;--accent-emerald: 155 84% 44%;--accent-emerald-foreground: 0 0% 100%;--accent-amber: 43 96% 56%;--accent-amber-foreground: 224 30% 13%;--accent-violet: 258 90% 66%;--accent-violet-foreground: 0 0% 100%;--accent-coral: 14 91% 60%;--accent-coral-foreground: 0 0% 100%;--accent-teal: 172 66% 50%;--accent-teal-foreground: 0 0% 100%;--blue: 220 91% 54%;--blue-foreground: 0 0% 100%;--green: 142 76% 36%;--green-foreground: 0 0% 100%;--purple: 262 83% 58%;--purple-foreground: 0 0% 100%;--orange: 25 95% 53%;--orange-foreground: 0 0% 100%;--yellow: 48 96% 53%;--yellow-foreground: 224 30% 13%;--success: 142 76% 36%;--success-foreground: 0 0% 100%;--warning: 43 96% 56%;--warning-foreground: 224 30% 13%;--destructive: 0 84% 60%;--destructive-foreground: 0 0% 100%;--tone-success-bg: 142 76% 95%;--tone-success-border: 142 76% 80%;--tone-success-text: 142 76% 20%;--tone-success-icon: 142 76% 36%;--tone-warning-bg: 43 96% 95%;--tone-warning-border: 43 96% 80%;--tone-warning-text: 43 96% 20%;--tone-warning-icon: 43 96% 56%;--tone-error-bg: 0 84% 95%;--tone-error-border: 0 84% 80%;--tone-error-text: 0 84% 20%;--tone-error-icon: 0 84% 60%;--tone-info-bg: 220 91% 95%;--tone-info-border: 220 91% 80%;--tone-info-text: 220 91% 20%;--tone-info-icon: 220 91% 54%;--tone-default-bg: 0 0% 95%;--tone-default-border: 0 0% 85%;--tone-default-text: 224 30% 13%;--tone-default-icon: 0 0% 45%;--border: 0 0% 85%;--input: 0 0% 85%;--ring: 210 100% 20%;--editor-background: 0 0% 100%;--editor-border: 215 20% 88%;--toolbar-background: 215 25% 96%;--gradient-primary: linear-gradient(135deg, hsl(210 100% 20%), hsl(210 100% 25%));--gradient-subtle: linear-gradient(180deg, hsl(0 0% 98%), hsl(0 0% 95%));--gradient-premium: linear-gradient(135deg, hsl(210 100% 20%) 0%, hsl(0 85% 45%) 100%);--shadow-soft: 0 2px 8px hsl(224 30% 13% / .08);--shadow-medium: 0 4px 16px hsl(224 30% 13% / .12);--shadow-strong: 0 8px 32px hsl(224 30% 13% / .16);--transition-smooth: all .2s cubic-bezier(.4, 0, .2, 1);--mobile-spacing-xs: .5rem;--mobile-spacing-sm: .75rem;--mobile-spacing-md: 1rem;--mobile-spacing-lg: 1.5rem;--mobile-spacing-xl: 2rem;--mobile-header-spacing: var(--mobile-spacing-md);--mobile-section-spacing: var(--mobile-spacing-lg);--mobile-card-spacing: var(--mobile-spacing-sm);--editor-transition: all .2s cubic-bezier(.4, 0, .2, 1);--editor-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--editor-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--scroll-behavior: smooth;--transform-style: preserve-3d;--backface-visibility: hidden;--radius: .75rem;--sidebar-background: 215 25% 95%;--sidebar-foreground: 224 30% 13%;--sidebar-primary: 0 60% 41%;--sidebar-primary-foreground: 0 0% 100%;--sidebar-accent: 215 25% 88%;--sidebar-accent-foreground: 224 30% 13%;--sidebar-border: 215 20% 85%;--sidebar-ring: 0 60% 41%}.dark{--background: 224 47% 9%;--foreground: 215 25% 91%;--card: 224 47% 11%;--card-foreground: 215 25% 91%;--popover: 224 47% 11%;--popover-foreground: 215 25% 91%;--primary: 210 100% 60%;--primary-foreground: 0 0% 0%;--primary-hover: 210 100% 65%;--secondary: 0 85% 60%;--secondary-foreground: 0 0% 0%;--muted: 0 0% 18%;--muted-foreground: 0 0% 72%;--accent: 0 85% 60%;--accent-foreground: 0 0% 0%;--evergreen: 152 85% 25%;--evergreen-foreground: 0 0% 100%;--accent-cyan: 180 84% 55%;--accent-cyan-foreground: 224 47% 9%;--accent-emerald: 155 84% 54%;--accent-emerald-foreground: 224 47% 9%;--accent-amber: 43 96% 66%;--accent-amber-foreground: 224 47% 9%;--accent-violet: 258 90% 76%;--accent-violet-foreground: 224 47% 9%;--accent-coral: 14 91% 70%;--accent-coral-foreground: 224 47% 9%;--accent-teal: 172 66% 60%;--accent-teal-foreground: 224 47% 9%;--blue: 220 91% 64%;--blue-foreground: 224 47% 9%;--green: 142 76% 46%;--green-foreground: 224 47% 9%;--purple: 262 83% 68%;--purple-foreground: 224 47% 9%;--orange: 25 95% 63%;--orange-foreground: 224 47% 9%;--yellow: 48 96% 63%;--yellow-foreground: 224 47% 9%;--success: 142 76% 46%;--success-foreground: 224 47% 9%;--warning: 43 96% 66%;--warning-foreground: 224 47% 9%;--destructive: 0 63% 31%;--destructive-foreground: 215 25% 91%;--tone-success-bg: 142 76% 15%;--tone-success-border: 142 76% 30%;--tone-success-text: 142 76% 85%;--tone-success-icon: 142 76% 56%;--tone-warning-bg: 43 96% 20%;--tone-warning-border: 43 96% 40%;--tone-warning-text: 43 96% 85%;--tone-warning-icon: 43 96% 66%;--tone-error-bg: 0 84% 25%;--tone-error-border: 0 84% 45%;--tone-error-text: 0 84% 85%;--tone-error-icon: 0 84% 65%;--tone-info-bg: 220 91% 20%;--tone-info-border: 220 91% 40%;--tone-info-text: 220 91% 85%;--tone-info-icon: 220 91% 64%;--tone-default-bg: 0 0% 18%;--tone-default-border: 0 0% 30%;--tone-default-text: 215 25% 91%;--tone-default-icon: 0 0% 72%;--border: 0 0% 22%;--input: 0 0% 20%;--ring: 210 100% 60%;--editor-background: 224 47% 9%;--editor-border: 224 30% 22%;--toolbar-background: 224 30% 16%;--gradient-primary: linear-gradient(135deg, hsl(210 100% 60%), hsl(210 100% 65%));--gradient-subtle: linear-gradient(180deg, hsl(0 0% 9%), hsl(0 0% 14%));--gradient-premium: linear-gradient(135deg, hsl(210 100% 60%) 0%, hsl(0 85% 60%) 100%);--shadow-soft: 0 2px 8px hsl(224 71% 2% / .4);--shadow-medium: 0 4px 16px hsl(224 71% 2% / .5);--shadow-strong: 0 8px 32px hsl(224 71% 2% / .6);--sidebar-background: 224 30% 14%;--sidebar-foreground: 215 25% 91%;--sidebar-primary: 0 60% 55%;--sidebar-primary-foreground: 224 47% 9%;--sidebar-accent: 224 30% 22%;--sidebar-accent-foreground: 215 25% 91%;--sidebar-border: 224 30% 22%;--sidebar-ring: 0 60% 55%}@layer base{body{background-color:hsl(var(--background));color:hsl(var(--foreground));transition:background-color .3s,color .3s;font-feature-settings:"rlig" 1,"calt" 1;font-display:swap}.font-josefin,.font-lato,.font-jost,.font-poppins{font-display:swap}h1,h2,h3,h4,h5,h6,p{color:hsl(var(--foreground))}a{color:hsl(var(--primary));transition:color .2s}a:hover{color:hsl(var(--primary-hover))}.hover-accent:hover{color:hsl(var(--accent));transition:color .2s}.hover-accent-bg:hover{background-color:hsl(var(--accent));color:hsl(var(--accent-foreground));transition:all .2s}*:focus-visible{outline:none;box-shadow:0 0 0 2px hsl(var(--ring)),0 0 0 4px hsl(var(--background))}input,textarea,select{background-color:hsl(var(--background));color:hsl(var(--foreground));border-color:hsl(var(--input))}button{transition:color .2s,background-color .2s}.story-link{@apply relative inline-block after:content-[""] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-primary after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;}.hover-scale{@apply transition-transform duration-200 hover:scale-105;}.hover-lift{@apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;}.hover-glow{@apply transition-all duration-300 hover:shadow-[0_0_20px_rgb(var(--primary)/.3)];}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.focus-visible\:ring-enhanced:focus-visible{@apply ring-2 ring-primary ring-offset-2 ring-offset-background;}.safe-area-pb{padding-bottom:env(safe-area-inset-bottom,0px)}.pb-safe{padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px))}.px-safe{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.mobile-nav-height{height:calc(4rem + env(safe-area-inset-bottom,0px))}.mobile-content-bottom{padding-bottom:calc(4rem + env(safe-area-inset-bottom,0px))}.custom-scrollbar::-webkit-scrollbar{width:6px}.custom-scrollbar::-webkit-scrollbar-track{@apply bg-muted rounded-full;}.custom-scrollbar::-webkit-scrollbar-thumb{@apply bg-muted-foreground/30 rounded-full;}.custom-scrollbar::-webkit-scrollbar-thumb:hover{@apply bg-muted-foreground/50;}.mobile-container{@apply px-4 max-w-full overflow-hidden;}.mobile-section-spacing{gap:var(--mobile-section-spacing)}.mobile-header-spacing{margin-bottom:var(--mobile-header-spacing)}.mobile-card-spacing{gap:var(--mobile-card-spacing)}.mobile-no-overflow{@apply max-w-full overflow-hidden;}.section-spacing{@apply mb-8;}.card-group-spacing{@apply mb-6;}.subsection-spacing{@apply mb-4;}.item-spacing{@apply mb-2;}.page-title{@apply text-3xl font-bold text-foreground mb-2;}.section-title{@apply text-2xl font-semibold text-foreground mb-4;}.card-title{@apply text-xl font-semibold text-foreground mb-3;}.subsection-title{@apply text-lg font-medium text-foreground mb-2;}.body-text{@apply text-base font-normal text-foreground leading-relaxed;}.caption-text{@apply text-sm text-muted-foreground;}.card-padding-sm{@apply p-4;}.card-padding-default{@apply p-6;}.card-padding-lg{@apply p-8;}.card-padding-none{@apply p-0;}.grid-auto-fill-cards{@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6;}.grid-feature-cards{@apply grid grid-cols-2 md:grid-cols-3 gap-6;}.grid-two-column{@apply grid grid-cols-1 md:grid-cols-2 gap-6;}.grid-sidebar-content{@apply grid grid-cols-1 md:grid-cols-[300px_1fr] gap-6;}.stack-tight{@apply flex flex-col gap-2;}.stack-normal{@apply flex flex-col gap-4;}.stack-relaxed{@apply flex flex-col gap-6;}.stack-loose{@apply flex flex-col gap-8;}.animate-hover-scale{@apply transition-transform duration-200 hover:scale-[1.02];}.animate-card-hover{@apply transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_8px_25px_-5px_hsl(var(--primary)/.1)];}.animate-button-press:active{@apply scale-[.98];}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.6}}.animate-skeleton{animation:skeleton-pulse 1.5s ease-in-out infinite}@keyframes success-glow{0%{box-shadow:0 0 hsl(var(--success) / .4)}50%{box-shadow:0 0 20px 10px hsl(var(--success) / .2)}to{box-shadow:0 0 hsl(var(--success) / 0)}}@keyframes error-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.animate-success-glow{animation:success-glow 2s ease-out}.animate-error-shake{animation:error-shake .5s ease-out}@keyframes reveal{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes slide-down{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-up{0%{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}.animate-reveal{animation:reveal .4s ease-out}.animate-slide-down{animation:slide-down .3s ease-out}.animate-slide-up{animation:slide-up .3s ease-out}@keyframes shrink{0%{width:100%}to{width:0%}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOutRight{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideOutDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(100%);opacity:0}}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.notification-enter{animation:slideInRight .3s ease-out forwards}.notification-exit{animation:slideOutRight .3s ease-in forwards}.banner-enter{animation:slideInUp .3s ease-out forwards}.banner-exit{animation:slideOutDown .3s ease-in forwards}.modal-enter{animation:fadeIn .3s ease-out forwards}.modal-exit{animation:fadeOut .3s ease-in forwards}.notification-progress{animation:shrink linear forwards}.notification-success{animation:bounce .6s ease-out}.notification-error{animation:error-shake .5s ease-out}.button-hover-primary:hover{@apply bg-primary/90 transition-colors;}.button-hover-secondary:hover{@apply bg-secondary/80 transition-colors;}.button-hover-outline:hover{@apply bg-accent text-accent-foreground transition-all;}.bg-subtle{@apply bg-muted/30;}.bg-surface{@apply bg-card border border-border;}.bg-elevated{@apply bg-card shadow-soft border border-border;}.bg-success-subtle{@apply bg-success/10 text-success-foreground;}.bg-warning-subtle{@apply bg-warning/10 text-warning-foreground;}.bg-destructive-subtle{@apply bg-destructive/10 text-destructive-foreground;}.bg-info-subtle{@apply bg-blue/10 text-blue-foreground;}.form-group{@apply flex flex-col gap-2 mb-4;}.form-label{@apply text-sm font-medium text-foreground;}.form-help-text{@apply text-sm text-muted-foreground mt-1;}.form-error-text{@apply text-sm text-destructive mt-1;}.badge-base{@apply inline-flex items-center rounded-full px-3 py-1 text-xs font-medium;}.badge-primary{@apply badge-base bg-primary/10 text-primary;}.badge-secondary{@apply badge-base bg-secondary/10 text-secondary;}.badge-success{@apply badge-base bg-success/10 text-success;}.badge-warning{@apply badge-base bg-warning/10 text-warning;}.badge-destructive{@apply badge-base bg-destructive/10 text-destructive;}.badge-neutral{@apply badge-base bg-muted text-muted-foreground;}.list-spaced{@apply space-y-2;}.list-relaxed{@apply space-y-4;}.list-divider>*+*{@apply border-t border-border pt-4 mt-4;}.content-prose{@apply text-foreground leading-relaxed;}.content-prose h1{@apply text-3xl font-bold mb-4 mt-8 first:mt-0;}.content-prose h2{@apply text-2xl font-semibold mb-3 mt-6 first:mt-0;}.content-prose h3{@apply text-xl font-semibold mb-2 mt-4 first:mt-0;}.content-prose p{@apply mb-4;}.content-prose ul,.content-prose ol{@apply mb-4 ml-6;}.content-prose li{@apply mb-2;}.content-prose a{@apply text-primary hover:text-primary-hover underline;}.content-prose code{@apply bg-muted px-1.5 py-0.5 rounded text-sm;}.content-prose pre{@apply bg-muted p-4 rounded-lg overflow-x-auto mb-4;}.table-container{@apply w-full overflow-x-auto;}.table-cell-compact{@apply px-3 py-2;}.table-cell-default{@apply px-4 py-3;}.table-cell-relaxed{@apply px-6 py-4;}}
