@import "tailwindcss"; @plugin "@tailwindcss/typography"; @import "tw-animate-css"; @import "vazirmatn/Vazirmatn-font-face.css"; @custom-variant dark (&:is(.dark *)); /* Custom breakpoints for desktop design (matching code.html reference) */ @theme { /* Desktop breakpoints: 1024px (min), 1440px (large), 1920px (ultra-wide) */ --breakpoint-desktop: 1024px; --breakpoint-large-desktop: 1440px; --breakpoint-ultra-wide: 1920px; /* Memento — Architectural Grid (réf. architectural-grid1) */ --color-memento-desk: #E5E2D9; --color-memento-paper: #F2F0E9; --color-memento-sidebar: #F6F4F0; --color-memento-ink: #1C1C1C; --color-primary: #ACB995; --color-memento-accent: #D4A373; --color-memento-blue: #A47148; --color-brand-accent: #A47148; --color-memento-paper-elevated: #faf9f5; --color-background-light: var(--color-memento-paper); --color-background-dark: #202020; /* Design tokens from architectural-grid 10 */ --color-ink: var(--ink); --color-paper: var(--paper); --color-muted-ink: var(--muted-ink); --color-concrete: var(--concrete); --color-blueprint: #A47148; --color-ochre: #D4A373; --color-sage: #A3B18A; --color-rust: #9B2226; --color-glass: rgba(255, 255, 255, 0.4); --font-sans: var(--font-inter); --font-heading: var(--font-memento-serif), ui-serif, Georgia, "Times New Roman", serif; --shadow-level-1: 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06); --shadow-level-2: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.08); --shadow-level-3: 0 4px 8px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 0, 0, 0.12); --shadow-acrylic: 0 8px 32px rgba(0, 0, 0, 0.08); --shadow-card-rest: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.06); --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Font family overrides — toggled on by ThemeInitializer */ .font-system { --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .font-playfair { --font-sans: var(--font-memento-serif), ui-serif, Georgia, 'Times New Roman', serif; } .font-jetbrains { --font-sans: var(--font-jetbrains-mono), 'JetBrains Mono', ui-monospace, monospace; } /* Custom scrollbar for better aesthetics - Architectural Minimalist */ ::-webkit-scrollbar { width: 3px; height: 3px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(28, 28, 28, 0.05); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(28, 28, 28, 0.15); } .dark ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); } .dark ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); } /* Win11 Acrylic / Mica blur utilities */ @utility acrylic { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); } @utility font-memento-serif { font-family: var(--font-memento-serif), ui-serif, Georgia, "Times New Roman", serif; } @utility editor-body { font-size: var(--editor-body-size, 16px); } /* Architectural Grid — texture & navigation (réf. architectural-grid1) */ .memento-paper-texture { background-color: var(--background); } html.dark .memento-paper-texture { background-color: var(--background); } html:not(.dark) .memento-active-nav { background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.5); } .custom-scrollbar::-webkit-scrollbar { width: 3px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(28, 28, 28, 0.08); border-radius: 10px; } .custom-scrollbar:hover::-webkit-scrollbar-thumb { background: rgba(28, 28, 28, 0.2); } .sidebar-shadow { box-shadow: 1px 0 10px rgba(0, 0, 0, 0.05); } /* ────────────────────────────────────────────── ARCHITECTURAL GRID — Design Tokens Aliases Compatible with shadcn token system ────────────────────────────────────────────── */ /* CSS aliases: ink = foreground, paper = background */ :root { --ink: var(--foreground); --paper: var(--background); --muted-ink: var(--muted-foreground); --concrete: #8D8D8D; --ai-accent: #ACB995; } /* Inbox section separator */ .sidebar-inbox-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 12px; transition: all 200ms; width: 100%; text-align: left; } .sidebar-inbox-item:hover { background: rgba(255, 255, 255, 0.4); } .sidebar-inbox-item.active { background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border: 1px solid rgba(255, 255, 255, 0.5); } html.dark .sidebar-inbox-item:hover { background: rgba(255, 255, 255, 0.06); } html.dark .sidebar-inbox-item.active { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12); } /* Note date in editorial view */ .note-date-badge { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; color: var(--muted-foreground); opacity: 0.7; } .note-date-badge.note-date-badge--locale-rtl { text-transform: none; letter-spacing: 0.08em; unicode-bidi: isolate; } /* Dark mode active nav */ html.dark .memento-active-nav { background: rgba(255, 255, 255, 0.09); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); } /* Custom Prose overrides for compact notes */ @utility prose-compact { & :where(h1, h2, h3, h4) { margin-top: 0.5rem; margin-bottom: 0.25rem; } & :where(p, ul, ol, li) { margin-top: 0.25rem; margin-bottom: 0.25rem; } } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-inter); --font-mono: var(--font-jetbrains-mono), 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, Consolas, monospace; --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --radius-2xl: calc(var(--radius) + 8px); --radius-3xl: calc(var(--radius) + 12px); --radius-4xl: calc(var(--radius) + 16px); } :root { --radius: 0.5rem; --memento-desk: #E5E2D9; --background: #F2F0E9; --foreground: #212529; --card: #ffffff; --card-foreground: #212529; --popover: #ffffff; --popover-foreground: #212529; --primary: #ACB995; --primary-foreground: #F9F8F6; --secondary: #E9ECEF; --secondary-foreground: #212529; --muted: #F1F3F5; --muted-foreground: rgba(33, 37, 41, 0.6); --accent: #F8F9FA; --accent-foreground: #212529; --destructive: #E11D48; --border: rgba(0, 0, 0, 0.08); --input: rgba(0, 0, 0, 0.08); --ring: rgba(33, 37, 41, 0.3); --ai-accent: #ACB995; --pinned-gold: #F59E0B; --sage-green: #10B981; --sidebar: #F6F4F0; --sidebar-foreground: #212529; --sidebar-primary: #212529; --sidebar-primary-foreground: #F9F8F6; --sidebar-accent: #F9F8F6; --sidebar-accent-foreground: #212529; --sidebar-border: rgba(0, 0, 0, 0.05); --sidebar-ring: rgba(33, 37, 41, 0.2); } html:not(.dark) { --memento-sidebar-glow: color-mix(in oklab, #ffffff 72%, #F2F0E9 28%); } html.dark { --memento-sidebar-glow: color-mix(in oklab, var(--primary) 22%, transparent); } [data-theme='light'] { --memento-desk: #E5E2D9; --background: #F2F0E9; --foreground: #1C1C1C; --card: #faf9f5; --card-foreground: #1C1C1C; --popover: #faf9f5; --popover-foreground: #1C1C1C; --primary: #ACB995; --primary-foreground: #F2F0E9; --secondary: #e8e6df; --secondary-foreground: #1C1C1C; --muted: #e3e1d8; --muted-foreground: rgba(28, 28, 28, 0.58); --accent: #ebe9e2; --accent-foreground: #1C1C1C; --destructive: #c42b1c; --border: rgba(28, 28, 28, 0.1); --input: rgba(28, 28, 28, 0.12); --ring: rgba(28, 28, 28, 0.35); --sidebar: #F6F4F0; --sidebar-foreground: #1C1C1C; --sidebar-primary: #1C1C1C; --sidebar-primary-foreground: #F2F0E9; --sidebar-accent: rgba(255, 255, 255, 0.45); --sidebar-accent-foreground: #1C1C1C; --sidebar-border: rgba(28, 28, 28, 0.1); --sidebar-ring: rgba(28, 28, 28, 0.35); --thumb-lightness-1: 94%; --thumb-lightness-2: 87%; } [data-theme='light'].dark { --background: oklch(0.16 0.006 75); --foreground: oklch(0.96 0.004 85); --card: oklch(0.2 0.008 75); --card-foreground: oklch(0.96 0.004 85); --popover: oklch(0.2 0.008 75); --popover-foreground: oklch(0.96 0.004 85); --primary: oklch(0.78 0.03 75); --primary-foreground: oklch(0.18 0.02 60); --secondary: oklch(0.26 0.008 75); --secondary-foreground: oklch(0.96 0.004 85); --muted: oklch(0.24 0.008 75); --muted-foreground: oklch(0.62 0.012 75); --accent: oklch(0.28 0.01 75); --accent-foreground: oklch(0.96 0.004 85); --destructive: oklch(0.65 0.18 25); --border: oklch(0.33 0.012 75); --input: oklch(0.33 0.012 75); --ring: oklch(0.58 0.02 75); --sidebar: oklch(0.14 0.006 75); --sidebar-foreground: oklch(0.96 0.004 85); --sidebar-primary: oklch(0.78 0.03 75); --sidebar-primary-foreground: oklch(0.18 0.02 60); --sidebar-accent: oklch(0.26 0.01 75); --sidebar-accent-foreground: oklch(0.96 0.004 85); --sidebar-border: oklch(0.3 0.012 75); --sidebar-ring: oklch(0.58 0.02 75); } .dark { --background: #202020; --foreground: #ffffff; --card: #2d2d2d; --card-foreground: #ffffff; --popover: #2d2d2d; --popover-foreground: #ffffff; --primary: #d6d3d1; --primary-foreground: #1c1917; --secondary: #2d2d2d; --secondary-foreground: #ffffff; --muted: #2d2d2d; --muted-foreground: #a8a8a8; --accent: #383838; --accent-foreground: #ffffff; --destructive: #ff6b6b; --border: #3d3d3d; --input: #3d3d3d; --ring: #a8a29e; --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: #252525; --sidebar-foreground: #ffffff; --sidebar-primary: #d6d3d1; --sidebar-primary-foreground: #1c1917; --sidebar-accent: #383838; --sidebar-accent-foreground: #ffffff; --sidebar-border: #3d3d3d; --sidebar-ring: #a8a29e; --thumb-lightness-1: 15%; --thumb-lightness-2: 10%; --concrete: #A0A0A0; } [data-theme='midnight'] { --background: #F8F9FA; --foreground: #212529; --card: #ffffff; --card-foreground: #212529; --primary: #ACB995; --primary-foreground: #F8F9FA; --secondary: #E9ECEF; --secondary-foreground: #212529; --muted: #F1F3F5; --muted-foreground: rgba(33, 37, 41, 0.6); --accent: #F8F9FA; --accent-foreground: #212529; --destructive: #E11D48; --border: rgba(0, 0, 0, 0.08); --input: rgba(0, 0, 0, 0.08); --ring: rgba(33, 37, 41, 0.3); --popover: #ffffff; --popover-foreground: #212529; --sidebar: #ffffff; --sidebar-foreground: #212529; --sidebar-primary: #212529; --sidebar-primary-foreground: #F8F9FA; --sidebar-accent: #F8F9FA; --sidebar-accent-foreground: #212529; --sidebar-border: rgba(0, 0, 0, 0.05); --sidebar-ring: rgba(33, 37, 41, 0.2); } [data-theme='midnight'].dark { --background: #1C1C1C; --foreground: #F8F9FA; --card: #252525; --card-foreground: #F8F9FA; --primary: #ACB995; --primary-foreground: #1C1C1C; --secondary: #2A2A2A; --secondary-foreground: #F8F9FA; --muted: #222222; --muted-foreground: rgba(248, 249, 250, 0.5); --accent: #2A2A2A; --accent-foreground: #F8F9FA; --destructive: #E11D48; --border: rgba(255, 255, 255, 0.1); --input: rgba(255, 255, 255, 0.1); --ring: rgba(255, 255, 255, 0.2); --popover: #252525; --popover-foreground: #F8F9FA; --sidebar: #181818; --sidebar-foreground: #F8F9FA; --sidebar-primary: #F8F9FA; --sidebar-primary-foreground: #1C1C1C; --sidebar-accent: #2A2A2A; --sidebar-accent-foreground: #F8F9FA; --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-ring: rgba(255, 255, 255, 0.15); } [data-theme='blue'] { --background: #F8F9FA; --foreground: #212529; --card: #ffffff; --card-foreground: #212529; --primary: #ACB995; --primary-foreground: #F8F9FA; --secondary: #E9ECEF; --secondary-foreground: #212529; --muted: #F1F3F5; --muted-foreground: rgba(33, 37, 41, 0.6); --accent: #F8F9FA; --accent-foreground: #212529; --destructive: #E11D48; --border: rgba(0, 0, 0, 0.08); --input: rgba(0, 0, 0, 0.08); --ring: rgba(33, 37, 41, 0.3); --popover: #ffffff; --popover-foreground: #212529; --sidebar: #ffffff; --sidebar-foreground: #212529; --sidebar-primary: #212529; --sidebar-primary-foreground: #F8F9FA; --sidebar-accent: #F8F9FA; --sidebar-accent-foreground: #212529; --sidebar-border: rgba(0, 0, 0, 0.05); --sidebar-ring: rgba(33, 37, 41, 0.2); } [data-theme='blue'].dark { --background: #1C1C1C; --foreground: #F8F9FA; --card: #252525; --card-foreground: #F8F9FA; --primary: #ACB995; --primary-foreground: #1C1C1C; --secondary: #2A2A2A; --secondary-foreground: #F8F9FA; --muted: #222222; --muted-foreground: rgba(248, 249, 250, 0.5); --accent: #2A2A2A; --accent-foreground: #F8F9FA; --destructive: #E11D48; --border: rgba(255, 255, 255, 0.1); --input: rgba(255, 255, 255, 0.1); --ring: rgba(255, 255, 255, 0.2); --popover: #252525; --popover-foreground: #F8F9FA; --sidebar: #181818; --sidebar-foreground: #F8F9FA; --sidebar-primary: #F8F9FA; --sidebar-primary-foreground: #1C1C1C; --sidebar-accent: #2A2A2A; --sidebar-accent-foreground: #F8F9FA; --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-ring: rgba(255, 255, 255, 0.15); } [data-theme='ocean'] { --background: #F8F9FA; --foreground: #212529; --card: #ffffff; --card-foreground: #212529; --primary: #ACB995; --primary-foreground: #F8F9FA; --secondary: #E9ECEF; --secondary-foreground: #212529; --muted: #F1F3F5; --muted-foreground: rgba(33, 37, 41, 0.6); --accent: #F8F9FA; --accent-foreground: #212529; --destructive: #E11D48; --border: rgba(0, 0, 0, 0.08); --input: rgba(0, 0, 0, 0.08); --ring: rgba(33, 37, 41, 0.3); --popover: #ffffff; --popover-foreground: #212529; --sidebar: #ffffff; --sidebar-foreground: #212529; --sidebar-primary: #212529; --sidebar-primary-foreground: #F8F9FA; --sidebar-accent: #F8F9FA; --sidebar-accent-foreground: #212529; --sidebar-border: rgba(0, 0, 0, 0.05); --sidebar-ring: rgba(33, 37, 41, 0.2); } [data-theme='ocean'].dark { --background: #1C1C1C; --foreground: #F8F9FA; --card: #252525; --card-foreground: #F8F9FA; --primary: #ACB995; --primary-foreground: #1C1C1C; --secondary: #2A2A2A; --secondary-foreground: #F8F9FA; --muted: #222222; --muted-foreground: rgba(248, 249, 250, 0.5); --accent: #2A2A2A; --accent-foreground: #F8F9FA; --destructive: #E11D48; --border: rgba(255, 255, 255, 0.1); --input: rgba(255, 255, 255, 0.1); --ring: rgba(255, 255, 255, 0.2); --popover: #252525; --popover-foreground: #F8F9FA; --sidebar: #181818; --sidebar-foreground: #F8F9FA; --sidebar-primary: #F8F9FA; --sidebar-primary-foreground: #1C1C1C; --sidebar-accent: #2A2A2A; --sidebar-accent-foreground: #F8F9FA; --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-ring: rgba(255, 255, 255, 0.15); } [data-theme='sepia'] { --background: oklch(0.985 0.004 45); /* Blanc légèrement doré */ --foreground: oklch(0.2 0.015 45); /* Gris-brun foncé */ --card: oklch(1 0 0); /* Blanc pur */ --card-foreground: oklch(0.2 0.015 45); --primary: oklch(0.45 0.08 45); /* Gris-brun chaud */ --primary-foreground: oklch(0.99 0 0); /* Blanc */ --secondary: oklch(0.94 0.008 45); --secondary-foreground: oklch(0.2 0.015 45); --muted: oklch(0.91 0.01 45); --muted-foreground: oklch(0.6 0.012 45); --accent: oklch(0.93 0.01 45); --accent-foreground: oklch(0.2 0.015 45); --destructive: oklch(0.6 0.2 25); --border: oklch(0.83 0.012 45); --input: oklch(0.83 0.012 45); --ring: oklch(0.68 0.01 45); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2 0.015 45); --sidebar: oklch(0.96 0.01 45); --sidebar-foreground: oklch(0.2 0.015 45); --sidebar-primary: oklch(0.45 0.08 45); --sidebar-primary-foreground: oklch(0.99 0 0); --sidebar-accent: oklch(0.93 0.01 45); --sidebar-accent-foreground: oklch(0.2 0.015 45); --sidebar-border: oklch(0.88 0.012 45); --sidebar-ring: oklch(0.68 0.01 45); } [data-theme='sepia'].dark { --background: oklch(0.15 0.008 45); /* Noir légèrement bruni */ --foreground: oklch(0.97 0.005 45); /* Blanc légèrement bruni */ --card: oklch(0.19 0.01 45); /* Gris-brun foncé */ --card-foreground: oklch(0.97 0.005 45); --primary: oklch(0.55 0.08 45); /* Gris-brun plus clair */ --primary-foreground: oklch(0.1 0 0); /* Noir */ --secondary: oklch(0.25 0.015 45); --secondary-foreground: oklch(0.97 0.005 45); --muted: oklch(0.23 0.02 45); --muted-foreground: oklch(0.55 0.012 45); --accent: oklch(0.29 0.018 45); --accent-foreground: oklch(0.97 0.005 45); --destructive: oklch(0.65 0.2 25); --border: oklch(0.33 0.018 45); --input: oklch(0.33 0.018 45); --ring: oklch(0.58 0.02 45); --popover: oklch(0.19 0.01 45); --popover-foreground: oklch(0.97 0.005 45); --sidebar: oklch(0.12 0.01 45); --sidebar-foreground: oklch(0.97 0.005 45); --sidebar-primary: oklch(0.55 0.08 45); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.27 0.018 45); --sidebar-accent-foreground: oklch(0.97 0.005 45); --sidebar-border: oklch(0.3 0.018 45); --sidebar-ring: oklch(0.58 0.02 45); } /* ────────────────────────────────────────────── PASTEL THEMES — 6 additional color themes ────────────────────────────────────────────── */ /* Rose — soft pink tones */ [data-theme='rose'] { --background: oklch(0.97 0.01 350); --foreground: oklch(0.22 0.02 350); --card: oklch(0.99 0.005 350); --card-foreground: oklch(0.22 0.02 350); --popover: oklch(0.99 0.005 350); --popover-foreground: oklch(0.22 0.02 350); --primary: oklch(0.55 0.15 350); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.93 0.02 350); --secondary-foreground: oklch(0.22 0.02 350); --muted: oklch(0.92 0.015 350); --muted-foreground: oklch(0.55 0.015 350); --accent: oklch(0.92 0.02 350); --accent-foreground: oklch(0.22 0.02 350); --destructive: oklch(0.6 0.18 25); --border: oklch(0.85 0.02 350); --input: oklch(0.85 0.02 350); --ring: oklch(0.55 0.15 350); --sidebar: oklch(0.95 0.015 350); --sidebar-foreground: oklch(0.22 0.02 350); --sidebar-primary: oklch(0.55 0.15 350); --sidebar-primary-foreground: oklch(0.99 0 0); --sidebar-accent: oklch(0.92 0.02 350); --sidebar-accent-foreground: oklch(0.22 0.02 350); --sidebar-border: oklch(0.88 0.02 350); --sidebar-ring: oklch(0.6 0.015 350); } [data-theme='rose'].dark { --background: oklch(0.14 0.01 350); --foreground: oklch(0.95 0.01 350); --card: oklch(0.18 0.015 350); --card-foreground: oklch(0.95 0.01 350); --popover: oklch(0.18 0.015 350); --popover-foreground: oklch(0.95 0.01 350); --primary: oklch(0.6 0.12 350); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.24 0.02 350); --secondary-foreground: oklch(0.95 0.01 350); --muted: oklch(0.22 0.015 350); --muted-foreground: oklch(0.55 0.02 350); --accent: oklch(0.26 0.025 350); --accent-foreground: oklch(0.95 0.01 350); --destructive: oklch(0.65 0.18 25); --border: oklch(0.33 0.02 350); --input: oklch(0.33 0.02 350); --ring: oklch(0.6 0.02 350); --sidebar: oklch(0.12 0.01 350); --sidebar-foreground: oklch(0.95 0.01 350); --sidebar-primary: oklch(0.6 0.12 350); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.26 0.025 350); --sidebar-accent-foreground: oklch(0.95 0.01 350); --sidebar-border: oklch(0.33 0.02 350); --sidebar-ring: oklch(0.6 0.02 350); } /* Green — soft sage/mint tones */ [data-theme='green'] { --background: oklch(0.97 0.01 155); --foreground: oklch(0.22 0.03 155); --card: oklch(0.99 0.005 155); --card-foreground: oklch(0.22 0.03 155); --popover: oklch(0.99 0.005 155); --popover-foreground: oklch(0.22 0.03 155); --primary: oklch(0.5 0.12 155); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.93 0.02 155); --secondary-foreground: oklch(0.22 0.03 155); --muted: oklch(0.92 0.015 155); --muted-foreground: oklch(0.55 0.02 155); --accent: oklch(0.92 0.02 155); --accent-foreground: oklch(0.22 0.03 155); --destructive: oklch(0.6 0.18 25); --border: oklch(0.85 0.02 155); --input: oklch(0.85 0.02 155); --ring: oklch(0.5 0.12 155); --sidebar: oklch(0.95 0.015 155); --sidebar-foreground: oklch(0.22 0.03 155); --sidebar-primary: oklch(0.5 0.12 155); --sidebar-primary-foreground: oklch(0.99 0 0); --sidebar-accent: oklch(0.92 0.02 155); --sidebar-accent-foreground: oklch(0.22 0.03 155); --sidebar-border: oklch(0.88 0.02 155); --sidebar-ring: oklch(0.6 0.015 155); } [data-theme='green'].dark { --background: oklch(0.14 0.01 155); --foreground: oklch(0.95 0.01 155); --card: oklch(0.18 0.015 155); --card-foreground: oklch(0.95 0.01 155); --popover: oklch(0.18 0.015 155); --popover-foreground: oklch(0.95 0.01 155); --primary: oklch(0.6 0.1 155); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.24 0.02 155); --secondary-foreground: oklch(0.95 0.01 155); --muted: oklch(0.22 0.015 155); --muted-foreground: oklch(0.55 0.02 155); --accent: oklch(0.26 0.02 155); --accent-foreground: oklch(0.95 0.01 155); --destructive: oklch(0.65 0.18 25); --border: oklch(0.33 0.02 155); --input: oklch(0.33 0.02 155); --ring: oklch(0.6 0.02 155); --sidebar: oklch(0.12 0.01 155); --sidebar-foreground: oklch(0.95 0.01 155); --sidebar-primary: oklch(0.6 0.1 155); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.26 0.02 155); --sidebar-accent-foreground: oklch(0.95 0.01 155); --sidebar-border: oklch(0.33 0.02 155); --sidebar-ring: oklch(0.6 0.02 155); } /* Lavender — soft purple tones */ [data-theme='lavender'] { --background: oklch(0.97 0.01 290); --foreground: oklch(0.22 0.02 290); --card: oklch(0.99 0.005 290); --card-foreground: oklch(0.22 0.02 290); --popover: oklch(0.99 0.005 290); --popover-foreground: oklch(0.22 0.02 290); --primary: oklch(0.52 0.14 290); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.93 0.02 290); --secondary-foreground: oklch(0.22 0.02 290); --muted: oklch(0.92 0.015 290); --muted-foreground: oklch(0.55 0.02 290); --accent: oklch(0.92 0.02 290); --accent-foreground: oklch(0.22 0.02 290); --destructive: oklch(0.6 0.18 25); --border: oklch(0.85 0.02 290); --input: oklch(0.85 0.02 290); --ring: oklch(0.52 0.14 290); --sidebar: oklch(0.95 0.015 290); --sidebar-foreground: oklch(0.22 0.02 290); --sidebar-primary: oklch(0.52 0.14 290); --sidebar-primary-foreground: oklch(0.99 0 0); --sidebar-accent: oklch(0.92 0.02 290); --sidebar-accent-foreground: oklch(0.22 0.02 290); --sidebar-border: oklch(0.88 0.02 290); --sidebar-ring: oklch(0.6 0.015 290); } [data-theme='lavender'].dark { --background: oklch(0.14 0.01 290); --foreground: oklch(0.95 0.01 290); --card: oklch(0.18 0.015 290); --card-foreground: oklch(0.95 0.01 290); --popover: oklch(0.18 0.015 290); --popover-foreground: oklch(0.95 0.01 290); --primary: oklch(0.6 0.12 290); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.24 0.02 290); --secondary-foreground: oklch(0.95 0.01 290); --muted: oklch(0.22 0.015 290); --muted-foreground: oklch(0.55 0.02 290); --accent: oklch(0.26 0.025 290); --accent-foreground: oklch(0.95 0.01 290); --destructive: oklch(0.65 0.18 25); --border: oklch(0.33 0.02 290); --input: oklch(0.33 0.02 290); --ring: oklch(0.6 0.02 290); --sidebar: oklch(0.12 0.01 290); --sidebar-foreground: oklch(0.95 0.01 290); --sidebar-primary: oklch(0.6 0.12 290); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.26 0.025 290); --sidebar-accent-foreground: oklch(0.95 0.01 290); --sidebar-border: oklch(0.33 0.02 290); --sidebar-ring: oklch(0.6 0.02 290); } /* Sand — warm beige/cream tones */ [data-theme='sand'] { --background: oklch(0.97 0.01 70); --foreground: oklch(0.25 0.02 60); --card: oklch(0.99 0.005 70); --card-foreground: oklch(0.25 0.02 60); --popover: oklch(0.99 0.005 70); --popover-foreground: oklch(0.25 0.02 60); --primary: oklch(0.5 0.1 55); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.93 0.015 70); --secondary-foreground: oklch(0.25 0.02 60); --muted: oklch(0.92 0.012 70); --muted-foreground: oklch(0.55 0.015 60); --accent: oklch(0.92 0.015 70); --accent-foreground: oklch(0.25 0.02 60); --destructive: oklch(0.6 0.18 25); --border: oklch(0.85 0.015 70); --input: oklch(0.85 0.015 70); --ring: oklch(0.5 0.1 55); --sidebar: oklch(0.95 0.012 70); --sidebar-foreground: oklch(0.25 0.02 60); --sidebar-primary: oklch(0.5 0.1 55); --sidebar-primary-foreground: oklch(0.99 0 0); --sidebar-accent: oklch(0.92 0.015 70); --sidebar-accent-foreground: oklch(0.25 0.02 60); --sidebar-border: oklch(0.88 0.015 70); --sidebar-ring: oklch(0.6 0.015 60); } [data-theme='sand'].dark { --background: oklch(0.15 0.01 60); --foreground: oklch(0.95 0.01 60); --card: oklch(0.19 0.015 60); --card-foreground: oklch(0.95 0.01 60); --popover: oklch(0.19 0.015 60); --popover-foreground: oklch(0.95 0.01 60); --primary: oklch(0.6 0.1 55); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.24 0.015 60); --secondary-foreground: oklch(0.95 0.01 60); --muted: oklch(0.22 0.012 60); --muted-foreground: oklch(0.55 0.02 60); --accent: oklch(0.26 0.02 60); --accent-foreground: oklch(0.95 0.01 60); --destructive: oklch(0.65 0.18 25); --border: oklch(0.33 0.015 60); --input: oklch(0.33 0.015 60); --ring: oklch(0.6 0.02 55); --sidebar: oklch(0.12 0.01 60); --sidebar-foreground: oklch(0.95 0.01 60); --sidebar-primary: oklch(0.6 0.1 55); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.26 0.02 60); --sidebar-accent-foreground: oklch(0.95 0.01 60); --sidebar-border: oklch(0.33 0.015 60); --sidebar-ring: oklch(0.6 0.02 55); } /* Sunset — warm coral/peach tones */ [data-theme='sunset'] { --background: oklch(0.97 0.012 40); --foreground: oklch(0.22 0.03 35); --card: oklch(0.99 0.005 40); --card-foreground: oklch(0.22 0.03 35); --popover: oklch(0.99 0.005 40); --popover-foreground: oklch(0.22 0.03 35); --primary: oklch(0.55 0.15 30); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.93 0.02 40); --secondary-foreground: oklch(0.22 0.03 35); --muted: oklch(0.92 0.015 40); --muted-foreground: oklch(0.55 0.02 35); --accent: oklch(0.92 0.02 40); --accent-foreground: oklch(0.22 0.03 35); --destructive: oklch(0.6 0.18 25); --border: oklch(0.85 0.02 40); --input: oklch(0.85 0.02 40); --ring: oklch(0.55 0.15 30); --sidebar: oklch(0.95 0.015 40); --sidebar-foreground: oklch(0.22 0.03 35); --sidebar-primary: oklch(0.55 0.15 30); --sidebar-primary-foreground: oklch(0.99 0 0); --sidebar-accent: oklch(0.92 0.02 40); --sidebar-accent-foreground: oklch(0.22 0.03 35); --sidebar-border: oklch(0.88 0.02 40); --sidebar-ring: oklch(0.6 0.02 35); } [data-theme='sunset'].dark { --background: oklch(0.15 0.012 35); --foreground: oklch(0.95 0.01 35); --card: oklch(0.19 0.015 35); --card-foreground: oklch(0.95 0.01 35); --popover: oklch(0.19 0.015 35); --popover-foreground: oklch(0.95 0.01 35); --primary: oklch(0.6 0.12 30); --primary-foreground: oklch(0.1 0 0); --secondary: oklch(0.24 0.02 35); --secondary-foreground: oklch(0.95 0.01 35); --muted: oklch(0.22 0.015 35); --muted-foreground: oklch(0.55 0.02 35); --accent: oklch(0.26 0.025 35); --accent-foreground: oklch(0.95 0.01 35); --destructive: oklch(0.65 0.18 25); --border: oklch(0.33 0.02 35); --input: oklch(0.33 0.02 35); --ring: oklch(0.6 0.02 30); --sidebar: oklch(0.12 0.01 35); --sidebar-foreground: oklch(0.95 0.01 35); --sidebar-primary: oklch(0.6 0.12 30); --sidebar-primary-foreground: oklch(0.1 0 0); --sidebar-accent: oklch(0.26 0.025 35); --sidebar-accent-foreground: oklch(0.95 0.01 35); --sidebar-border: oklch(0.33 0.02 35); --sidebar-ring: oklch(0.6 0.02 30); } /* System font mode — override Inter with native OS fonts. Must be outside @layer base to win over next/font's generated class. */ html.font-system { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; } html.font-system body, html.font-system * { font-family: inherit !important; } @layer base { * { @apply border-border outline-ring/50; } /* Set base font size on html element - this affects all rem units */ html { font-size: var(--user-font-size, 16px); } /* Editor body size — used for textarea and ProseMirror content */ :root { --editor-body-size: var(--user-font-size, 16px); } body { @apply text-foreground; background-color: var(--memento-desk); } html.dark body { background-color: var(--background); } /* Latin languages use default (inherits from html) */ [lang='en'] body, [lang='fr'] body { font-size: 1rem; /* Uses html font size */ } /* Persian/Farsi font with larger size for better readability */ [lang='fa'] body { font-family: 'Vazirmatn', var(--font-sans), sans-serif !important; /* Base 110% for Persian = 1.1rem */ font-size: calc(1.1rem * var(--user-font-size-factor, 1)); } /* Ensure Persian text uses Vazirmatn even in nested elements */ [lang='fa'] * { font-family: 'Vazirmatn', sans-serif !important; } } /* ============================================ Toast Notifications - Fix UI Blocking Issue ============================================ */ /* Ensure the toaster container doesn't block clicks on the page underneath */ [data-sonner-toaster] { pointer-events: none !important; } /* Ensure all children of toaster don't block except the toast itself */ [data-sonner-toaster]>* { pointer-events: none !important; } /* But allow interaction with the toast itself (buttons, close, etc) */ [data-sonner-toast] { pointer-events: auto !important; } /* Also ensure any overlay or background doesn't block */ [data-sonner-toaster]::before, [data-sonner-toaster]::after { pointer-events: none !important; } /* Force URLs/links to render LTR even in RTL mode */ [dir="rtl"] .prose a { direction: ltr; unicode-bidi: embed; display: inline-block; } /* ============================================ Notion-like Rich Text Editor (TipTap) ============================================ */ /* --- Editor Wrapper --- */ .notion-editor-wrapper { position: relative; } /* --- ProseMirror Base --- */ .notion-editor-wrapper .ProseMirror { outline: none; min-height: 120px; padding: 4px 0; font-size: 0.9375rem; line-height: 1.7; caret-color: var(--primary); } .notion-editor-wrapper .ProseMirror>*:first-child { margin-top: 0; } /* Placeholder */ .notion-editor-wrapper .ProseMirror p.is-editor-empty:first-child::before, .notion-editor-wrapper .ProseMirror p.is-empty::before { content: attr(data-placeholder); float: inline-start; color: var(--muted-foreground); pointer-events: none; height: 0; opacity: 0.4; font-style: italic; } /* --- Paragraphs --- */ .notion-editor-wrapper .ProseMirror p { margin: 0.2em 0; } /* --- Headings (Notion style — clean, sans-serif) --- */ .notion-editor-wrapper .ProseMirror h1 { font-size: 1.75rem; font-weight: 700; margin: 1.2em 0 0.2em; line-height: 1.25; letter-spacing: -0.02em; } .notion-editor-wrapper .ProseMirror h2 { font-size: 1.375rem; font-weight: 600; margin: 1em 0 0.15em; line-height: 1.3; letter-spacing: -0.01em; } .notion-editor-wrapper .ProseMirror h3 { font-size: 1.125rem; font-weight: 600; margin: 0.8em 0 0.1em; line-height: 1.35; } /* --- Lists --- */ .notion-editor-wrapper .ProseMirror ul { list-style-type: disc; padding-inline-start: 1.5rem; margin: 0.25em 0; } .notion-editor-wrapper .ProseMirror ol { list-style-type: decimal; padding-inline-start: 1.5rem; margin: 0.25em 0; } .notion-editor-wrapper .ProseMirror li>p { margin: 0.1em 0; } .notion-editor-wrapper .ProseMirror li>ul, .notion-editor-wrapper .ProseMirror li>ol { margin: 0.1em 0; } /* --- Task / Todo List --- */ .notion-editor-wrapper .ProseMirror ul[data-type="taskList"] { list-style: none; padding-inline-start: 0; } .notion-editor-wrapper .ProseMirror ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 0.4rem; margin: 0.2em 0; } .notion-editor-wrapper .ProseMirror ul[data-type="taskList"] li>label { display: flex; align-items: center; cursor: pointer; margin-top: 2px; } .notion-editor-wrapper .ProseMirror ul[data-type="taskList"] li>label input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border: 2px solid var(--border); border-radius: 4px; cursor: pointer; display: grid; place-content: center; transition: all 0.15s ease; background: transparent; flex-shrink: 0; } .notion-editor-wrapper .ProseMirror ul[data-type="taskList"] li>label input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary); } .notion-editor-wrapper .ProseMirror ul[data-type="taskList"] li>label input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em white; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .notion-editor-wrapper .ProseMirror ul[data-type="taskList"] li>label input[type="checkbox"]:checked::before { transform: scale(1); } .notion-editor-wrapper .ProseMirror ul[data-type="taskList"] li[data-checked="true"]>div>p { color: var(--muted-foreground); text-decoration: line-through; } /* --- Blockquote --- */ .notion-editor-wrapper .ProseMirror blockquote { border-inline-start: 3px solid var(--primary); padding-block: 0.25em; padding-inline-start: 1em; padding-inline-end: 0; margin: 0.4em 0; color: var(--muted-foreground); font-style: italic; background: oklch(0.5 0 0 / 0.03); border-start-end-radius: 4px; border-end-end-radius: 4px; } /* --- Code --- */ .notion-editor-wrapper .ProseMirror code { background: var(--muted); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.85em; font-family: var(--font-mono, ui-monospace, monospace); color: var(--foreground); } .notion-editor-wrapper .ProseMirror pre { background: var(--muted); border-radius: 8px; padding: 0.85rem 1rem; margin: 0.5em 0; overflow-x: auto; border: 1px solid var(--border); } .notion-editor-wrapper .ProseMirror pre code { background: none; padding: 0; border-radius: 0; font-size: 0.8125rem; line-height: 1.6; } /* --- Horizontal Rule --- */ .notion-editor-wrapper .ProseMirror hr { border: none; border-top: 1px solid var(--border); margin: 0.75em 0; } /* --- Strong / Marks --- */ .notion-editor-wrapper .ProseMirror strong { font-weight: 600; } /* --- Images --- */ .notion-editor-wrapper .ProseMirror img { border-radius: 8px; max-width: 100%; height: auto; display: block; margin: 0.5em 0; transition: filter 0.15s ease; } .notion-editor-wrapper .ProseMirror img:hover { filter: brightness(95%); } .notion-editor-wrapper .ProseMirror img.ProseMirror-selectednode { outline: 2px solid var(--primary); outline-offset: 2px; } /* --- Links --- */ .notion-editor-wrapper .ProseMirror a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .notion-editor-wrapper .ProseMirror a:hover { opacity: 0.8; } /* --- Highlight --- */ .notion-editor-wrapper .ProseMirror mark { background: oklch(0.85 0.12 90); border-radius: 2px; padding: 0 1px; } .dark .notion-editor-wrapper .ProseMirror mark { background: oklch(0.4 0.1 90); } /* --- Tables --- */ .notion-editor-wrapper .ProseMirror table { border-collapse: collapse; margin: 1em 0; overflow: hidden; table-layout: fixed; width: 100%; } .notion-editor-wrapper .ProseMirror td, .notion-editor-wrapper .ProseMirror th { border: 1px solid var(--border); box-sizing: border-box; min-width: 1em; padding: 8px 12px; position: relative; vertical-align: top; } .notion-editor-wrapper .ProseMirror th { background-color: var(--muted); font-weight: 600; text-align: left; } .notion-editor-wrapper .ProseMirror .selectedCell:after { background: rgba(200, 200, 255, 0.4); content: ""; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; position: absolute; z-index: 2; } .notion-editor-wrapper .ProseMirror .column-resize-handle { background-color: var(--primary); bottom: -2px; position: absolute; right: -2px; top: 0; width: 4px; } .notion-editor-wrapper .ProseMirror .tableWrapper { overflow-x: auto; } .notion-editor-wrapper .ProseMirror.resize-cursor { cursor: ew-resize; cursor: col-resize; } /* ============================================ Bubble Menu (floating toolbar on selection) ============================================ */ .notion-bubble-menu { background: var(--popover); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.06); padding: 2px; display: flex; align-items: center; gap: 0; z-index: 100; } .dark .notion-bubble-menu { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4); } .notion-bubble-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; border: none; background: transparent; color: var(--foreground); cursor: pointer; transition: all 0.15s ease; } .notion-bubble-btn:hover { background: var(--accent); } .notion-bubble-btn:hover { background: var(--accent); } .notion-bubble-btn-active { background: var(--accent); color: var(--primary); } /* AI submenu inside bubble */ .notion-ai-submenu { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--popover); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08); padding: 4px; min-width: 150px; z-index: 110; } .dark .notion-ai-submenu { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } .notion-ai-subitem { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: none; background: transparent; border-radius: 6px; cursor: pointer; font-size: 0.8125rem; color: var(--foreground); transition: background 0.15s ease; } .notion-ai-subitem:hover { background: var(--accent); } .notion-ai-lang-picker { border-top: 1px solid var(--border); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 3px; padding: 6px; } .notion-ai-lang-item { font-size: 0.72rem; padding: 3px 8px; border-radius: 4px; background: var(--muted); border: 1px solid var(--border); cursor: pointer; color: var(--foreground); transition: background 0.1s; } .notion-ai-lang-item:hover { background: var(--accent); } .notion-ai-result-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 99998; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); } .notion-ai-result-modal { background: var(--popover); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 16px 48px rgba(0, 0, 0, 0.12); padding: 20px; width: min(520px, 90vw); max-height: 80vh; overflow-y: auto; } .dark .notion-ai-result-modal { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } .notion-ai-result-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .notion-ai-result-section { margin-bottom: 12px; } .notion-ai-result-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); } /* Inline input inside bubble menu (link editor) */ .notion-inline-input { background: transparent; border: none; outline: none; font-size: 0.8125rem; color: var(--foreground); width: 200px; min-width: 120px; } .notion-inline-input::placeholder { color: var(--muted-foreground); opacity: 0.6; } /* Image insert overlay */ .notion-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); } .dark .notion-overlay { background: rgba(0, 0, 0, 0.6); } .notion-image-modal { background: var(--popover); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 16px 48px rgba(0, 0, 0, 0.08); padding: 20px; width: 400px; max-width: 90vw; } .dark .notion-image-modal { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); } .notion-modal-input { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--background); color: var(--foreground); font-size: 0.8125rem; outline: none; transition: border-color var(--transition-fast); } .notion-modal-input:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .notion-modal-input::placeholder { color: var(--muted-foreground); opacity: 0.5; } .notion-modal-btn { padding: 6px 14px; border-radius: 4px; font-size: 0.8125rem; border: 1px solid var(--border); background: transparent; color: var(--foreground); cursor: pointer; transition: background var(--transition-fast); } .notion-modal-btn:hover { background: var(--accent); } .notion-modal-btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .notion-modal-btn-primary:hover { opacity: 0.9; background: var(--primary); } /* ============================================ Slash Command Menu — Premium Design ============================================ */ .notion-slash-menu { position: fixed; z-index: 9999; background: var(--popover); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.08); padding: 6px; min-width: 320px; max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; animation: slash-enter 0.2s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes slash-enter { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .dark .notion-slash-menu { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.5); } /* Header hint */ .notion-slash-header { display: flex; align-items: center; gap: 5px; padding: 5px 10px 6px; font-size: 10px; color: var(--muted-foreground); border-bottom: 1px solid var(--border); margin-bottom: 4px; opacity: 0.7; } /* Category tab bar */ .notion-slash-tabs { display: flex; align-items: center; gap: 4px; padding: 6px 6px 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 2px; } .notion-slash-tab { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 500; border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .notion-slash-tab:hover { background: var(--accent); color: var(--foreground); } .notion-slash-tab-active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .notion-slash-tab-active:hover { opacity: 0.9; background: var(--primary); color: var(--primary-foreground); } .notion-slash-tab-ai { border-color: oklch(0.82 0.08 270); color: oklch(0.52 0.18 270); } .dark .notion-slash-tab-ai { border-color: oklch(0.38 0.09 270); color: oklch(0.75 0.16 270); } .notion-slash-tab-ai.notion-slash-tab-active { background: oklch(0.55 0.18 270); border-color: oklch(0.55 0.18 270); color: white; } .notion-slash-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 10px; font-size: 9px; font-weight: 700; background: rgba(0, 0, 0, 0.1); line-height: 1; } .notion-slash-tab-active .notion-slash-tab-count { background: rgba(255, 255, 255, 0.25); } .notion-slash-section+.notion-slash-section { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; } .notion-slash-label { padding: 6px 10px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); user-select: none; } .notion-slash-label-ai { color: oklch(0.55 0.15 270); } .dark .notion-slash-label-ai { color: oklch(0.72 0.15 270); } .notion-slash-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: none; background: transparent; border-radius: 6px; cursor: pointer; text-align: left; color: var(--foreground); transition: background 0.15s ease, transform 0.08s ease; } [dir="rtl"] .notion-slash-item { text-align: right; } .notion-slash-item:hover, .notion-slash-item-selected { background: var(--accent); } .notion-slash-item-selected { transform: none; } .notion-slash-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 6px; background: var(--background); color: var(--foreground); flex-shrink: 0; transition: background 0.15s ease; } .notion-slash-item-selected .notion-slash-icon, .notion-slash-item:hover .notion-slash-icon { background: var(--popover); } .notion-slash-icon-ai { background: oklch(0.95 0.04 270); border-color: oklch(0.82 0.08 270); color: oklch(0.52 0.18 270); } .dark .notion-slash-icon-ai { background: oklch(0.22 0.05 270); border-color: oklch(0.38 0.09 270); color: oklch(0.75 0.16 270); } /* Stacked title + description */ .notion-slash-content { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 1px; } .notion-slash-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } .notion-slash-desc { font-size: 11px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; } /* Shortcut badge */ .notion-slash-shortcut { font-size: 10px; font-family: ui-monospace, monospace; background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; white-space: nowrap; } .notion-slash-loading { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; color: var(--muted-foreground); } /* ============================================ Note Card Rich Text Preview ============================================ */ .rt-preview { font-size: 0.875rem; line-height: 1.6; } .rt-preview h1 { font-size: 1.3rem; font-weight: 700; margin: 0.3em 0; } .rt-preview h2 { font-size: 1.1rem; font-weight: 600; margin: 0.3em 0; } .rt-preview h3 { font-size: 1rem; font-weight: 600; margin: 0.3em 0; } .rt-preview p { margin: 0.2em 0; } .rt-preview ul, .rt-preview ol { padding-inline-start: 1.25rem; margin: 0.2em 0; } .rt-preview blockquote { border-inline-start: 3px solid var(--border); padding-inline-start: 0.75rem; color: var(--muted-foreground); margin: 0.3em 0; } /* ── Full-page editorial editor: enforce prototype typography ──────────── */ /* TipTap ProseMirror text size — scoped to fullPage editor only */ .fullpage-editor .ProseMirror { font-size: 1.125rem; /* 18px */ line-height: 1.875; color: var(--foreground); outline: none; } .fullpage-editor .ProseMirror p { font-size: 1.125rem; line-height: 1.875; margin-bottom: 1.25em; color: var(--foreground); opacity: 0.85; } .fullpage-editor .ProseMirror h1 { font-size: 2rem; line-height: 1.3; font-family: var(--font-memento-serif, Georgia, serif); margin-bottom: 0.75em; } .fullpage-editor .ProseMirror h2 { font-size: 1.5rem; line-height: 1.35; font-family: var(--font-memento-serif, Georgia, serif); margin-bottom: 0.6em; } .fullpage-editor .ProseMirror h3 { font-size: 1.25rem; line-height: 1.4; margin-bottom: 0.5em; } .fullpage-editor .ProseMirror ul, .fullpage-editor .ProseMirror ol { font-size: 1.125rem; line-height: 1.8; padding-inline-start: 1.5em; margin-bottom: 1em; } .fullpage-editor .ProseMirror li { margin-bottom: 0.3em; } .fullpage-editor .ProseMirror blockquote { border-inline-start: 3px solid var(--foreground); padding-inline-start: 1.25rem; font-size: 1.2rem; font-style: italic; font-family: var(--font-memento-serif, Georgia, serif); color: var(--foreground); opacity: 0.7; margin: 1.5em 0; } .fullpage-editor .ProseMirror p.is-editor-empty:first-child::before { color: var(--muted-foreground); content: attr(data-placeholder); float: inline-start; height: 0; pointer-events: none; font-size: 1.125rem; opacity: 0.4; } /* ─── OVERRIDE FINAL: Force editorial body text in fullPage using CSS var ──────── */ /* Sets font-size on the container so TipTap inherits --editor-body-size */ .fullpage-editor { font-size: var(--editor-body-size, 16px) !important; line-height: 1.85 !important; } /* Also target TipTap's actual editable div directly */ .fullpage-editor .tiptap, .fullpage-editor .tiptap p, .fullpage-editor .ProseMirror, .fullpage-editor .ProseMirror>p { font-size: var(--editor-body-size, 16px) !important; line-height: 1.85 !important; } /* Keep headings at their correct relative sizes */ .fullpage-editor .tiptap h1, .fullpage-editor .ProseMirror h1 { font-size: 2.25rem !important; line-height: 1.25 !important; } .fullpage-editor .tiptap h2, .fullpage-editor .ProseMirror h2 { font-size: 1.75rem !important; line-height: 1.3 !important; } .fullpage-editor .tiptap h3, .fullpage-editor .ProseMirror h3 { font-size: 1.375rem !important; line-height: 1.4 !important; } /* ────────────────────────────────────────────── SONNER TOASTS — Architectural Grid Styling ────────────────────────────────────────────── */ .memento-toast { background: color-mix(in srgb, var(--card) 85%, transparent) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; color: var(--foreground) !important; border: 1px solid var(--border) !important; font-family: var(--font-sans) !important; border-radius: 14px !important; box-shadow: var(--shadow-level-2) !important; padding: 12px 16px !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: -0.01em !important; } .memento-toast-success { border-color: var(--primary) !important; } .memento-toast-error { border-color: #fca5a5 !important; /* Soft error red */ } .memento-toast-info { border-color: var(--ai-accent) !important; } .memento-toast-warning { border-color: var(--memento-accent) !important; }