From 8d6f3be87a7c6ce6e99f6f75f1f2936943176dbf Mon Sep 17 00:00:00 2001
From: arsam <me@asabbagh.com>
Date: Fri, 18 Sep 2026 23:14:05 +0330
Subject: [PATCH] Import source: src/styles

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
---
 src/styles.css | 114 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100644 src/styles.css

diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..4b3423f
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,114 @@
+@import "tailwindcss";
+
+/* ---------------------------------------------------------------------------
+   Notara design tokens — matched to Notion's light/dark palette (PLAN.md
+   "Visual Fidelity"). All UI colors must come from these variables.
+--------------------------------------------------------------------------- */
+:root {
+  /* surfaces */
+  --bg: #ffffff;
+  --bg-sidebar: #f7f7f5;
+  --bg-hover: rgba(55, 53, 47, 0.06);
+  --bg-active: rgba(55, 53, 47, 0.1);
+  --bg-modal: #ffffff;
+
+  /* text */
+  --text: #37352f;
+  --text-secondary: rgba(55, 53, 47, 0.65);
+  --text-tertiary: rgba(55, 53, 47, 0.45);
+
+  /* lines & accents */
+  --border: rgba(55, 53, 47, 0.09);
+  --divider: rgba(55, 53, 47, 0.06);
+  --accent: #2383e2;
+  --accent-bg: rgba(35, 131, 226, 0.14);
+  --selection: rgba(35, 131, 226, 0.28);
+  --danger: #eb5757;
+
+  /* shadows */
+  --shadow-popover: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
+    rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
+}
+
+.dark {
+  --bg: #191919;
+  --bg-sidebar: #202020;
+  --bg-hover: rgba(255, 255, 255, 0.055);
+  --bg-active: rgba(255, 255, 255, 0.09);
+  --bg-modal: #252525;
+
+  --text: rgba(255, 255, 255, 0.81);
+  --text-secondary: rgba(255, 255, 255, 0.46);
+  --text-tertiary: rgba(255, 255, 255, 0.3);
+
+  --border: rgba(255, 255, 255, 0.094);
+  --divider: rgba(255, 255, 255, 0.06);
+  --accent: #2383e2;
+  --accent-bg: rgba(35, 131, 226, 0.2);
+  --selection: rgba(35, 131, 226, 0.35);
+  --danger: #eb5757;
+
+  --shadow-popover: rgba(15, 15, 15, 0.2) 0px 0px 0px 1px,
+    rgba(15, 15, 15, 0.4) 0px 3px 6px, rgba(15, 15, 15, 0.6) 0px 9px 24px;
+}
+
+@theme inline {
+  --color-bg: var(--bg);
+  --color-bg-sidebar: var(--bg-sidebar);
+  --color-bg-hover: var(--bg-hover);
+  --color-bg-active: var(--bg-active);
+  --color-bg-modal: var(--bg-modal);
+  --color-text: var(--text);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-tertiary: var(--text-tertiary);
+  --color-border: var(--border);
+  --color-divider: var(--divider);
+  --color-accent: var(--accent);
+  --color-accent-bg: var(--accent-bg);
+  --color-danger: var(--danger);
+  --font-sans: "Inter Variable", ui-sans-serif, -apple-system,
+    BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica,
+    "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  user-select: none; /* app chrome is not selectable; editor opts back in */
+}
+
+::selection {
+  background: var(--selection);
+}
+
+/* Notion-style thin scrollbars */
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+*::-webkit-scrollbar-thumb {
+  background: rgba(55, 53, 47, 0.2);
+  border-radius: 5px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+.dark *::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.18);
+  background-clip: content-box;
+  border: 2px solid transparent;
+  border-radius: 5px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
+}