@inspirare/design-system 0.0.9 → 0.0.10

package/src/index.css

@@ -0,0 +1,1434 @@
+@import "tailwindcss";
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: #fafaf9;
+  --foreground: #09090b;
+  --card: #fafaf9;
+  --card-foreground: #09090b;
+  --popover: #fdfdfd;
+  --popover-foreground: #09090b;
+  --primary: #dc663e;
+  --primary-foreground: #fceed7;
+  --secondary: #e3ac8e;
+  --secondary-foreground: #2c2c2c;
+  --muted: #f4f4f5;
+  --muted-foreground: #71717a;
+  --accent: #f4f4f5;
+  --accent-foreground: #171717;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --border: #e4e4e7;
+  --input: #e4e4e7;
+  --ring: #861e11;
+  --chart-1: #dc663e;
+  --chart-2: #e3ac8e;
+  --chart-3: #fceed7;
+  --chart-4: #71717a;
+  --chart-5: #f4f4f5;
+  --sidebar: #f4f4f5;
+  --sidebar-foreground: #09090b;
+  --sidebar-primary: #dc663e;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #f4f4f5;
+  --sidebar-accent-foreground: #09090b;
+  --sidebar-border: #e4e4e7;
+  --sidebar-ring: #dc663e;
+  --font-sans: Josefin Sans, ui-sans-serif, sans-serif, system-ui;
+  --font-serif: Special Elite, ui-serif, serif;
+  --font-mono: Fira Code;
+  --radius: 0.5rem;
+  /* 8px */
+  --shadow-2xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.01);
+  --shadow-xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.01);
+  --shadow-sm:
+    0px 4px 8px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
+  --shadow:
+    0px 4px 8px 0px hsl(0 0% 0% / 0.02), 0px 1px 2px -1px hsl(0 0% 0% / 0.02);
+  --shadow-md:
+    0px 4px 8px 0px hsl(0 0% 0% / 0.02), 0px 2px 4px -1px hsl(0 0% 0% / 0.02);
+  --shadow-lg:
+    0px 4px 8px 0px hsl(0 0% 0% / 0.02), 0px 4px 6px -1px hsl(0 0% 0% / 0.02);
+  --shadow-xl:
+    0px 4px 8px 0px hsl(0 0% 0% / 0.02), 0px 8px 10px -1px hsl(0 0% 0% / 0.02);
+  --shadow-2xl: 0px 4px 8px 0px hsl(0 0% 0% / 0.05);
+  --tracking-normal: 0.05em;
+  --spacing: 0.25rem;
+
+  /* Additional Editor and Generic Variables */
+  --tt-radius-xxs: 0.125rem;
+  /* 2px */
+  --tt-radius-xs: 0.25rem;
+  /* 4px */
+  --tt-radius-sm: 0.375rem;
+  /* 6px */
+  --tt-radius-md: 0.5rem;
+  /* 8px */
+  --tt-radius-lg: 0.75rem;
+  /* 12px */
+  --tt-radius-xl: 1rem;
+  /* 16px */
+  --tt-transition-duration-short: 0.1s;
+  --tt-transition-duration-default: 0.2s;
+  --tt-transition-duration-long: 0.64s;
+  --tt-transition-easing-default: cubic-bezier(0.46, 0.03, 0.52, 0.96);
+}
+
+.dark {
+  --background: #2a2a2a;
+  --foreground: #fceed7;
+  --card: #353535;
+  --card-foreground: #fceed7;
+  --popover: #303030;
+  --popover-foreground: #fceed7;
+  --primary: #dc663e;
+  --primary-dark: #ff7512;
+  --primary-foreground: #fceed7;
+  --secondary: #fceed7;
+  --secondary-foreground: #2a2a2a;
+  --muted: #404040;
+  --muted-foreground: #b8b8b8;
+  --accent: #fceed7;
+  --accent-foreground: #2a2a2a;
+  --destructive: #ef4444;
+  --destructive-foreground: #fceed7;
+  --border: #454545;
+  --input: #404040;
+  --ring: #dc663e;
+  --chart-1: #dc663e;
+  --chart-2: #fceed7;
+  --chart-3: #e3ac8e;
+  --chart-4: #b8b8b8;
+  --chart-5: #404040;
+  --sidebar: #303030;
+  --sidebar-foreground: #fceed7;
+  --sidebar-primary: #dc663e;
+  --sidebar-primary-foreground: #fceed7;
+  --sidebar-accent: #404040;
+  --sidebar-accent-foreground: #fceed7;
+  --sidebar-border: #454545;
+  --sidebar-ring: #dc663e;
+  --radius: 0.5rem;
+  /* 8px */
+  --shadow-2xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.1);
+  --shadow-xs: 0px 4px 8px 0px hsl(0 0% 0% / 0.1);
+  --shadow-sm:
+    0px 4px 8px 0px hsl(0 0% 0% / 0.15), 0px 1px 2px -1px hsl(0 0% 0% / 0.15);
+  --shadow:
+    0px 4px 8px 0px hsl(0 0% 0% / 0.15), 0px 1px 2px -1px hsl(0 0% 0% / 0.15);
+  --shadow-md:
+    0px 4px 8px 0px hsl(0 0% 0% / 0.15), 0px 2px 4px -1px hsl(0 0% 0% / 0.15);
+  --shadow-lg:
+    0px 4px 8px 0px hsl(0 0% 0% / 0.15), 0px 4px 6px -1px hsl(0 0% 0% / 0.15);
+  --shadow-xl:
+    0px 4px 8px 0px hsl(0 0% 0% / 0.15), 0px 8px 10px -1px hsl(0 0% 0% / 0.15);
+  --shadow-2xl: 0px 4px 8px 0px hsl(0 0% 0% / 0.3);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: var(--font-sans);
+  --font-serif: var(--font-serif);
+  --font-mono: var(--font-mono);
+
+  /* Inspirare Brand Colors */
+  --color-Inspirare-purple-50: oklch(0.95 0.05 270);
+  --color-Inspirare-purple-100: oklch(0.9 0.1 270);
+  --color-Inspirare-purple-200: oklch(0.85 0.15 270);
+  --color-Inspirare-purple-300: oklch(0.8 0.18 270);
+  --color-Inspirare-purple-400: oklch(0.7 0.2 270);
+  --color-Inspirare-purple-500: oklch(0.6 0.2 270);
+  --color-Inspirare-purple-600: oklch(0.55 0.22 270);
+  --color-Inspirare-purple-700: oklch(0.5 0.24 270);
+  --color-Inspirare-purple-800: oklch(0.4 0.26 270);
+  --color-Inspirare-purple-900: oklch(0.3 0.28 270);
+
+  --color-Inspirare-blue-50: oklch(0.95 0.05 200);
+  --color-Inspirare-blue-100: oklch(0.9 0.08 200);
+  --color-Inspirare-blue-200: oklch(0.85 0.12 200);
+  --color-Inspirare-blue-300: oklch(0.8 0.15 200);
+  --color-Inspirare-blue-400: oklch(0.75 0.15 200);
+  --color-Inspirare-blue-500: oklch(0.7 0.18 200);
+  --color-Inspirare-blue-600: oklch(0.65 0.2 200);
+  --color-Inspirare-blue-700: oklch(0.6 0.22 200);
+  --color-Inspirare-blue-800: oklch(0.5 0.24 200);
+  --color-Inspirare-blue-900: oklch(0.4 0.26 200);
+
+  /* Animations & Keyframes */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-fade-in: fade-in 0.3s ease-out;
+  --animate-fade-in-up: fade-in-up 0.6s ease-out;
+  --animate-slide-in-from-top: slide-in-from-top 0.3s ease-out;
+  --animate-slide-in-from-bottom: slide-in-from-bottom 0.3s ease-out;
+  --animate-float: float 3s ease-in-out infinite;
+  --animate-gradient: gradient 3s ease infinite;
+  --animate-glow: glow 2s ease-in-out infinite alternate;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-in-up {
+    0% {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-in-from-top {
+    0% {
+      transform: translateY(-100%);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slide-in-from-bottom {
+    0% {
+      transform: translateY(100%);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes float {
+
+    0%,
+    100% {
+      transform: translateY(0px);
+    }
+
+    50% {
+      transform: translateY(-20px);
+    }
+  }
+
+  @keyframes gradient {
+
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+
+    50% {
+      background-position: 100% 50%;
+    }
+  }
+
+  @keyframes glow {
+
+    0%,
+    100% {
+      box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
+    }
+
+    50% {
+      box-shadow: 0 0 40px rgba(139, 92, 246, 0.6);
+    }
+  }
+}
+
+@layer utilities {
+  .glass {
+    @apply bg-white/70 backdrop-blur-xl border-white/20;
+  }
+
+  .glass-dark {
+    @apply bg-gray-900/70 backdrop-blur-xl border-gray-700/20;
+  }
+
+  .gradient-text {
+    background: linear-gradient(135deg,
+        var(--primary) 0%,
+        var(--secondary) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .gradient-bg {
+    background: linear-gradient(135deg,
+        var(--primary) 0%,
+        var(--secondary) 100%);
+  }
+
+  .gradient-blob {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(40px);
+    opacity: 0.05;
+    animation: float 20s ease-in-out infinite;
+  }
+
+  .gradient-blob-1 {
+    width: 300px;
+    height: 300px;
+    background: linear-gradient(45deg, var(--primary), var(--secondary));
+    opacity: 0.05;
+    top: 10%;
+    left: 10%;
+    animation-delay: 0s;
+  }
+
+  .gradient-blob-2 {
+    width: 200px;
+    height: 200px;
+    background: linear-gradient(135deg, var(--secondary), var(--primary));
+    opacity: 0.05;
+    top: 60%;
+    right: 15%;
+    animation-delay: -10s;
+  }
+
+  .gradient-blob-3 {
+    width: 250px;
+    height: 250px;
+    background: linear-gradient(225deg, var(--primary), var(--accent));
+    opacity: 0.05;
+    bottom: 20%;
+    left: 50%;
+    animation-delay: -5s;
+  }
+
+  .aurora-bg {
+    background: linear-gradient(135deg,
+        hsla(from var(--primary) h s l / 0.1) 0%,
+        hsla(from var(--secondary) h s l / 0.1) 50%,
+        hsla(from var(--primary) h s l / 0.1) 100%);
+  }
+
+  .font-heading {
+    @apply font-serif font-semibold;
+  }
+
+  .font-body {
+    @apply font-sans;
+  }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  /* Fix for Radix Popper z-index auto issues in MFE / Host environments */
+  [data-radix-popper-content-wrapper] {
+    z-index: 99999 !important;
+  }
+}
+
+/* === MIGRATED FROM _variables.scss === */
+:root {
+  /****************** 
+  Basics
+  ******************/
+
+  overflow-wrap: break-word;
+  text-size-adjust: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /****************** 
+  Colors variables - Mapped from globals.css
+  ******************/
+
+  /* Gray alpha -> Mapped to accent/muted with opacity */
+  --tt-gray-light-a-50: hsl(from var(--muted) h s l / 0.04);
+  --tt-gray-light-a-100: hsl(from var(--accent) h s l / 0.05);
+  --tt-gray-light-a-200: hsl(from var(--accent) h s l / 0.1);
+  --tt-gray-light-a-300: hsl(from var(--accent) h s l / 0.2);
+  --tt-gray-light-a-400: hsl(from var(--muted-foreground) h s l / 0.42);
+  --tt-gray-light-a-500: hsl(from var(--muted-foreground) h s l / 0.64);
+  --tt-gray-light-a-600: hsl(from var(--foreground) h s l / 0.78);
+  --tt-gray-light-a-700: hsl(from var(--foreground) h s l / 0.87);
+  --tt-gray-light-a-800: hsl(from var(--foreground) h s l / 0.95);
+  --tt-gray-light-a-900: hsl(from var(--foreground) h s l / 0.98);
+
+  /* Gray -> Mapped to semantic grays */
+  --tt-gray-light-50: var(--card);
+  --tt-gray-light-100: var(--muted);
+  --tt-gray-light-200: var(--accent);
+  --tt-gray-light-300: var(--border);
+  --tt-gray-light-400: var(--muted-foreground);
+  --tt-gray-light-500: var(--muted-foreground);
+  --tt-gray-light-600: var(--foreground);
+  --tt-gray-light-700: var(--foreground);
+  --tt-gray-light-800: var(--foreground);
+  --tt-gray-light-900: var(--foreground);
+
+  /* Brand colors -> Mapped to primary/secondary */
+  --tt-brand-color-50: hsl(from var(--primary) h s l / 0.05);
+  --tt-brand-color-100: hsl(from var(--primary) h s l / 0.1);
+  --tt-brand-color-200: hsl(from var(--primary) h s l / 0.2);
+  --tt-brand-color-300: hsl(from var(--primary) h s l / 0.4);
+  --tt-brand-color-400: hsl(from var(--primary) h s l / 0.6);
+  --tt-brand-color-500: var(--primary);
+  --tt-brand-color-600: var(--primary);
+  --tt-brand-color-700: var(--primary);
+  --tt-brand-color-800: var(--primary);
+  --tt-brand-color-900: var(--primary-foreground);
+  --tt-brand-color-950: var(--primary-foreground);
+
+  --transparent: rgba(255, 255, 255, 0);
+
+  /****************** 
+  Shadow variables
+  ******************/
+
+  /* Shadows Light */
+  --tt-shadow-elevated-md:
+    0px 16px 48px 0px rgba(17, 24, 39, 0.04),
+    0px 12px 24px 0px rgba(17, 24, 39, 0.04),
+    0px 6px 8px 0px rgba(17, 24, 39, 0.02),
+    0px 2px 3px 0px rgba(17, 24, 39, 0.02);
+
+  /************************************************** 
+       Radius variables 
+    **************************************************/
+
+  --tt-radius-xxs: 0.125rem; /* 2px */
+  --tt-radius-xs: 0.25rem; /* 4px */
+  --tt-radius-sm: 0.375rem; /* 6px */
+  --tt-radius-md: 0.5rem; /* 8px */
+  --tt-radius-lg: 0.75rem; /* 12px */
+  --tt-radius-xl: 1rem; /* 16px */
+
+  /************************************************** 
+       Transition variables 
+    **************************************************/
+
+  --tt-transition-duration-short: 0.1s;
+  --tt-transition-duration-default: 0.2s;
+  --tt-transition-duration-long: 0.64s;
+  --tt-transition-easing-default: cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  --tt-transition-easing-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
+  --tt-transition-easing-quart: cubic-bezier(0.77, 0, 0.18, 1);
+  --tt-transition-easing-circ: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+  --tt-transition-easing-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);
+
+  &,
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    transition: none var(--tt-transition-duration-default)
+      var(--tt-transition-easing-default);
+  }
+  /************************************************** 
+      Global colors 
+  **************************************************/
+
+  --tt-bg-color: var(--background);
+  --tt-border-color: var(--tt-gray-light-a-200);
+  --tt-border-color-tint: var(--tt-gray-light-a-100);
+  --tt-sidebar-bg-color: var(--sidebar);
+  --tt-scrollbar-color: var(--tt-gray-light-a-200);
+  --tt-cursor-color: var(--tt-brand-color-500);
+  --tt-selection-color: hsl(from var(--primary) h s l / 0.3);
+  --tt-card-bg-color: var(--card);
+  --tt-card-border-color: var(--border);
+}
+
+/* Text colors */
+:root {
+  --tt-color-text-gray: var(--muted-foreground);
+  --tt-color-text-brown: var(--secondary);
+  --tt-color-text-orange: var(--primary);
+  --tt-color-text-yellow: var(--primary);
+  --tt-color-text-green: var(--secondary);
+  --tt-color-text-blue: var(--primary);
+  --tt-color-text-purple: var(--primary);
+  --tt-color-text-pink: var(--primary);
+  --tt-color-text-red: var(--destructive);
+
+  --tt-color-text-gray-contrast: hsl(from var(--muted-foreground) h s l / 0.15);
+  --tt-color-text-brown-contrast: hsl(from var(--secondary) h s l / 0.2);
+  --tt-color-text-orange-contrast: hsl(from var(--primary) h s l / 0.2);
+  --tt-color-text-yellow-contrast: hsl(from var(--primary) h s l / 0.2);
+  --tt-color-text-green-contrast: hsl(from var(--secondary) h s l / 0.2);
+  --tt-color-text-blue-contrast: hsl(from var(--primary) h s l / 0.2);
+  --tt-color-text-purple-contrast: hsl(from var(--primary) h s l / 0.2);
+  --tt-color-text-pink-contrast: hsl(from var(--primary) h s l / 0.2);
+  --tt-color-text-red-contrast: hsl(from var(--destructive) h s l / 0.2);
+}
+
+/* Highlight colors */
+:root {
+  --tt-color-highlight-yellow: hsl(from var(--primary) h s l / 0.1);
+  --tt-color-highlight-green: hsl(from var(--secondary) h s l / 0.1);
+  --tt-color-highlight-blue: hsl(from var(--primary) h s l / 0.1);
+  --tt-color-highlight-purple: hsl(from var(--primary) h s l / 0.1);
+  --tt-color-highlight-red: hsl(from var(--destructive) h s l / 0.1);
+  --tt-color-highlight-gray: var(--accent);
+  --tt-color-highlight-brown: hsl(from var(--secondary) h s l / 0.1);
+  --tt-color-highlight-orange: hsl(from var(--primary) h s l / 0.1);
+  --tt-color-highlight-pink: hsl(from var(--primary) h s l / 0.1);
+
+  --tt-color-highlight-yellow-contrast: hsl(from var(--primary) h s l / 0.2);
+  --tt-color-highlight-green-contrast: hsl(from var(--secondary) h s l / 0.2);
+  --tt-color-highlight-blue-contrast: hsl(from var(--primary) h s l / 0.2);
+  --tt-color-highlight-purple-contrast: hsl(from var(--primary) h s l / 0.2);
+  --tt-color-highlight-red-contrast: hsl(from var(--destructive) h s l / 0.2);
+  --tt-color-highlight-gray-contrast: var(--border);
+  --tt-color-highlight-brown-contrast: hsl(from var(--secondary) h s l / 0.2);
+  --tt-color-highlight-orange-contrast: hsl(from var(--primary) h s l / 0.2);
+  --tt-color-highlight-pink-contrast: hsl(from var(--primary) h s l / 0.2);
+}
+
+/************************************************** 
+    Dark Mode Overrides
+**************************************************/
+
+.dark {
+  /****************** 
+  Dark Mode Shadow variables
+  ******************/
+
+  /* Shadows Dark - More pronounced for dark backgrounds */
+  --tt-shadow-elevated-md:
+    0px 16px 48px 0px rgba(0, 0, 0, 0.3), 0px 12px 24px 0px rgba(0, 0, 0, 0.2),
+    0px 6px 8px 0px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
+
+  /****************** 
+  Dark Mode Transparency adjustments
+  ******************/
+
+  /* Adjusted transparency for better contrast in dark mode */
+  --transparent: rgba(0, 0, 0, 0);
+
+  /****************** 
+  Dark Mode Selection and cursor
+  ******************/
+
+  /* Enhanced selection visibility in dark mode */
+  --tt-selection-color: hsl(from var(--primary) h s l / 0.4);
+
+  /* Cursor remains vibrant in dark mode */
+  --tt-cursor-color: var(--primary);
+
+  /****************** 
+  Dark Mode Scrollbar
+  ******************/
+
+  /* More visible scrollbar in dark mode */
+  --tt-scrollbar-color: var(--tt-gray-light-a-300);
+}
+
+
+/* === MIGRATED FROM shared/styles/globals.css === */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.95);
+  }
+}
+
+@keyframes zoom {
+  0% {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes slideFromTop {
+  from {
+    transform: translateY(-0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideFromRight {
+  from {
+    transform: translateX(0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideFromLeft {
+  from {
+    transform: translateX(-0.5rem);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideFromBottom {
+  from {
+    transform: translateY(0.5rem);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+
+
+/* React Flow Theme Integration */
+.react-flow {
+  --xy-background-color: transparent;
+  --xy-minimap-background-color: var(--card);
+  --xy-minimap-mask-background-color: var(--muted);
+  --xy-minimap-mask-stroke-color: var(--border);
+  --xy-controls-button-background-color: var(--card);
+  --xy-controls-button-background-color-hover: var(--muted);
+  --xy-controls-button-color: var(--foreground);
+  --xy-controls-button-color-hover: var(--foreground);
+  --xy-controls-button-border-color: var(--border);
+  --xy-node-border-color: var(--border);
+  --xy-node-background-color: var(--card);
+  --xy-node-color: var(--foreground);
+}
+
+body {
+  letter-spacing: var(--tracking-normal);
+}
+
+/* ============================================================
+   Book Editor — Page Sheet
+   The .page-sheet class represents a book/document page inside
+   the multi-page editor. It uses CSS variables so it adapts to
+   the active theme (light/dark) without JavaScript.
+   ============================================================ */
+.page-sheet {
+  background-color: #ffffff;
+  color: #09090b;
+}
+
+.dark .page-sheet {
+  background-color: var(--card);
+  color: var(--card-foreground);
+}
+
+/* Ensure Tailwind prose typography respects page-sheet theme */
+.dark .page-sheet .prose,
+.dark .page-sheet .prose-invert {
+  color: var(--card-foreground);
+}
+
+/* Inspector Panel Styles - Correções de Layout */
+.inspector-container {
+  @apply flex flex-col h-full overflow-hidden;
+}
+
+.inspector-content {
+  @apply flex-1 overflow-y-auto p-4 space-y-4;
+}
+
+.inspector-field {
+  @apply space-y-2;
+}
+
+.inspector-label {
+  @apply text-sm font-medium text-foreground leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
+}
+
+.inspector-input {
+  @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+.inspector-textarea {
+  @apply flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  white-space: pre-wrap;
+  resize: vertical;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: var(--font-sans);
+  --font-serif: var(--font-serif);
+  --font-mono: var(--font-mono);
+}
+
+/* Added glassmorphism utilities and custom styles */
+@layer utilities {
+  .glass {
+    @apply bg-white/70 backdrop-blur-xl border-white/20;
+  }
+
+  .glass-dark {
+    @apply bg-gray-900/70 backdrop-blur-xl border-gray-700/20;
+  }
+
+  .gradient-text {
+    background: linear-gradient(
+      135deg,
+      var(--primary) 0%,
+      var(--secondary) 100%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .gradient-bg {
+    background: linear-gradient(
+      135deg,
+      var(--primary) 0%,
+      var(--secondary) 100%
+    );
+  }
+
+  /* Added animated gradient blobs for background decoration */
+  .gradient-blob {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(40px);
+    opacity: 0.05;
+    animation: float 20s ease-in-out infinite;
+  }
+
+  .gradient-blob-1 {
+    width: 300px;
+    height: 300px;
+    background: linear-gradient(45deg, var(--primary), var(--secondary));
+    opacity: 0.05;
+    top: 10%;
+    left: 10%;
+    animation-delay: 0s;
+  }
+
+  .gradient-blob-2 {
+    width: 200px;
+    height: 200px;
+    background: linear-gradient(135deg, var(--secondary), var(--primary));
+    opacity: 0.05;
+    top: 60%;
+    right: 15%;
+    animation-delay: -10s;
+  }
+
+  .gradient-blob-3 {
+    width: 250px;
+    height: 250px;
+    background: linear-gradient(225deg, var(--primary), var(--accent));
+    opacity: 0.05;
+    bottom: 20%;
+    left: 50%;
+    animation-delay: -5s;
+  }
+
+  .aurora-bg {
+    background: linear-gradient(
+      135deg,
+      hsla(from var(--primary) h s l / 0.1) 0%,
+      hsla(from var(--secondary) h s l / 0.1) 50%,
+      hsla(from var(--primary) h s l / 0.1) 100%
+    );
+  }
+
+  .font-heading {
+    @apply font-serif font-semibold;
+  }
+
+  .font-body {
+    @apply font-sans;
+  }
+
+  /* Skeleton shimmer animation */
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body, .remotion-container {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* For Remotion Commercial Video - Hide specific scrollbars */
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+
+
+/* Fallback fonts removed. Next.js handles fonts via next/font, and these unresolved absolute URLs cause Webpack/Remotion bundling errors. */
+
+/* Tour Styles - React Joyride */
+[data-tour] {
+  position: relative;
+  z-index: 1;
+}
+
+/* Tour Responsive Styles */
+.inspirare-tour [data-tour-elem="tooltip"] {
+  max-width: 420px;
+  width: 90vw;
+}
+
+/* Mobile Tour Styles (up to 640px) */
+@media (max-width: 640px) {
+  .inspirare-tour [data-tour-elem="tooltip"] {
+    max-width: 320px;
+    width: 95vw;
+    padding: 16px !important;
+    font-size: 14px;
+    margin: 8px;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] h3 {
+    font-size: 16px !important;
+    line-height: 1.4 !important;
+    margin-bottom: 8px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] p {
+    font-size: 13px !important;
+    line-height: 1.5 !important;
+    margin-bottom: 6px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] .glass,
+  .inspirare-tour [data-tour-elem="tooltip"] .bg-primary\/5 {
+    padding: 8px !important;
+    margin-top: 8px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] .glass p,
+  .inspirare-tour [data-tour-elem="tooltip"] .bg-primary\/5 p {
+    font-size: 11px !important;
+    line-height: 1.4 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .inspirare-tour [data-tour-elem="controls"] {
+    margin-top: 12px !important;
+    gap: 8px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="controls"] button {
+    padding: 8px 12px !important;
+    font-size: 12px !important;
+    min-width: 60px !important;
+  }
+
+  .inspirare-tour .space-y-4 > * + * {
+    margin-top: 12px !important;
+  }
+
+  .inspirare-tour .space-y-3 > * + * {
+    margin-top: 8px !important;
+  }
+}
+
+/* Tablet Tour Styles (641px to 1024px) */
+@media (min-width: 641px) and (max-width: 1024px) {
+  .inspirare-tour [data-tour-elem="tooltip"] {
+    max-width: 380px;
+    width: 85vw;
+    padding: 20px !important;
+    font-size: 14px;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] h3 {
+    font-size: 17px !important;
+    line-height: 1.4 !important;
+    margin-bottom: 10px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] p {
+    font-size: 13px !important;
+    line-height: 1.6 !important;
+    margin-bottom: 8px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] .glass,
+  .inspirare-tour [data-tour-elem="tooltip"] .bg-primary\/5 {
+    padding: 10px !important;
+    margin-top: 10px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] .glass p,
+  .inspirare-tour [data-tour-elem="tooltip"] .bg-primary\/5 p {
+    font-size: 11px !important;
+    line-height: 1.4 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .inspirare-tour [data-tour-elem="controls"] {
+    margin-top: 16px !important;
+    gap: 10px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="controls"] button {
+    padding: 10px 16px !important;
+    font-size: 13px !important;
+  }
+
+  .inspirare-tour .space-y-4 > * + * {
+    margin-top: 14px !important;
+  }
+
+  .inspirare-tour .space-y-3 > * + * {
+    margin-top: 10px !important;
+  }
+}
+
+/* Desktop Tour Styles (1025px and up) */
+@media (min-width: 1025px) {
+  .inspirare-tour [data-tour-elem="tooltip"] {
+    max-width: 420px;
+    width: auto;
+    padding: 24px !important;
+    font-size: 14px;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] h3 {
+    font-size: 18px !important;
+    line-height: 1.4 !important;
+    margin-bottom: 12px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] p {
+    font-size: 14px !important;
+    line-height: 1.6 !important;
+    margin-bottom: 10px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] .glass,
+  .inspirare-tour [data-tour-elem="tooltip"] .bg-primary\/5 {
+    padding: 12px !important;
+    margin-top: 12px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="tooltip"] .glass p,
+  .inspirare-tour [data-tour-elem="tooltip"] .bg-primary\/5 p {
+    font-size: 12px !important;
+    line-height: 1.4 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .inspirare-tour [data-tour-elem="controls"] {
+    margin-top: 20px !important;
+    gap: 12px !important;
+  }
+
+  .inspirare-tour [data-tour-elem="controls"] button {
+    padding: 12px 20px !important;
+    font-size: 14px !important;
+  }
+
+  .inspirare-tour .space-y-4 > * + * {
+    margin-top: 16px !important;
+  }
+
+  .inspirare-tour .space-y-3 > * + * {
+    margin-top: 12px !important;
+  }
+}
+
+/* Tour Spotlight Responsive Adjustments */
+@media (max-width: 640px) {
+  .inspirare-tour [data-tour-elem="spotlight"] {
+    border-width: 1px !important;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 1024px) {
+  .inspirare-tour [data-tour-elem="spotlight"] {
+    border-width: 1.5px !important;
+  }
+}
+
+@media (min-width: 1025px) {
+  .inspirare-tour [data-tour-elem="spotlight"] {
+    border-width: 2px !important;
+  }
+}
+
+/* Focus Mode Styles */
+.focus-mode-active {
+  overflow: hidden;
+}
+
+.focus-mode-active .main-header,
+.focus-mode-active .sidebar,
+.focus-mode-active .bottom-toolbar,
+.focus-mode-active [data-hide-in-focus] {
+  display: none !important;
+}
+
+/* Z-Index Hierarchy */
+.focus-mode-overlay {
+  z-index: 9999 !important;
+}
+
+.floating-stats {
+  z-index: 9998 !important;
+}
+
+.writer-toolbar-focus {
+  z-index: 9997 !important;
+}
+
+/* Floating Stats Specific Styles */
+.stats-container {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  z-index: 9998;
+  transition: all 0.3s ease;
+}
+
+.stats-container.focus-mode {
+  bottom: 24px;
+  right: 24px;
+  backdrop-filter: blur(20px);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 24px;
+  padding: 16px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+}
+
+.stats-container.focus-mode.dark {
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Focus Mode Editor - Removed conflicting styles to prevent interference with component-level styles */
+
+/* Writer Toolbar in Focus Mode */
+.writer-toolbar-focus {
+  backdrop-filter: blur(20px);
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: 12px;
+  margin-bottom: 16px;
+}
+
+.writer-toolbar-focus .toolbar-button {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: white;
+  transition: all 0.3s ease;
+}
+
+.writer-toolbar-focus .toolbar-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: scale(1.05);
+}
+
+.writer-toolbar-focus .toolbar-button.active {
+  background: linear-gradient(135deg, #dc663e, #e3ac8e);
+  border-color: #dc663e;
+}
+
+/* Elegant Button Styles */
+.btn-elegant-primary {
+  background: linear-gradient(135deg, #dc663e, #e3ac8e);
+  border: none;
+  color: white;
+  font-weight: 600;
+  padding: 12px 24px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(220, 102, 62, 0.3);
+}
+
+.btn-elegant-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(220, 102, 62, 0.4);
+  background: linear-gradient(135deg, #e3ac8e, #dc663e);
+}
+
+.btn-elegant-secondary {
+  background: linear-gradient(
+    135deg,
+    rgba(227, 172, 142, 0.8),
+    rgba(227, 172, 142, 1)
+  );
+  border: 1px solid rgba(220, 102, 62, 0.3);
+  color: #8b4513;
+  font-weight: 500;
+  padding: 10px 20px;
+  border-radius: 10px;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.btn-elegant-secondary:hover {
+  background: linear-gradient(
+    135deg,
+    rgba(227, 172, 142, 1),
+    rgba(227, 172, 142, 0.8)
+  );
+  transform: translateY(-1px);
+  box-shadow: 0 4px 15px rgba(227, 172, 142, 0.3);
+}
+
+/* Glass Effect Utilities */
+.glass-effect {
+  backdrop-filter: blur(20px);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.glass-effect-dark {
+  backdrop-filter: blur(20px);
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+/* Responsive adjustments for mobile */
+@media (max-width: 768px) {
+  .stats-container.focus-mode {
+    bottom: 16px;
+    right: 16px;
+    left: 16px;
+    width: auto;
+  }
+
+}
+
+/* Animation keyframes */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px) rotate(0deg);
+    opacity: 0.3;
+  }
+  50% {
+    transform: translateY(-8px) rotate(180deg);
+    opacity: 0.7;
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.animate-slide-in-right {
+  animation: slideInRight 0.5s ease-out;
+}
+
+.animate-float {
+  animation: float 6s ease-in-out infinite;
+}
+
+/* Navigation tree visual connectors and refined hierarchy effects */
+.nav-tree {
+  position: relative;
+  /* Slightly wider default offset to align with improved paddings */
+  --tree-offset: 1rem;
+  --tree-stroke: 1.25px;
+  --tree-color: hsla(from var(--primary) h s l / 0.18);
+}
+.nav-tree--indent-sm {
+  --tree-offset: 0.875rem;
+}
+.nav-tree--indent-md {
+  --tree-offset: 1rem;
+}
+
+.nav-tree::before {
+  content: "";
+  position: absolute;
+  left: var(--tree-offset);
+  top: 6px;
+  bottom: 6px;
+  width: var(--tree-stroke);
+  background: linear-gradient(
+    to bottom,
+    hsla(from var(--primary) h s l / 0.18),
+    hsla(from var(--primary) h s l / 0.1),
+    hsla(from var(--primary) h s l / 0.08)
+  );
+  border-radius: 6px;
+}
+
+.nav-tree-item {
+  position: relative;
+}
+
+.nav-tree-item::before {
+  content: "";
+  position: absolute;
+  left: calc(var(--tree-offset) - 0.25rem);
+  top: 50%;
+  width: 16px;
+  height: var(--tree-stroke);
+  background: hsla(from var(--primary) h s l / 0.2);
+  transform: translateY(-50%);
+  border-radius: 6px;
+}
+.nav-tree-item:hover::before {
+  background: hsla(from var(--primary) h s l / 0.28);
+}
+
+/* Subtle hover — reduced glow to keep elegance */
+.nav-tree-item:hover {
+  box-shadow: 0 0 0 2px rgba(220, 102, 62, 0.06);
+}
+
+/* Children connector (secondary vertical line for nested items) */
+.nav-tree-children {
+  position: relative;
+}
+.nav-tree-children::before {
+  content: "";
+  position: absolute;
+  left: calc(var(--tree-offset) + 0.65rem);
+  top: 4px;
+  bottom: 4px;
+  width: var(--tree-stroke);
+  background: hsla(from var(--primary) h s l / 0.14);
+  border-radius: 6px;
+}
+
+/* ============================================================
+   Ad Banner — Themed Container
+   The AdSense <ins> iframe always renders white internally;
+   we can't reach inside it. What we CAN do is style the
+   wrapping container so it blends with each theme gracefully.
+   ============================================================ */
+.ad-container {
+  background-color: var(--background);
+  border: 1px solid var(--border);
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.dark .ad-container {
+  /* #404040 — close enough to the dark page bg to soften the white iframe */
+  background-color: var(--muted);
+  border-color: var(--border);
+  /* Subtle inner shadow to visually "frame" the white ad block */
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+/* Placeholder shimmer while the ad is loading */
+.ad-container:empty::after,
+.ad-container .adsbygoogle:not([data-adsbygoogle-status])::after {
+  content: "";
+  display: block;
+  width: 100%;
+  min-height: 90px;
+  border-radius: 0.375rem;
+  background: linear-gradient(
+    90deg,
+    var(--muted) 25%,
+    var(--border) 50%,
+    var(--muted) 75%
+  );
+  background-size: 200% 100%;
+  animation: adShimmer 1.6s ease-in-out infinite;
+}
+
+@keyframes adShimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+