/* ============================================================ Spoonbook — Design Tokens Inspirado en el ADN visual de Bending Spoons, traducido a una app de escritorio (macOS, Tailwind/Tauri-ready). ============================================================ */ :root { /* ---------------------------------------------------------- PRIMITIVES — paleta cruda, no usar directamente en UI ---------------------------------------------------------- */ /* Neutros — escala fría, ligeramente azul (no warm-gray) */ --neutral-0: #ffffff; --neutral-25: #fafbfc; --neutral-50: #f4f5f7; --neutral-100: #ebedf0; --neutral-150: #dee1e6; --neutral-200: #c9cdd4; --neutral-300: #a8aeb8; --neutral-400: #828994; --neutral-500: #5e6470; --neutral-600: #444a55; --neutral-700: #2f343d; --neutral-800: #1f242c; --neutral-850: #171b22; --neutral-900: #11141a; --neutral-950: #0a0c10; /* Brand — pasteles de Bending Spoons, sin suavizar */ --pastel-cyan: #72e5ff; --pastel-lime: #d3efab; --pastel-pink: #ffe3e3; --pastel-iris: #5867ed; /* el único saturado, "blue" de BS */ --pastel-lavender:#efe9fe; --pastel-butter: #e2e2a0; --pastel-sky: #c1d6f9; --pastel-fuchsia: #ffc9ee; --pastel-peach: #ffa575; --pastel-amber: #ffcb00; /* Estados (semánticos, derivados pero ajustados para UI desktop) */ --signal-success: #2ea76a; --signal-warning: #d68a1a; --signal-danger: #d4493a; --signal-info: #5867ed; /* ---------------------------------------------------------- SEMÁNTICOS — LIGHT (default) Usar SIEMPRE estos en componentes, nunca primitives. ---------------------------------------------------------- */ /* Surfaces */ --bg-window: #ffffff; /* fondo de la ventana principal */ --bg-sidebar: #f4f5f7; /* sidebar izquierdo */ --bg-panel: #fafbfc; /* panel central (lista de notas) */ --bg-canvas: #ffffff; /* área de edición */ --bg-overlay: rgba(17, 20, 26, 0.32); /* backdrop modales */ --bg-elevated: #ffffff; /* popovers, dropdowns, menús */ --bg-titlebar: #f4f5f7; /* matchea sidebar para vibrancy */ --bg-toolbar: transparent; /* la toolbar hereda de panel */ /* Hover / selected */ --bg-hover: rgba(17, 20, 26, 0.04); --bg-active: rgba(17, 20, 26, 0.07); --bg-selected: rgba(88, 103, 237, 0.10); /* iris pastel @ 10% */ --bg-selected-strong: var(--pastel-iris); --bg-focus-ring-bg: rgba(88, 103, 237, 0.20); /* Text */ --text-primary: #11141a; --text-secondary: #5e6470; --text-tertiary: #828994; --text-disabled: #a8aeb8; --text-inverse: #ffffff; --text-on-accent: #ffffff; --text-link: #5867ed; /* Borders / dividers */ --border-subtle: #ebedf0; --border-default: #dee1e6; --border-strong: #c9cdd4; --border-focus: #5867ed; --divider: #ebedf0; /* Accent (acción primaria) — negro estilo BS web */ --accent-bg: #11141a; --accent-bg-hover: #2f343d; --accent-bg-active: #444a55; --accent-fg: #ffffff; /* Focus ring — anillo iris semi-transparente */ --focus-ring: 0 0 0 3px rgba(88, 103, 237, 0.35); --focus-ring-inset: inset 0 0 0 1.5px #5867ed; /* ---------------------------------------------------------- ELEVATION — sombras estilo macOS (suaves, capas múltiples) ---------------------------------------------------------- */ --shadow-xs: 0 1px 0 rgba(17, 20, 26, 0.04); --shadow-sm: 0 1px 2px rgba(17, 20, 26, 0.06), 0 1px 1px rgba(17, 20, 26, 0.04); --shadow-md: 0 4px 8px rgba(17, 20, 26, 0.06), 0 2px 4px rgba(17, 20, 26, 0.04), 0 0 0 1px rgba(17, 20, 26, 0.04); --shadow-lg: 0 12px 24px rgba(17, 20, 26, 0.10), 0 4px 8px rgba(17, 20, 26, 0.06), 0 0 0 1px rgba(17, 20, 26, 0.05); --shadow-xl: 0 24px 48px rgba(17, 20, 26, 0.16), 0 8px 16px rgba(17, 20, 26, 0.08), 0 0 0 1px rgba(17, 20, 26, 0.06); /* ---------------------------------------------------------- TYPOGRAPHY Stack nativo macOS (matchea el chrome del SO). Display = misma fuente, peso fuerte; mono solo para code. ---------------------------------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Escala — densidad media (cómoda) ajustada para desktop */ --fs-2xs: 10px; /* meta, kbd shortcuts */ --fs-xs: 11px; /* labels, captions, tags */ --fs-sm: 12px; /* sidebar items, list meta */ --fs-base: 13px; /* DEFAULT body — list items, inputs */ --fs-md: 14px; /* títulos pequeños, body comfy */ --fs-lg: 16px; /* panel titles */ --fs-xl: 20px; /* note titles */ --fs-2xl: 28px; /* document headings */ --fs-3xl: 40px; /* hero / empty states */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed:1.65; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.06em; /* ---------------------------------------------------------- SPACING — base 4 (estándar desktop denso) ---------------------------------------------------------- */ --sp-0: 0; --sp-px: 1px; --sp-0_5: 2px; --sp-1: 4px; --sp-1_5: 6px; --sp-2: 8px; --sp-2_5: 10px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ---------------------------------------------------------- RADIUS — BS web usa pill (full); aquí lo bajamos a desktop. pill se reserva para pills/badges; chrome usa md. ---------------------------------------------------------- */ --radius-none: 0; --radius-xs: 3px; --radius-sm: 5px; --radius-md: 7px; /* default — botones, inputs, list items */ --radius-lg: 10px; /* cards, popovers */ --radius-xl: 14px; /* modales */ --radius-2xl: 20px; /* hero cards */ --radius-pill: 9999px; /* ---------------------------------------------------------- LAYOUT — anchos y alturas de chrome de la app ---------------------------------------------------------- */ --titlebar-h: 38px; /* altura standard macOS traffic-lights */ --traffic-light-w: 78px; /* zona reservada izquierda */ --sidebar-w: 240px; /* fijo, redimensionable 200–320 */ --sidebar-w-min: 200px; --sidebar-w-max: 320px; --notelist-w: 320px; /* panel central — lista de notas */ --notelist-w-min: 260px; --notelist-w-max: 420px; --statusbar-h: 24px; --row-h-comfy: 30px; /* lista en modo cómodo */ --row-h-dense: 24px; /* lista en modo denso */ --control-h-sm: 24px; --control-h-md: 28px; /* default — botones, inputs */ --control-h-lg: 32px; --hit-target-min: 28px; /* mínimo desktop (web es 44px) */ /* Drag region — la titlebar entera es draggable excepto controls */ /* (se aplica con -webkit-app-region: drag/no-drag) */ /* Scrollbar — overlay style macOS */ --scrollbar-w: 10px; --scrollbar-thumb: rgba(17, 20, 26, 0.28); --scrollbar-thumb-hover: rgba(17, 20, 26, 0.45); --scrollbar-track: transparent; /* Animation */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; /* Z-index */ --z-base: 0; --z-sticky: 10; --z-dropdown: 100; --z-popover: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; } /* ============================================================ DARK MODE Auto via prefers-color-scheme; force via [data-theme="dark"] ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg-window: #1f242c; --bg-sidebar: #171b22; --bg-panel: #1b2028; --bg-canvas: #1f242c; --bg-overlay: rgba(0, 0, 0, 0.55); --bg-elevated: #2f343d; --bg-titlebar: #171b22; --bg-hover: rgba(255, 255, 255, 0.05); --bg-active: rgba(255, 255, 255, 0.09); --bg-selected: rgba(114, 229, 255, 0.14); /* cyan en dark */ --bg-selected-strong: var(--pastel-cyan); --bg-focus-ring-bg: rgba(114, 229, 255, 0.22); --text-primary: #ebedf0; --text-secondary: #a8aeb8; --text-tertiary: #828994; --text-disabled: #5e6470; --text-inverse: #11141a; --text-on-accent: #11141a; /* acento es claro en dark */ --text-link: #72e5ff; --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --border-focus: #72e5ff; --divider: rgba(255,255,255,0.08); --accent-bg: #ebedf0; --accent-bg-hover: #ffffff; --accent-bg-active: #c9cdd4; --accent-fg: #11141a; --focus-ring: 0 0 0 3px rgba(114, 229, 255, 0.35); --focus-ring-inset: inset 0 0 0 1.5px #72e5ff; --shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.10); --scrollbar-thumb: rgba(255, 255, 255, 0.20); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.35); } } /* Forzar dark explícito */ [data-theme="dark"] { color-scheme: dark; --bg-window: #1f242c; --bg-sidebar: #171b22; --bg-panel: #1b2028; --bg-canvas: #1f242c; --bg-overlay: rgba(0,0,0,0.55); --bg-elevated: #2f343d; --bg-titlebar: #171b22; --bg-hover: rgba(255,255,255,0.05); --bg-active: rgba(255,255,255,0.09); --bg-selected: rgba(114,229,255,0.14); --bg-selected-strong: #72e5ff; --text-primary: #ebedf0; --text-secondary: #a8aeb8; --text-tertiary: #828994; --text-disabled: #5e6470; --text-inverse: #11141a; --text-on-accent: #11141a; --text-link: #72e5ff; --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.10); --border-strong: rgba(255,255,255,0.18); --border-focus: #72e5ff; --divider: rgba(255,255,255,0.08); --accent-bg: #ebedf0; --accent-bg-hover: #ffffff; --accent-bg-active: #c9cdd4; --accent-fg: #11141a; --focus-ring: 0 0 0 3px rgba(114,229,255,0.35); --focus-ring-inset: inset 0 0 0 1.5px #72e5ff; --shadow-md: 0 4px 8px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06); --shadow-lg: 0 12px 24px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08); --shadow-xl: 0 24px 48px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.10); --scrollbar-thumb: rgba(255,255,255,0.20); --scrollbar-thumb-hover: rgba(255,255,255,0.35); } /* ============================================================ BASE RESET — pequeño, app-focused ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--text-primary); background: var(--bg-window); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, select, textarea { font: inherit; color: inherit; } /* Scrollbars overlay-style */ ::-webkit-scrollbar { width: var(--scrollbar-w); height: var(--scrollbar-w); } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; border: 2px solid transparent; }